Come aggiungere tag Open Graph a qualsiasi sito web

Che tu stia utilizzando HTML non elaborato, WordPress, Next.js o Webflow, ecco esattamente come aggiungere tag Open Graph al tuo sito.

Metodo 1: HTML non elaborato (qualsiasi sito Web statico)

Se hai accesso diretto ai tuoi file HTML, aggiungi questi tag nella sezione di ogni pagina:

<!-- Open Graph -->
<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling description." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />
<meta property="og:type" content="website" />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A compelling description." />
<meta name="twitter:image" content="https://yoursite.com/images/preview.jpg" />

Assicurati che l'URL og:image sia assoluto (inizia con https://). Percorsi relativi come /images/preview.jpg non funzioneranno.

Metodo 2: WordPress (Yoast SEO)

Se utilizzi WordPress con Yoast SEO, i tag OG vengono gestiti automaticamente:

1. Installa e attiva il plugin Yoast SEO
2. Modifica qualsiasi pagina o post
3. Scorri verso il basso fino al metabox Yoast SEO
4. Fai clic sulla scheda "Sociale".
5. Imposta "Facebook titolo", "Facebook descrizione" e "Facebook immagine"
6. Yoast genera automaticamente i tag og: corretti

Yoast aggiunge automaticamente anche i tag Twitter Card. Puoi configurarli in Yoast SEO → Social → Twitter.

Metodo 3: WordPress (RankMath)

RankMath funziona in modo simile a Yoast ma con impostazioni leggermente diverse:

1. Installa e attiva RankMath SEO
2. Modifica qualsiasi pagina o post
3. Trova il metabox RankMath
4. Vai alla scheda "Sociale".
5. Imposta l'immagine social, il titolo e la descrizione
6. RankMath genera automaticamente i tag OG e Twitter Card

Metodo 4: Next.js (Router app)

In Next.js 13+ (App Router), utilizza l'API dei metadati:

export const metadata = {
  title: 'Your Page Title',
  description: 'A compelling description.',
  openGraph: {
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'Your Page Title',
    description: 'A compelling description.',
    images: ['https://yoursite.com/images/preview.jpg'],
  },
};

Per le pagine dinamiche (come i post del blog), genera metadati in generateMetadata():

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

Vedi i nostri tag Open Graph nella guida Next.js per un'immersione più profonda.

Metodo 5: Webflow

Webflow ha impostazioni Open Graph integrate:

1. Vai alle impostazioni del tuo progetto
2. Fai clic su "Impostazioni SEO"
3. In "Meta tag predefiniti", imposta l'immagine Facebook/OG, il titolo e la descrizione
4. Per le singole pagine, vai alle impostazioni della pagina → Impostazioni SEO e sovrascrivi le impostazioni predefinite
5. Webflow genera automaticamente i tag OG corretti

Metodo 6: Configurazione personalizzata CMS o Headless

Se utilizzi un CMS headless (Contentful, Sanity, Strapi, ecc.), aggiungi i tag OG nel framework del frontend. Il processo è lo stesso di Next.js: genera i tag dinamicamente dai tuoi dati CMS e inseriscili nella pagina .

Elenco di controllo per la correzione rapida

Domande frequenti