Verifica Open Graph: testa i tag OG e le anteprime dei link
Inserisci un URL per vedere come apparirà quando viene condiviso su Facebook, X, LinkedIn e nelle app di chat. Lo strumento legge ogni tag og:* e twitter:*, misura l’immagine di anteprima e ti dice esattamente che cosa correggere.
Anteprime del link (approssimative: ogni piattaforma applica un proprio layout, ritaglio e cache)
Controlli
Immagine di anteprima
Tag trovati
| Campo | Valore |
|---|
Tag suggeriti
I tuoi valori attuali, con segnaposto dove manca qualcosa. Incolla nel <head> della pagina e modifica le righe TODO.
Una verifica Open Graph mostra che cosa vede un crawler quando qualcuno incolla il tuo link in un post o in una chat: il titolo, la descrizione e l’immagine dichiarati nei meta tag og:* etwitter:* della tua pagina. Se un’anteprima mostra l’immagine sbagliata, nessuna immagine o il nome del sito al posto del titolo dell’articolo, la causa è quasi sempre in quelle poche righe di HTML, e questa pagina ti dice quale.
Come controllare i tuoi tag Open Graph
- Inserisci l’URL della pagina che vuoi condividere e premi Controlla i tag. I reindirizzamenti vengono seguiti e l’URL finale è quello che viene analizzato.
- Guarda le anteprime. Sono approssimazioni di come Facebook, X, LinkedIn e le app di chat dispongono la card di un link, costruite con i tag che ciascuno legge.
- Passa in rassegna i controlli. Gli errori rompono le anteprime; gli avvisi le peggiorano su alcune piattaforme; le note sono buone pratiche. Ognuno dice che cosa cambiare.
- Correggi e ricontrolla. La casella Tag suggeriti ti dà un blocco di tag pronto da modificare, con i tuoi valori attuali già inseriti.
- Aggiorna le cache delle piattaforme dopo aver pubblicato la correzione (vedi sotto), altrimenti le vecchie condivisioni manterranno la vecchia anteprima.
Per un sito di staging, una pagina protetta da login o qualsiasi cosa su localhost, passa aIncolla HTML: incolla il sorgente della pagina e gli stessi controlli girano nel tuo browser.
I tag Open Graph che ogni pagina deve avere
Open Graph è il protocollo dietro la maggior parte delle anteprime dei link. Indica quattro proprietà come obbligatorie per ogni pagina (ogp.me), e LinkedIn elenca titolo, immagine, descrizione e URL come i tag che devono esistere per le sue anteprime di condivisione (guida di LinkedIn).
| Tag | A che cosa serve | Consiglio |
|---|---|---|
og:title | Il titolo della card. Obbligatorio. | Scrivilo per un feed, non per la ricerca: non ha bisogno del nome del tuo brand. |
og:type | Il tipo di oggetto, per esempio website o article. Obbligatorio. | Usa article per gli articoli: sblocca i tag article:*. |
og:image | L’immagine di anteprima. Obbligatorio. | Usa un URL https:// completo; imposta anche larghezza, altezza e testo alternativo. |
og:url | L’URL canonico dell’oggetto, usato come suo identificatore permanente. Obbligatorio. | Fallo coincidere con il tuo <link rel="canonical">. |
og:description | Una o due frasi sotto il titolo. Facoltativo nel protocollo, richiesto da LinkedIn. | Di’ che cosa ottiene chi legge, non che cos’è la pagina. |
og:site_name | Il nome del sito nel suo insieme. | In molte app di chat compare sopra il titolo. |
og:image:alt | Una descrizione dell’immagine. Il protocollo dice che una pagina che specifica og:image dovrebbe specificare anche questo. | Descrivi l’immagine, non la pagina. |
og:image:width / og:image:height | Dimensioni dell’immagine in pixel. | Facebook dice di specificarle perché l’immagine si carichi correttamente la prima volta che il link viene condiviso. |
og:locale | La lingua e la regione del contenuto, per esempio it_IT. | Facebook lo consiglia insieme a og:type. |
Se un tag compare due volte, vince il primo: quando i valori sono in conflitto, il protocollo dà la preferenza al primo tag dall’alto verso il basso. I duplicati di solito nascono quando un tema e un plugin SEO scrivono entrambi dei tag: lo strumento li segnala.
I tag delle card di Twitter (X)
X legge i propri tag twitter:* e ripiega su Open Graph per la maggior parte di essi, secondo il riferimento sul markup delle card di X (documentazione per sviluppatori di X, in archivio):
twitter:card: il tipo di card,summary(piccola immagine quadrata) osummary_large_image(immagine larga). Se manca ma esistonoog:type,og:titleeog:description, può essere mostrata una card di riepilogo.twitter:title: massimo 70 caratteri; ripiega suog:title.twitter:description: massimo 200 caratteri; ripiega suog:description.twitter:image: sotto i 5 MB; JPG, PNG, WEBP e GIF (solo il primo fotogramma); SVG non è supportato. Ripiega suog:image.twitter:image:alt: fino a 420 caratteri; ripiega suog:image:alt.
In pratica, Open Graph più una riga, <meta name="twitter:card" content="summary_large_image">, copre X.
Dimensioni di og:image: che cosa chiede ogni piattaforma
| Piattaforma | Requisito documentato |
|---|---|
| Minimo 1200 × 627 px, proporzioni consigliate 1,91:1, peso massimo 5 MB (guida di LinkedIn) | |
Almeno 1080 px di larghezza per la migliore resa sui dispositivi ad alta risoluzione; specifica og:image:width e og:image:height (buone pratiche di condivisione di Meta) | |
| X: card con immagine grande | Proporzioni 2:1, minimo 300 × 157, massimo 4096 × 4096 px, sotto i 5 MB (documentazione di X, in archivio) |
| X: card di riepilogo | Proporzioni 1:1, minimo 144 × 144, massimo 4096 × 4096 px, sotto i 5 MB, ritagliata a quadrato (documentazione di X, in archivio) |
Un’unica immagine può soddisfarli tutti: 1200 × 630 pixel, PNG o JPEG, sotto i 5 MB. Supera il minimo di LinkedIn e la larghezza consigliata da Facebook, ha proporzioni di circa 1,91:1 e X la ritaglia un po’ per la sua card larga 2:1. Tieni testo e loghi lontani dai bordi, così il ritaglio non li taglia. X chiede anche un’immagine unica per ogni pagina e non un generico logo del sito: una regola sensata ovunque.
Perché l’anteprima del tuo link è sbagliata e come correggerla
Continua a comparire la vecchia immagine o il vecchio titolo
Le piattaforme mettono in cache le anteprime. Facebook memorizza le immagini per URL e non le aggiorna se l’URL non cambia (Meta for Developers), quindi carica un’immagine modificata con un nuovo nome di file, poi passa la pagina nelloSharing Debugger, che forza una nuova lettura. Su LinkedIn usa ilPost Inspector per aggiornare l’URL.
Nessuna immagine
Controlla la tabella Immagine di anteprima qui sopra. Cause comuni: og:image è un percorso relativo, l’immagine restituisce 403 o 404 ai crawler (protezione dall’hotlinking, una cartella protetta, una regola della CDN), è un SVG oppure supera i 5 MB. LinkedIn precisa che un’immagine che rispetta i requisiti può comunque non comparire se il sito impedisce a LinkedIn di scaricarla.
I tag esistono nel browser ma non qui
I tag probabilmente vengono aggiunti da JavaScript dopo il caricamento della pagina. I crawler leggono l’HTML che il server invia, quindi sposta i tag in HTML generato sul server o in fase di build. Le applicazioni a pagina singola di solito hanno bisogno di rendering lato server o di prerendering per le anteprime di condivisione.
Viene mostrata l’anteprima della pagina sbagliata
Se l’URL reindirizza, i crawler mostrano l’anteprima della pagina finale. Lo strumento indica il numero di reindirizzamenti; la verifica dei redirect elenca ogni passaggio. Assicurati anche che og:url punti alla pagina stessa e non alla tua home: un errore comune nei template.
Tag Open Graph e meta tag SEO
Il <title>, la meta description e il link canonico servono ai motori di ricerca; i tag Open Graph e Twitter servono alle condivisioni. Possono differire (il titolo di una condivisione può essere più incisivo di quello per la ricerca), ma l’URL canonico e og:url devono concordare, e conviene sapere se c’è una direttiva robots noindex prima di promuovere una pagina. Lo strumento riporta tutti questi elementi, compresa l’intestazione HTTP X-Robots-Tag.
Che cosa fa lo strumento con il tuo URL
Il nostro server richiede la pagina una volta, segue fino a otto reindirizzamenti, legge al massimo i primi 600 KB (si ferma alla fine del <head>) e scarica la prima parte di fino a due immagini di anteprima per leggerne dimensioni e formato. Scarica solo indirizzi http(s) pubblici sulle porte standard e rifiuta gli IP privati, locali e dei metadati cloud, anche quando è un reindirizzamento a puntarvi. Non viene conservato nulla. Le card di anteprima caricano poi l’immagine direttamente nel tuo browser. Se condividi un link di campagna, costruiscilo con il generatore UTM; se condividi quello di qualcun altro, togli prima il tracciamento con il pulitore di URL.
Domande frequenti
Che cosa fa una verifica Open Graph?
Scarica una pagina come fa un crawler delle anteprime dei link, legge i tag Open Graph (og:*) e delle card di Twitter (twitter:*) nell’head dell’HTML e mostra come apparirà un link condiviso. Questo strumento scarica anche l’immagine di anteprima per controllarne formato, dimensioni in pixel e peso del file, ed elenca ogni tag mancante o non valido con il modo per correggerlo.
Quali tag Open Graph sono obbligatori?
Il protocollo Open Graph indica quattro proprietà obbligatorie: og:title, og:type, og:image e og:url. LinkedIn dice che per le sue anteprime devono esistere og:title, og:image, og:description e og:url, quindi in pratica imposta tutti e cinque, più og:image:alt per l’immagine.
Che dimensioni deve avere la mia og:image?
Non esiste una sola misura ufficiale. LinkedIn chiede almeno 1200 × 627 pixel con proporzioni 1,91:1 e meno di 5 MB. Facebook consiglia immagini larghe almeno 1080 pixel. La card X con immagine grande usa proporzioni 2:1 con un minimo di 300 × 157 e un limite di 5 MB. Un PNG o JPEG da 1200 × 630 sotto i 5 MB soddisfa tutti questi requisiti.
Perché Facebook o LinkedIn mostrano ancora la vecchia anteprima?
Le piattaforme mettono in cache le anteprime dei link. Facebook memorizza le immagini per URL e non le aggiorna finché l’URL non cambia: pubblica quindi un’immagine aggiornata con un nuovo nome di file, poi passa la pagina nel Sharing Debugger di Facebook per forzare una nuova lettura. Il Post Inspector di LinkedIn fa lo stesso per LinkedIn.
Servono i tag delle card di Twitter se ho già i tag Open Graph?
X ripiega su Open Graph per la maggior parte dei campi: twitter:title ripiega su og:title, twitter:description su og:description e twitter:image su og:image. Senza twitter:card, X può comunque mostrare una piccola card di riepilogo ricavata da og:type, og:title e og:description. Aggiungi twitter:card con il valore summary_large_image se vuoi il layout con immagine grande.
La verifica esegue JavaScript?
No. Legge l’HTML che il server restituisce, cioè quello che leggono anche la maggior parte dei crawler delle anteprime. Se i tuoi tag compaiono solo dopo l’esecuzione di JavaScript lato client, qui mancheranno, e probabilmente mancheranno anche nelle condivisioni reali. Genera i tag sul server o in fase di build.
Posso controllare una pagina di staging o su localhost?
Non tramite URL: per sicurezza lo strumento scarica solo indirizzi pubblici e blocca gli IP privati, locali e dei metadati cloud. Usa invece la scheda «Incolla HTML»: incolla il sorgente della pagina e l’analisi avviene interamente nel tuo browser, con le dimensioni delle immagini misurate in locale.
Le anteprime sono esattamente ciò che mostrerà ogni piattaforma?
No: sono approssimazioni, costruite con i tag che ogni piattaforma documenta. Ogni rete applica un proprio layout, ritaglio, troncamento e cache, e li cambia nel tempo. Usa le anteprime per scovare immagini mancanti e titoli sbagliati, poi conferma con il debugger della piattaforma prima di un grande lancio.
