← Blog

Open Graph vs Twitter Card: qual è la differenza?

Entrambi controllano le anteprime dei collegamenti sui social media. Ma non sono la stessa cosa. Ecco quando usarli ciascuno e perché dovresti usarli entrambi.

Non sei sicuro di quali tag abbia la tua pagina?

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

  • Open Graph (og:) è stato creato da Facebook nel 2010
  • Twitter Cards (twitter:card) sono stati creati da Twitter separatamente
  • La maggior parte delle piattaforme li supporta entrambi, ma X/Twitter preferisce twitter:card
  • Impostali entrambi per la massima compatibilità

Open Graph — Lo standard Facebook

Open Graph è stato introdotto da Facebook nel 2010. Prima dei tag OG, quando qualcuno condivideva un collegamento su Facebook, la piattaforma sceglieva casualmente un'immagine e un testo dalla pagina. Il risultato era imprevedibile e spesso poco attraente.

Facebook ha detto: "Diamo ai webmaster un modo standard per controllare le anteprime dei collegamenti." Hanno creato una serie di meta tag che qualsiasi sito web potrebbe aggiungere:

<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />

Altre piattaforme hanno adottato lo standard Open Graph. LinkedIn, Discord, Slack, WhatsApp e Reddit leggono tutti i tag og: per visualizzare le anteprime dei collegamenti.

Twitter Cards – Lo standard Twitter

Twitter ha creato il proprio sistema chiamato "Twitter Cards" prima che Open Graph venisse ampiamente adottato. Twitter Cards utilizza una convenzione di denominazione degli attributi diversa:

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Twitter Cards hanno due tipi principali:

Compatibilità della piattaforma

Ecco quali piattaforme utilizzano quali tag:

Platform Primary Tags Fallback
X / Twitter twitter:card og: tags
LinkedIn og: tags twitter:card tags
Discord og: tags twitter:card tags
Slack og: tags twitter:card tags
WhatsApp og: tags twitter:card tags
Reddit og: tags twitter:card tags

Perché dovresti impostarli entrambi

Anche se la maggior parte delle piattaforme supporta entrambi i tipi di tag, ci sono buoni motivi per impostarli entrambi:

  1. X/Twitter preferisce i tag twitter:card. Sebbene X possa ricorrere ai tag OG, potrebbe non visualizzarli correttamente. L'impostazione di entrambi garantisce che X mostri il tipo di carta corretto.
  2. A prova di futuro. Se viene lanciata una nuova piattaforma e si preferisce uno standard rispetto all'altro, averli entrambi garantisce la compatibilità.
  3. Coerenza. L'utilizzo di entrambi garantisce che l'anteprima appaia corretta indipendentemente da quale piattaforma legge quali tag.

La configurazione completa

Ecco la configurazione consigliata per qualsiasi pagina:

<!-- Open Graph (LinkedIn, Discord, Slack, WhatsApp, Reddit) -->
<meta property="og:title" content="Your Title" />
<meta property="og:description" content="Your description" />
<meta property="og:image" content="https://yoursite.com/image.jpg" />
<meta property="og:url" content="https://yoursite.com/page" />
<meta property="og:type" content="website" />

<!-- Twitter/X (X/Twitter) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />
<meta name="twitter:description" content="Your description" />
<meta name="twitter:image" content="https://yoursite.com/image.jpg" />

Elenco di controllo per la correzione rapida

  1. Imposta tutti e quattro i tag og: (titolo, descrizione, immagine, url)
  2. Imposta twitter:card con il valore "summary_large_image"
  3. Imposta twitter:title e twitter:image
  4. Utilizza lo stesso URL immagine sia per og:image che per twitter:image
  5. Prova con Proovd per verificare su tutte le piattaforme

Domande frequenti

Posso usare solo i tag OG e saltare Twitter Cards?

Tu puoi, ma X/Twitter potrebbe non visualizzare correttamente la tua carta. Imposta sempre entrambi per ottenere i migliori risultati su tutte le piattaforme.

Ho bisogno di immagini diverse per OG e Twitter Card?

No. Utilizza lo stesso URL dell'immagine sia per og:image che per twitter:image. Le piattaforme utilizzeranno il tag che preferiscono.

Articoli correlati

Verifica sia i tag OG che Twitter Card

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