Torna a « Basi SEO tecniche »
Basi SEO tecniche4 min di lettura

I tag Open Graph

Come controllare l'anteprima della vostra pagina sui social e nelle chat IA: i tag og:title, og:description e og:image spiegati.

I tag Open Graph controllano l'anteprima della vostra pagina quando viene condivisa sui social network, in una messaggistica, o citata in una conversazione con un'IA generativa capace di mostrare un'anteprima arricchita.

A cosa servono i tag Open Graph

Senza markup Open Graph, una piattaforma che mostra un'anteprima di link (social network, messaggistica, alcuni assistenti IA) deve indovinare quale titolo, immagine e descrizione usare — spesso pescando in modo maldestro nel contenuto della pagina: una prima immagine trovata nell'HTML senza alcun legame con l'argomento, un titolo troncato a metà frase, o una descrizione assente. I tag Open Graph riprendono il controllo di questa anteprima e garantiscono una presentazione coerente, indipendentemente da dove venga condiviso il link.

Questo standard, ideato inizialmente da Facebook, è stato da allora adottato come riferimento di fatto dalla quasi totalità delle piattaforme che mostrano anteprime di link, il che ne fa un markup a basso sforzo di implementazione e ad ampio beneficio — una manciata di tag copre la maggior parte dei casi d'uso.

I tag essenziali

<head>
  <meta property="og:title" content="Guida completa alla fatturazione elettronica">
  <meta property="og:description" content="Tutto quello che c'è da sapere su formati, obblighi e piattaforme di fatturazione elettronica nel 2026.">
  <meta property="og:image" content="https://esempio.com/images/guida-fatturazione-og.jpg">
  <meta property="og:url" content="https://esempio.com/guida-fatturazione-elettronica">
  <meta property="og:type" content="article">
</head>
  • og:title: titolo dell'anteprima, spesso vicino al <title> ma può essere riformulato per un contesto di condivisione social.
  • og:description: riassunto mostrato sotto il titolo nell'anteprima.
  • og:image: immagine della card di anteprima — l'elemento che influenza di più il tasso di clic su una condivisione.
  • og:url: URL canonico della pagina condivisa.
  • og:type: natura del contenuto (article, website, product...).

Questi cinque tag coprono la grande maggioranza dei casi d'uso. Esistono altre proprietà per esigenze più specifiche (og:site_name per il nome del sito, article:author o article:published_time per un contenuto editoriale), ma restano secondarie rispetto al nucleo formato da titolo, descrizione e immagine.

Buone pratiche per l'immagine Open Graph

Un'immagine dalle dimensioni errate o assente genera un'anteprima vuota o mal ritagliata, il che riduce fortemente l'engagement su una condivisione. Le raccomandazioni più comuni:

  • formato consigliato intorno a 1200 x 630 pixel (rapporto 1,91:1);
  • peso del file ragionevole per un caricamento rapido dell'anteprima;
  • testo leggibile anche a dimensioni ridotte se l'immagine contiene testo sovrapposto;
  • soggetto principale centrato, poiché alcune piattaforme ritagliano l'immagine in modo diverso a seconda del formato di visualizzazione (anteprima larga, miniatura quadrata);
  • un'immagine predefinita impostata a livello di sito per le pagine che non ne hanno una specifica, piuttosto che lasciare il campo vuoto.

Un impatto che va oltre i social network

Alcune interfacce di IA generative che mostrano risultati di ricerca o citazioni di fonti utilizzano anch'esse questi metadati per comporre un'anteprima visiva della fonte citata. Un markup Open Graph completo e coerente con il contenuto reale della pagina contribuisce quindi, indirettamente, alla qualità di presentazione del vostro brand in questi contesti.

Errori frequenti

  • Tag Open Graph assenti, il che lascia ogni piattaforma indovinare un'anteprima in modo incoerente.
  • og:image che punta a un URL relativo invece che assoluto, il che rompe la visualizzazione sulla maggior parte delle piattaforme.
  • og:description diversa al punto da contraddire il contenuto reale della pagina.
  • Dimenticare di aggiornare questi tag dopo un restyling grafico o una modifica importante dei contenuti.

Twitter Card, e testare il proprio markup prima della pubblicazione

Alcune piattaforme utilizzano un proprio standard in aggiunta a Open Graph. X (ex Twitter), ad esempio, legge in via prioritaria i suoi tag twitter:card, twitter:title e twitter:image se presenti, e ricade sui tag Open Graph in loro assenza:

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="Guida completa alla fatturazione elettronica">
<meta name="twitter:image" content="https://esempio.com/images/guida-fatturazione-twitter.jpg">

Nella maggior parte dei casi, duplicare scrupolosamente i valori Open Graph in questi tag complementari è sufficiente; non è necessario scrivere un contenuto totalmente distinto per ogni piattaforma, a meno che non stiate puntando specificamente a un pubblico diverso su una di esse.

Un'anteprima Open Graph mal configurata di solito non si nota navigando sul sito stesso — l'errore emerge solo al momento della condivisione, spesso dopo che il link ha già iniziato a circolare. Gli strumenti di debug forniti dalle principali piattaforme social permettono di simulare l'anteprima prima della pubblicazione e di forzare un aggiornamento della cache se un'immagine o un titolo sono stati modificati dopo una prima condivisione: queste piattaforme mettono in cache l'anteprima generata e non la rigenerano automaticamente a ogni visita.

I tag Open Graph completano naturalmente il tag Title e la Meta Description: insieme, i tre elementi definiscono come si presenta la vostra pagina, sia in un motore di ricerca sia in una condivisione. Per approfondire il markup strutturato, la lezione logica successiva è quella sui dati strutturati Schema.org.