← Blog

Open Graph Tag in Next.js: Guida per sviluppatori 2026

Next.js semplifica i tag OG con l'API dei metadati. Ecco tutto ciò che devi sapere: dalle immagini OG statiche a quelle dinamiche.

Non sei sicuro che i tuoi tag OG Next.js siano corretti?

Controlla gratuitamente i tuoi tag Open Graph con Proovd: incolla un URL e vedi esattamente come appare su X, LinkedIn, Slack, Discord, WhatsApp e Reddit.

Risposta rapida

  • Next.js 13+ utilizza l'API dei metadati per i tag OG
  • Pagine statiche: esporta metadata oggetto
  • Pagine dinamiche: usa generateMetadata()
  • Immagini OG dinamiche: usa @vercel/og

Next.js Router app: metadati statici

In Next.js 13+ (App Router), il modo più semplice per impostare i tag OG è l'esportazione metadata nel layout o nel file di pagina:

export const metadata = {
  title: 'My Next.js App',
  description: 'A Next.js app with OG tags',
  openGraph: {
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
  },
};

Questo genera automaticamente i tag corretti nella tua pagina . Next.js fa il resto.

Next.js Router app: metadati dinamici

Per le pagine dinamiche (post di blog, pagine di prodotti), utilizza generateMetadata():

import { notFound } from 'next/navigation';
import { getPost } from '@/lib/posts';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Immagini OG dinamiche con @vercel/og

Per le immagini OG personalizzate (con i colori del marchio, i titoli dei post, ecc.), utilizza @vercel/og:

// app/api/og/route.ts
import { ImageResponse } from '@vercel/og';

export function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      

        

          {title}
        

      

    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

Quindi fai riferimento a questo percorso API nei tuoi metadati:

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
    twitter: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}

Next.js Router di pagine

Se stai utilizzando il vecchio Pages Router, usa next/head o il pacchetto next-seo:

import Head from 'next/head';

export default function PostPage() {
  return (
    <Head>
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.coverImage} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={post.title} />
      <meta name="twitter:image" content={post.coverImage} />
    </Head>
  );
}

Oppure usa next-seo per un'API più pulita:

import { NextSeo } from 'next-seo';

<NextSeo
  title={post.title}
  description={post.excerpt}
  openGraph={{
    title: post.title,
    description: post.excerpt,
    images: [{ url: post.coverImage }],
    type: 'article',
  }}
  twitter={{
    type: 'summary_large_image',
  }}
/>

Elenco di controllo per la correzione rapida

  1. Utilizza l'API dei metadati per le pagine statiche
  2. Utilizza generateMetadata() per le pagine dinamiche
  3. Imposta entrambe le proprietà openGraph e twitter
  4. Utilizza @vercel/og per immagini OG dinamiche
  5. Prova con Proovd per verificare su tutte le piattaforme

Domande frequenti

Next.js esegue automaticamente il rendering dei tag OG nell'HTML?

SÌ. Next.js inserisce i metadati come tag nell'HTML renderizzato dal server, in modo che i crawler li vedano senza JavaScript.

Posso utilizzare immagini OG dinamiche con Vercel Edge Functions?

SÌ. @vercel/og funziona su Vercel Edge e genera immagini al volo. L'URL dell'immagine viene fatto riferimento nei tuoi metadati e le piattaforme lo recuperano quando eseguono la scansione della tua pagina.

Articoli correlati

Verifica i tuoi Next.js tag OG su tutte le piattaforme

Controlla gratuitamente i tuoi tag Open Graph con Proovd: incolla un URL e visualizza l'anteprima su X, LinkedIn, Slack, Discord, WhatsApp e Reddit.