Anteprima Open Graph
Vedi come apparirà un link condiviso su Facebook, LinkedIn, X/Twitter, WhatsApp e Slack — e copia uno snippet di meta tag pulito per le tue pagine.
Cos'è Open Graph?
Open Graph è il protocollo che Facebook ha pubblicato nel 2010 per consentire ai siti web di dichiarare metadati strutturati su una pagina — titolo, descrizione, immagine, tipo, URL canonico — in modo che i link condivisi sulle piattaforme social vengano visualizzati come card ricche invece che come URL semplici. La maggior parte delle piattaforme oggi lo utilizza: Facebook, LinkedIn, WhatsApp, Slack, Discord, Telegram, iMessage. X/Twitter ha il proprio namespace twitter:* ma ricorre a Open Graph quando i tag Twitter mancano, quindi un singolo set di tag og: copre la maggior parte dell'ecosistema.
Come usare questo previewer
Incolla un URL per recuperare i suoi tag esistenti, o compila manualmente i quattro campi principali per progettare una card prima della pubblicazione. L'anteprima si aggiorna in tempo reale e approssima il modo in cui Facebook, LinkedIn e Slack visualizzano la card. Attenzione all'immagine: qualsiasi cosa più stretta di 1200px o con una proporzione molto distante dal quadrato verrà ritagliata o ridimensionata. Quando la card sembra giusta, copia lo snippet in fondo e incollalo nel <head> della tua pagina.
Perché la tua immagine di condivisione non si aggiorna
Facebook, LinkedIn e la maggior parte delle altre piattaforme memorizzano in cache i metadati estratti in modo aggressivo — talvolta per giorni. Una volta che un URL è stato condiviso, cambiare solo l'og:image di solito non aggiorna la card. Le soluzioni sono: (1) usare lo Sharing Debugger di Facebook per forzare un nuovo scraping, (2) cambiare il nome del file immagine (card-v2.png) per invalidare la versione in cache, oppure (3) pubblicare a un nuovo URL. Pianifica questo nella tua checklist di lancio invece di doverlo risolvere sotto la pressione di una scadenza.
Riferimento dei tag
| Tag | Scopo | Suggerimento |
|---|---|---|
og:title | Mantieni sotto i 60 caratteri per evitare la troncatura. | Titolo mostrato sulla card. |
og:description | 110-200 caratteri si visualizzano bene sulla maggior parte delle piattaforme. | Sottotitolo / riga di sintesi. |
og:image | PNG o JPEG 1200×630 via HTTPS, < 5 MB. | Immagine della card. |
og:url | Usa l'URL canonico, non quello con i tag. | URL canonico a cui si risolve la condivisione. |
twitter:card | summary_large_image corrisponde allo stile della card OG. | Tipo di card Twitter. |
Domande frequenti
Ho bisogno sia dei tag Open Graph che di quelli Twitter card?
twitter:* mancano, X/Twitter ricorre ai tag og:*. Aggiungere i tag Twitter ha senso solo quando vuoi un'immagine o un testo diversi su X rispetto a Facebook/LinkedIn. Per la maggior parte delle pagine, un blocco OG pulito è sufficiente.Qual è la dimensione corretta dell'immagine?
Perché l'anteprima non sembra esattamente come la card di Facebook?
Lo strumento recupera gli URL tramite un server?
Posso usare un video come og:image?
og:video per quello, insieme a un'og:image statica come fallback. La maggior parte delle piattaforme mostra ancora l'immagine statica sulla card e riproduce il video solo al click.A cosa serve og:type?
website, article, book, profile, ecc. Facebook in passato visualizzava layout diversi per tipo; oggi influisce principalmente sulle funzionalità di scoperta. Impostalo su article per i post del blog e website per tutto il resto e andrà tutto bene.