Strumento gratuito di anteprima Open Graph

Quando condivide un link su Facebook, LinkedIn, Twitter o WhatsApp, la piattaforma legge i meta tag Open Graph (OG) della sua 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 le permette di visualizzare esattamente come apparirà la sua pagina quando verrà condivisa su ogni grande piattaforma social, prima della pubblicazione. Individui gli errori, ottimizzi i suoi elementi visivi e massimizzi 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 sua pagina, controlla come le piattaforme visualizzano il suo contenuto quando viene condiviso.

I principali tag Open Graph includono:

og:title, Il titolo visualizzato nella scheda di condivisione. Lo mantenga sotto i 60 caratteri per risultati ottimali.

og:description, Una descrizione complementare che appare sotto il titolo. Punti 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 suo sito web o del suo 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 sua strategia SEO

Potrebbe chiedersi: 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 suo brand e costruiscono fiducia con il suo 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 la aiuta a eseguire il debug e ottimizzare le sue schede di condivisione social:

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

Passo 2: Visualizzi 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 le mostra l'aspetto esatto su ciascuna di esse.

Passo 3: Identifichi 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: Corregga e ri-testi. Dopo aver corretto i suoi meta tag, inserisca 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 sua pagina. Specifichi 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. Si assicuri che ogni tag OG appaia esattamente una volta.

Non svuotare la cache: Facebook e altre piattaforme memorizzano nella cache i suoi dati OG in modo aggressivo. Dopo aver aggiornato i suoi tag, deve 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 suo 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, usi 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 sua immagine OG è l'elemento più importante della sua scheda di condivisione social. Segua queste linee guida di design:

• Usi 1200×630 pixel (rapporto d'aspetto 1,91:1) per la compatibilità universale.
• Mantenga gli elementi di testo e visivi importanti all'interno dell'80% centrale dell'immagine per tenere conto del ritaglio specifico della piattaforma.
• Includa il logo o i colori del suo brand per un riconoscimento immediato.
• Usi testo in grassetto e leggibile con alto contrasto, poiché molti utenti navigano sui social media da dispositivi mobili.
• Mantenga la dimensione del file sotto 5 MB (idealmente sotto 1 MB) per un caricamento rapido.
• Usi JPEG per le fotografie e PNG per la grafica con sovrapposizioni di testo.
• Crei immagini OG uniche per le sue pagine più importanti invece di usare un'immagine generica per tutto il sito.
• Testi la sua immagine su uno sfondo scuro, poiché piattaforme come Twitter/X supportano la modalità scura.

Integrazione dei tag OG con il suo 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 suo contenuto. Può 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. Può impostare titolo, descrizione e immagine per ogni pagina.

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

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

Indipendentemente dalla sua piattaforma, usi sempre il nostro strumento di anteprima OG per verificare che i suoi tag vengano visualizzati correttamente su tutte le piattaforme social prima della pubblicazione.