What are Open Graph tags?

Open Graph tags are HTML meta tags that tell social media platforms how to display your link when shared. They include og:title (the headline), og:description (the summary), og:image (the preview image), and og:url (the canonical URL).

Do I need Open Graph tags for my website?

If you share your website links on any social platform — X, LinkedIn, Slack, Discord, WhatsApp, or Reddit — you need Open Graph tags. Without them, platforms guess how to display your link, and they guess poorly.

Is Open Graph the same as Twitter Cards?

No. Open Graph was created by Facebook in 2010. Twitter Cards were created by Twitter separately. However, most platforms support both, and you should set both for maximum compatibility.

Cos'è Open Graph? Una guida completa per principianti

Condividi un collegamento sui social media. L'anteprima sembra terribile. Ecco perché e come i tag Open Graph risolvono il problema.

Vuoi vedere come appaiono effettivamente i tuoi link?

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

Risposta rapida

Open Graph è un insieme di meta tag HTML che controllano l'aspetto dei collegamenti sui social media
Tag principali: og:title, og:description, og:image, og:url
Senza i tag OG, le piattaforme indovinano, e indovinano male
Imposta i tag OG + i tag Twitter Card per una copertura completa

Cos'è realmente Open Graph

Open Graph è un protocollo inventato da Facebook nel 2010. Prima di Open Graph, quando qualcuno condivideva un collegamento su Facebook, l'anteprima era imprevedibile. Facebook raschiava la pagina alla ricerca di immagini e testo e il risultato era spesso casuale: a volte una piccola favicon, a volte una foto casuale dalla pagina, a volte niente.

Facebook ha detto: "Diamo ai webmaster un modo standard per dirci cosa mostrare." Hanno introdotto una serie di meta tag che qualsiasi sito Web potrebbe aggiungere al proprio HTML. Altre piattaforme — X, LinkedIn, Slack, Discord, WhatsApp, Reddit — hanno adottato lo stesso standard. Oggi Open Graph è il linguaggio universale per le anteprime dei collegamenti su Internet.

Non è una tecnologia che installi. Sono solo meta tag HTML nella sezione della tua pagina. Questo è tutto.

I tag Core Open Graph

Ogni pagina che viene condivisa sui social media dovrebbe avere almeno questi quattro tag:

<meta property="og:title" content="Your Page Title" />
<meta property="og:description" content="A compelling one-sentence summary." />
<meta property="og:image" content="https://yoursite.com/images/preview.jpg" />
<meta property="og:url" content="https://yoursite.com/your-page" />

Ecco cosa fa ciascuno:

og:title: il titolo che appare nella scheda di anteprima. Di solito il titolo della pagina o il titolo dell'articolo.
og:description — Un breve riassunto (2-3 frasi) che appare sotto il titolo.
og:image — L'immagine di anteprima. Dimensione consigliata: 1200×630 pixel (rapporto 1,91:1).
og:url — L'URL canonico della pagina. Aiuta le piattaforme a identificare l'URL corretto.

Ci sono tag aggiuntivi opzionali come og:type (solitamente "sito web" o "articolo"), og:site_name (nome del tuo marchio) e og:locale (lingua). Ma i quattro sopra elencati sono quelli che contano di più per le anteprime dei collegamenti.

Come funziona Open Graph: passo dopo passo

Ecco cosa succede quando qualcuno condivide un collegamento:

Qualcuno incolla un URL in X, LinkedIn, Slack, Discord o ovunque.
Il bot della piattaforma recupera l'URL e legge l'HTML dall'alto verso il basso.
Cerca og:tags nella sezione .
Costruisce una carta di anteprima utilizzando i valori og:title, og:description e og:image.
La scheda viene visualizzata a chiunque veda il collegamento condiviso.

Se la piattaforma non trova i tag og:, ricorre alla propria euristica: selezionando immagini casuali, utilizzando il tag </code>, ecc. Questo comportamento di fallback è il motivo per cui così tanti collegamenti condivisi sembrano terribili.</p> <h2 data-i18n="b.what-is-open-graph.31">Open Graph contro Twitter Cards</h2> <p data-i18n="b.what-is-open-graph.32" data-i18n-html>Twitter ha creato il proprio sistema di tag chiamato "Twitter Cards" prima che esistesse Open Graph. Twitter Cards usa gli attributi <code>twitter:card</code>, <code>twitter:title</code>, <code>twitter:description</code> e <code>twitter:image</code> invece di <code>og:</code> prefissi.</p> <p data-i18n="b.what-is-open-graph.33" data-i18n-html>Oggi la maggior parte delle piattaforme supporta entrambi. Ma X/Twitter preferisce ancora i tag <code>twitter:card</code> rispetto ai tag OG. Ecco perché la procedura migliore è impostare <strong>both</strong>:</p> <pre><code> <meta property="og:title" content="Your Title" /> <meta property="og:image" content="https://yoursite.com/image.jpg" />  <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:title" content="Your Title" /> <meta name="twitter:image" content="https://yoursite.com/image.jpg" /></code></pre> <h2 data-i18n="b.what-is-open-graph.34">Perché questo è importante per il tuo sito web</h2> <p data-i18n="b.what-is-open-graph.35">Se condividi i tuoi contenuti ovunque sui social media, cosa che probabilmente fai se hai un sito web, le anteprime dei tuoi collegamenti sono la tua prima impressione. Un'anteprima ben realizzata con un titolo chiaro, una descrizione accattivante e una buona immagine aumenta notevolmente la percentuale di clic.</p> <p data-i18n="b.what-is-open-graph.36">Un'anteprima non funzionante (immagine mancante, titolo troncato o descrizione confusa) rende i tuoi contenuti poco professionali. Le persone lo superano.</p> <p data-i18n="b.what-is-open-graph.37">I tag Open Graph sono la differenza tra i due. Richiedono 5 minuti per la configurazione e hanno un impatto sproporzionato sul rendimento dei tuoi contenuti sui social media.</p> <h2 data-i18n="b.what-is-open-graph.38">Lista di controllo rapida</h2> <div class="checklist"> <ol> <li data-i18n="b.what-is-open-graph.39" data-i18n-html>Aggiungi <code>og:title</code>, <code>og:description</code>, <code>og:image</code> e <code>og:url</code> a ogni pagina</li> <li data-i18n="b.what-is-open-graph.40" data-i18n-html>Aggiungi <code>twitter:card</code> e <code>twitter:image</code> per la compatibilità con X/Twitter</li> <li data-i18n="b.what-is-open-graph.41">Imposta la dimensione dell'immagine su 1200×630 pixel</li> <li data-i18n="b.what-is-open-graph.42">Utilizza URL assoluti (https://...) per tutti i percorsi delle immagini</li> <li data-i18n="b.what-is-open-graph.43" data-i18n-html>Prova con <a href="https://proovd.in/it/">Proovd</a> per vedere come appare la tua pagina su tutte le piattaforme</li> </ol> </div> <h2 data-i18n="b.what-is-open-graph.44">Domande frequenti</h2> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.45">Ho bisogno dei tag Open Graph se non condivido sui social media?</h3> <p data-i18n="b.what-is-open-graph.46">Se non condividi collegamenti da nessuna parte, non ne hai bisogno. Ma se hai un sito web e lo condividi anche una sola volta sui social media, i tag OG sono essenziali.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.47">I tag Open Graph influiscono sul posizionamento di Google?</h3> <p data-i18n="b.what-is-open-graph.48">Non direttamente. Google non utilizza i tag OG come fattore di ranking. Ma possono influenzare le percentuali di clic dai risultati di ricerca e dalle condivisioni sui social, il che influisce indirettamente sul traffico e sulla visibilità.</p> </div> <div class="faq-item"> <h3 data-i18n="b.what-is-open-graph.49">Posso impostare tag OG diversi per pagine diverse?</h3> <p data-i18n="b.what-is-open-graph.50">SÌ. Ogni pagina dovrebbe avere i propri tag OG che corrispondano al suo contenuto. Un post sul blog sui cani dovrebbe avere og:title e og:image diversi da una pagina sui gatti.</p> </div> <div class="internal-links"> <h3 data-i18n="b.what-is-open-graph.51">Articoli correlati</h3> <ul style="margin:0; padding-left: 1.25rem;"><li data-i18n="b.what-is-open-graph.52" data-i18n-html><a href="/it/blog/discord-link-preview-not-working">Discord L'anteprima del collegamento non funziona? 7 soluzioni da provare (2026)</a></li> <li data-i18n="b.what-is-open-graph.53" data-i18n-html><a href="/it/blog/how-to-add-open-graph-tags">Come aggiungere Open Graph tag a qualsiasi sito web</a></li> <li data-i18n="b.what-is-open-graph.54" data-i18n-html><a href="/it/blog/open-graph-vs-twitter-card">Open Graph vs Twitter Card: qual è la differenza?</a></li> <li data-i18n="b.what-is-open-graph.55" data-i18n-html><a href="/it/blog/og-image-size-guide">Open Graph Dimensioni immagine: la guida completa al 2026</a></li> </ul> </div> <div class="cta"> <p style="margin:0 0 0.5rem;" data-i18n="b.what-is-open-graph.56" data-i18n-html><strong>Controlla i tuoi Open Graph tag in pochi secondi</strong></p> <p style="margin:0;" data-i18n="b.what-is-open-graph.57" data-i18n-html>Controlla gratuitamente i tuoi tag Open Graph con <a href="https://proovd.in/it/">Proovd</a>: incolla un URL e visualizza l'anteprima su X, LinkedIn, Slack, Discord, WhatsApp e Reddit.</p> </div> </article> </div> <script src="/i18n/apply.js" defer></script> </body> </html>