Sintesi: I contenuti condivisi sui social media con tag Open Graph correttamente configurati ricevono fino a 2,5 volte più engagement rispetto ai post senza di essi, secondo un rapporto del 2024 di Social Media Examiner.
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 arricchita: una scheda con titolo, descrizione e immagine. Se questi tag sono assenti o mal configurati, l'anteprima può sembrare danneggiata, mostrare l'immagine sbagliata o visualizzare una descrizione generica che non attira clic.
Il nostro strumento gratuito di anteprima OG su sorank.com ti permette di visualizzare esattamente come apparirà la tua pagina quando verrà condivisa su ogni grande piattaforma social, prima della pubblicazione. Individua gli errori, ottimizza i tuoi elementi visivi e massimizza l'engagement in tempo reale.
Cosa sono i tag Open Graph?
Open Graph è un protocollo creato originariamente da Facebook nel 2010 che consente alle pagine web di diventare oggetti arricchiti 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 principali tag Open Graph includono:
og:title, Il titolo visualizzato nella scheda di condivisione. Mantienilo sotto i 60 caratteri per risultati ottimali.
og:description, Una descrizione complementare che appare sotto il titolo. Punta a 150-200 caratteri.
og:image, L'immagine di anteprima. Questo è 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 del tuo brand.
Twitter utilizza una propria variante chiamata Twitter Cards, con tag come twitter:card, twitter:title, twitter:description e twitter:image. Tuttavia, Twitter farà ricorso ai tag Open Graph se i propri tag non sono presenti.
Perché l'anteprima OG è importante per la tua strategia SEO
Potresti chiederti: come si collega la condivisione social alla SEO? Sebbene i segnali social non siano un fattore di ranking diretto per Google, i benefici indiretti sono significativi:
Più traffico dalle piattaforme social: Una scheda di condivisione attraente e ben formattata aumenta drasticamente i tassi di clic dai social media. Più visitatori dai canali social significa più potenziali backlink, menzioni del brand e segnali di engagement.
Frequenza di rimbalzo ridotta: Quando gli utenti vedono un'anteprima accurata prima di fare clic, sanno cosa aspettarsi. Questa coerenza tra anteprima e contenuto riduce le frequenze di rimbalzo e migliora il tempo di permanenza, entrambi segnali positivi dell'esperienza utente.
Coerenza del brand: Schede di condivisione coerenti e dall'aspetto professionale su tutte le piattaforme rafforzano l'identità del tuo brand e costruiscono fiducia con il tuo pubblico.
Amplificazione della condivisione di 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 utilizzare lo strumento di anteprima OG di Sorank
Il nostro strumento di anteprima OG ti aiuta a eseguire il debug e ottimizzare le tue schede di condivisione social:
Passo 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.
Passo 2: Visualizza le anteprime generate per Facebook, Twitter/X, LinkedIn e WhatsApp. Ogni piattaforma visualizza le schede di condivisione in modo leggermente diverso, quindi il nostro strumento ti mostra l'aspetto esatto su ciascuna di esse.
Passo 3: Identifica i problemi. Lo strumento evidenzia i problemi comuni come tag mancanti, immagini troppo piccole, titoli troncati o descrizioni che superano i limiti di caratteri consigliati.
Passo 4: Correggi e ri-testa. Dopo aver corretto i tuoi meta tag, inserisci nuovamente l'URL per verificare che tutte le anteprime siano ora perfette.
Errori comuni dei tag OG e come correggerli
Anche gli sviluppatori esperti commettono errori con Open Graph. Ecco i problemi più frequenti che riscontriamo:
Tag og:image mancante: Questo è l'errore numero uno. Senza un'immagine, le piattaforme mostrano una scheda vuota o estraggono un'immagine casuale dalla tua pagina. Specifica sempre un'immagine di alta qualità di 1200×630 pixel.
Immagine troppo piccola o proporzioni errate: Facebook richiede che le immagini abbiano almeno 200×200 pixel, ma consiglia 1200×630 per il formato grande. Le immagini troppo piccole o con un rapporto diverso da 1,91:1 verranno ritagliate in modo scomodo o visualizzate come miniatura piccola invece di una scheda grande.
Utilizzo di URL relative invece di URL assolute: Tutti i valori dei tag OG devono utilizzare 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 tuoi tag, devi utilizzare il Debugger di condivisione di Facebook per forzare un nuovo scraping e cancellare la versione memorizzata nella cache.
Tag specifici di Twitter mancanti: Sebbene Twitter ricorra ai tag OG, specificare twitter:card (con il valore summary_large_image) garantisce che il tuo contenuto ottenga il formato immagine grande invece della piccola scheda di riepilogo.
Requisiti OG specifici per piattaforma
Ogni piattaforma social ha i propri requisiti e peculiarità:
Facebook: Dimensione minima immagine 200×200px, consigliata 1200×630px. Supporta valori og:type come article, product e video. Memorizza nella cache in modo aggressivo, usa il Debugger di condivisione 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 di scheda 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 i tag Twitter sono assenti.
LinkedIn: Utilizza direttamente i tag OG. Dimensione immagine consigliata: 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 venga servito tramite HTTPS. Memorizza nella cache le anteprime sul dispositivo; la cancellazione richiede che l'utente svuoti la cache dell'app.
Buone pratiche per il design delle immagini OG
La tua immagine OG è l'elemento più importante della tua scheda di condivisione social. Segui queste linee guida di design:
• Usa 1200×630 pixel (rapporto d'aspetto 1,91:1) per la compatibilità universale.
• Mantieni gli elementi di testo e visivi importanti all'interno dell'80% centrale dell'immagine per tenere conto del ritaglio specifico della piattaforma.
• Includi il logo o i colori del tuo brand per un riconoscimento immediato.
• Usa testo in grassetto e leggibile con alto contrasto, poiché molti utenti navigano sui social media da dispositivi mobili.
• Mantieni la dimensione del file sotto 5 MB (idealmente sotto 1 MB) per un caricamento rapido.
• Usa JPEG per le fotografie e PNG per la grafica con sovrapposizioni di testo.
• Crea immagini OG uniche per le tue pagine più importanti invece di usare un'immagine generica per tutto il sito.
• Testa la tua immagine su uno sfondo scuro, poiché piattaforme come Twitter/X supportano la modalità scura.
Integrazione dei tag OG con il tuo CMS
La maggior parte delle moderne piattaforme CMS e framework supportano i tag Open Graph in modo nativo o tramite plugin:
WordPress: Plugin come Yoast SEO o Rank Math generano automaticamente tag OG basati sul tuo contenuto. Puoi anche personalizzare l'immagine social e il titolo 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 dei metadati per aggiungere 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 di anteprima OG per verificare che i tuoi tag vengano visualizzati correttamente su tutte le piattaforme social prima della pubblicazione.
.webp){kind=small}
.webp){kind=small}
.svg)
.svg)
