Riepilogo: I contenuti condivisi sui social media con tag Open Graph correttamente configurati ricevono fino a 2,5× più engagement rispetto ai post senza, secondo un rapporto di Social Media Examiner del 2024.

Quando condividi un link su Facebook, LinkedIn, Twitter o WhatsApp, la piattaforma legge i meta tag Open Graph (OG) della tua pagina per generare un'anteprima ricca — una card con titolo, descrizione e immagine. Se quei tag mancano o sono configurati male, l'anteprima può apparire rotta, mostrare l'immagine sbagliata o una descrizione generica che non genera clic.

Il nostro strumento OG Preview gratuito su sorank.com ti permette di visualizzare esattamente come apparirà la tua pagina quando verrà condivisa su ogni piattaforma social principale — prima della pubblicazione. Individua errori, ottimizza i tuoi visual e massimizza l'engagement in tempo reale.

Cosa sono i tag Open Graph?

Open Graph è un protocollo creato originariamente da Facebook nel 2010 che permette alle pagine web di diventare oggetti ricchi in un grafo sociale. Inserendo specifici tag <meta> nella sezione <head> della tua pagina, controlli come le piattaforme visualizzano il tuo contenuto quando viene condiviso.

I tag Open Graph principali includono:

og:title — Il titolo visualizzato nella card di condivisione. Mantienilo sotto i 60 caratteri per migliori risultati.

og:description — Una descrizione di supporto che appare sotto il titolo. Punta a 150–200 caratteri.

og:image — L'immagine di anteprima. È l'elemento visivamente più impattante. Dimensione consigliata: 1200×630 pixel.

og:url — L'URL canonico della pagina condivisa.

og:type — Definisce il tipo di contenuto (website, article, product, video, ecc.).

og:site_name — Il nome del tuo sito web o brand.

Twitter usa la propria variante chiamata Twitter Cards, con tag come twitter:card, twitter:title, twitter:description e twitter:image. Tuttavia, Twitter ricorre ai tag Open Graph se i propri tag non sono presenti.

Perché l'anteprima OG è importante per la tua strategia SEO

Potresti chiederti: che relazione c'è tra la condivisione social e la SEO? Sebbene i segnali sociali non siano un fattore di ranking diretto di Google, i benefici indiretti sono significativi:

Più traffico dalle piattaforme social: Una card di condivisione attraente e ben formattata aumenta drasticamente i tassi di clic dai social media. Più visitatori dai canali social significa più backlink potenziali, menzioni del brand e segnali di engagement.

Tasso di rimbalzo ridotto: Quando gli utenti vedono un'anteprima accurata prima di cliccare, sanno cosa aspettarsi. Questo allineamento tra anteprima e contenuto riduce i tassi di rimbalzo e migliora il tempo di permanenza — entrambi segnali positivi di esperienza utente.

Coerenza del brand: Card di condivisione coerenti e professionali su tutte le piattaforme rafforzano l'identità del tuo brand e costruiscono fiducia con il tuo pubblico.

Amplificazione della condivisione link: Le persone sono più propense a condividere contenuti che hanno un'anteprima accattivante. Ogni condivisione crea un'altra opportunità per la scoperta organica e potenziali backlink.

Come usare lo strumento OG Preview di Sorank

Il nostro strumento OG Preview ti aiuta a debuggare e ottimizzare le tue card di condivisione social:

Passaggio 1: Inserisci l'URL della pagina che vuoi visualizzare in anteprima. Lo strumento recupera la pagina e legge tutti i meta tag Open Graph e Twitter Card.

Passaggio 2: Visualizza le anteprime generate per Facebook, Twitter/X, LinkedIn e WhatsApp. Ogni piattaforma renderizza le card di condivisione in modo leggermente diverso, quindi il nostro strumento ti mostra l'aspetto esatto su ciascuna.

Passaggio 3: Identifica i problemi. Lo strumento evidenzia problemi comuni come tag mancanti, immagini troppo piccole, titoli troncati o descrizioni che superano i limiti di caratteri raccomandati.

Passaggio 4: Correggi e ritesta. Dopo aver corretto i tuoi meta tag, reinserisci l'URL per verificare che tutte le anteprime ora appaiano perfette.

Errori comuni dei tag OG e come correggerli

Anche gli sviluppatori esperti commettono errori con Open Graph. Ecco i problemi più frequenti:

Tag og:image mancante: Questo è l'errore numero uno. Senza immagine, le piattaforme mostrano una card vuota o estraggono un'immagine casuale dalla tua pagina. Specifica sempre un'immagine di alta qualità di 1200×630 pixel.

Immagine troppo piccola o proporzione errata: Facebook richiede immagini di almeno 200×200 pixel, ma raccomanda 1200×630 per il formato card grande. Le immagini troppo piccole o senza rapporto 1,91:1 verranno ritagliate in modo sgradevole o visualizzate come miniatura piccola.

URL relativi invece di assoluti: Tutti i valori dei tag OG devono usare URL assoluti (che iniziano con https://). I percorsi relativi come /images/og.jpg non funzioneranno sulle piattaforme social.

Tag duplicati o in conflitto: Avere più tag og:title o og:image sulla stessa pagina confonde i crawler. Assicurati che ogni tag OG appaia esattamente una volta.

Non svuotare la cache: Facebook e altre piattaforme memorizzano nella cache i tuoi dati OG in modo aggressivo. Dopo aver aggiornato i tag, usa il Sharing Debugger di Facebook per forzare un nuovo scraping e svuotare la versione in cache.

Tag specifici di Twitter mancanti: Sebbene Twitter ricorra ai tag OG, specificare twitter:card (con valore summary_large_image) garantisce che il tuo contenuto ottenga il formato immagine grande invece della piccola card riassuntiva.

Requisiti OG specifici per piattaforma

Ogni piattaforma social ha i propri requisiti e peculiarità:

Facebook: Dimensione immagine minima 200×200px, raccomandata 1200×630px. Supporta valori og:type come article, product e video. Memorizza in cache in modo aggressivo — usa il Sharing Debugger per aggiornare. Lunghezza massima del titolo: 60 caratteri. Lunghezza massima della descrizione: 200 caratteri.

Twitter/X: Richiede il meta tag twitter:card. Supporta i tipi summary (immagine piccola) e summary_large_image (immagine grande). Immagine minima: 144×144px per summary, 300×157px per immagine grande. Ricorre ai tag OG quando quelli di Twitter sono assenti.

LinkedIn: Usa direttamente i tag OG. Dimensione immagine raccomandata: 1200×627px. Supporta i tipi article e website. Ha il proprio strumento Post Inspector per il debug.

WhatsApp: Legge i tag OG per le anteprime dei link. Richiede che og:image sia servito tramite HTTPS. Memorizza le anteprime nella cache del dispositivo — la pulizia richiede che l'utente svuoti la cache dell'app.

Best practice per il design dell'immagine OG

La tua immagine OG è l'elemento più importante della tua card di condivisione social. Segui queste linee guida di design:

• Usa 1200×630 pixel (rapporto 1,91:1) per compatibilità universale.
• Mantieni testo ed elementi visivi importanti nell'80% centrale dell'immagine per tenere conto del ritaglio specifico di ogni piattaforma.
• Includi il logo o i colori del tuo brand per un riconoscimento istantaneo.
• Usa testo in grassetto e leggibile con alto contrasto — molti utenti navigano i social da dispositivi mobili.
• Mantieni la dimensione del file sotto 5 MB (idealmente sotto 1 MB) per un caricamento veloce.
• Usa JPEG per le fotografie e PNG per la grafica con sovrapposizioni di testo.
• Crea immagini OG uniche per le tue pagine più importanti piuttosto che usare un'immagine generica per tutto il sito.
• Testa la tua immagine su sfondo scuro, poiché piattaforme come Twitter/X supportano la modalità scura.

Integrare i tag OG con il tuo CMS

La maggior parte dei CMS e framework moderni supportano i tag Open Graph nativamente o tramite plugin:

WordPress: Plugin come Yoast SEO o Rank Math generano automaticamente i tag OG basati sul tuo contenuto. Puoi anche personalizzare l'immagine e il titolo social per ogni pagina.

Webflow: Le impostazioni Open Graph sono disponibili nel pannello delle impostazioni della pagina sotto la scheda Open Graph. Puoi impostare titolo, descrizione e immagine per ogni pagina.

Next.js / React: Usa il componente <Head> o l'API metadata per aggiungere i tag OG in modo programmatico. Librerie come next-seo semplificano questo processo.

HTML statico: Aggiungi i meta tag OG direttamente nella sezione <head> di ogni pagina. Usa il nostro strumento Generatore di Meta Tag su sorank.com per creare il codice automaticamente.

Indipendentemente dalla tua piattaforma, usa sempre il nostro strumento OG Preview per verificare che i tuoi tag vengano renderizzati correttamente su tutte le piattaforme social prima della pubblicazione.