Anteprima Open Graph

Cosa è davvero Open Graph

Il protocollo Open Graph è stato creato da Facebook nel 2010 come modo per trasformare qualsiasi pagina web in un "rich object" in un grafo sociale, un insieme strutturato di metadati che altre applicazioni (originariamente Facebook, ora anche LinkedIn, Slack, Discord, Microsoft Teams, iMessage, WhatsApp, e decine di altre) possono leggere per renderizzare una card di anteprima quando qualcuno incolla il tuo URL. La specifica ufficiale vive a ogp.me e il protocollo è effettivamente diventato la lingua franca della condivisione di link sul web.

Senza tag OG, le piattaforme sociali scrapeano la tua pagina e indovinano: prendono un'intestazione, afferrano la prima immagine che trovano, e la chiamano card. Il risultato è raramente ciò che vuoi. Con i tag OG controlli il titolo, la descrizione e l'immagine, che è la differenza tra un link rifinito e uno dall'aspetto rotto.

I quattro tag richiesti (secondo ogp.me)

La specifica Open Graph ufficiale definisce quattro proprietà richieste. Per qualificarsi come oggetto Open Graph, una pagina deve dichiarare tutte e quattro:

I tag opzionali raccomandati includono og:description (un riassunto di una o due frasi), og:site_name (il nome del tuo sito come etichetta), og:locale (lingua e regione), e i suggerimenti di dimensione dell'immagine og:image:width / og:image:height / og:image:alt. Includere i suggerimenti di dimensione permette ai client sociali di pre-allocare la giusta quantità di spazio ed evita il layout shift mentre l'immagine si carica.

Twitter / X Cards: stessa idea, tag leggermente diversi

X (precedentemente Twitter) ha il proprio namespace di metadati, twitter:card, twitter:title, twitter:description, twitter:image, twitter:site, twitter:creator, ma importante, X ricade sui tag OG quando quelli specifici di Twitter mancano. Quindi una pagina che spedisce solo i tag OG ottiene ancora una card su X. Dove i due differiscono è nel tipo di card:

• twitter:card = summary, piccola miniatura quadrata, titolo, descrizione.
• twitter:card = summary_large_image, immagine a tutta larghezza in cima alla card. Il default moderno per la condivisione di contenuti perché ottiene più attenzione visiva nel feed.
• app e player, per installazioni di app e video inline rispettivamente.

Nota: l'anteprima standalone del Twitter Card Validator a cards-dev.twitter.com/validator è stata rimossa da X il 2 agosto 2022. Il modo attuale per verificare una card è iniziare un nuovo tweet nel Tweet Composer, incollare l'URL, e lasciare che l'anteprima si renderizzi, non hai bisogno di postare effettivamente il tweet. Alcuni strumenti di terze parti (questo incluso) approssimano la card renderizzata così puoi iterare prima di andare in produzione.

Dimensioni dell'immagine che funzionano davvero

Non c'è una singola dimensione perfetta, ma un'immagine 1200×630 (rapporto 1,91:1) è la singola scommessa più affidabile, funziona ovunque senza grandi ritagli. Raccomandazioni per piattaforma:

Mantieni testo importante e volti vicino al centro dell'immagine, ogni piattaforma ritaglia in modo diverso e un logo nell'angolo può scomparire dietro le sovrapposizioni UI della piattaforma.

Perché la tua card a volte non si mostra

Se hai aggiunto i tag OG ma l'anteprima è ancora rotta o vuota, i soliti sospetti:

• HTTPS richiesto. Facebook e la maggior parte delle piattaforme moderne rifiutano URL immagine http://. Servi og:image su HTTPS.
• Immagine non pubblicamente accessibile. Dietro autenticazione, bloccata dalla allowlist IP, o restituisce 403 al crawler della piattaforma. Testa aprendo l'URL dell'immagine in una finestra privata del browser.
• Immagine troppo piccola. Sotto il minimo della piattaforma (Facebook 200×200, LinkedIn 1200×627), la card ricade su una piccola miniatura o nessuna immagine.
• Rapporto d'aspetto sbagliato. Un'immagine quadrata 1:1 inviata come summary_large_image su X viene ritagliata centralmente, spesso male.
• Cache. Le piattaforme sociali memorizzano nella cache i tuoi metadati OG in modo aggressivo. Dopo aver corretto i tag, visita lo Sharing Debugger di Facebook e clicca "Scrape Again" per aggiornare; il Post Inspector di LinkedIn fa lo stesso; X raccoglie le modifiche la prossima volta che qualcuno incolla l'URL.
• Robots.txt blocca il crawler social. Assicurati che user agent come facebookexternalhit, Twitterbot, LinkedInBot, Slackbot possano recuperare la tua pagina e immagine.
• Il server restituisce non-2xx al crawler. Controlla i log del tuo server per gli user agent dei bot sociali.
• URL di immagine relativi. og:image deve essere un URL assoluto (https://yoursite.com/og.jpg), mai /og.jpg.

Il problema della cache

Una volta che una piattaforma sociale scrape la tua pagina, i metadati vengono memorizzati nella cache per un certo periodo, il folklore della community lo mette intorno a 7 giorni per Facebook e LinkedIn, anche se nessuna piattaforma documenta il TTL esatto. Aggiornare i tuoi tag OG non aggiorna automaticamente la cache. Per forzare un re-scrape, usa gli strumenti ufficiali: Facebook Sharing Debugger, LinkedIn Post Inspector. X raccoglie nuovi metadati quando l'URL viene condiviso la volta successiva. Slack e Discord aggiornano le loro anteprime in base ai tag OG al momento del fetch, quindi si aggiornano più velocemente di Facebook.

Valori comuni di og:type

Il tag og:type dice alla piattaforma sociale che tipo di oggetto rappresenta la pagina. La maggior parte delle pagine è website (il default) o article; valori specifici verticali permettono alle piattaforme di renderizzare card più ricche. Dalla specifica:

• website, default per pagine generali.
• article, post del blog, notizie. Si abbina con article:published_time, article:author, article:section, article:tag.
• book, si abbina con book:author, book:isbn.
• profile, per pagine di profilo utente.
• video.movie / video.episode / video.tv_show / video.other, per contenuti video.
• music.song / music.album / music.playlist / music.radio_station, per la musica.

Limiti di lunghezza in pratica

Nessuna piattaforma impone un cap rigido sulla lunghezza di titolo o descrizione, ma ognuna tronca dopo un punto:

• Titolo, mantienilo sotto i ~60 caratteri per stare sul sicuro su tutte le piattaforme; ~70 tronca sulla maggior parte. Messaggio critico nei primi 50.
• Descrizione, sotto ~155-200 caratteri prima del troncamento. Meno su mobile (intorno a 100). Anteponi le informazioni chiave.
• Testo alt dell'immagine, dovrebbe essere presente (og:image:alt) per screen reader e client attenti all'accessibilità; sotto i 100 caratteri.

JSON-LD vs Open Graph (sono cose diverse)

Una confusione comune: i dati strutturati JSON-LD (usando vocabolari schema.org) e i tag meta Open Graph fanno lavori diversi. OG / Twitter Cards controllano le anteprime di condivisione sociale, ciò che appare quando qualcuno incolla il tuo URL in Slack o Facebook. JSON-LD con schema.org aiuta Google a fare il parsing della tua pagina per rich result di ricerca, card di ricette, info prodotti, snippet FAQ in Google Search. Entrambi sono raccomandati, e non si sostituiscono a vicenda.

Errori comuni

1. Usare un URL og:image relativo. La specifica richiede un URL assoluto. I percorsi relativi vengono silenziosamente eliminati.
2. Usare un logo del sito generico per ogni pagina. L'immagine OG è l'eroe della tua card, ogni pagina merita un'immagine unica, idealmente legata al contenuto della pagina.
3. Dimenticare og:image:width e og:image:height. Alcuni client pre-allocano spazio e mancano l'immagine senza questi suggerimenti.
4. Mancanza del tipo twitter:card summary_large_image. Senza di esso, X usa il default della card summary più piccola con una miniatura quadrata, spesso meno coinvolgente.
5. Mettere testo chiave negli angoli dell'immagine. Piattaforme diverse ritagliano in modo diverso. I soggetti e il testo importante dovrebbero essere nel centro 80%.
6. Aggiornare i tag ma non aggiornare la cache. Visita lo Sharing Debugger / Post Inspector ufficiale dopo ogni modifica.
7. Inviare un URL immagine HTTP. La maggior parte delle piattaforme rifiuta immagini non-HTTPS; la card apparirà senza una.
8. Usare solo og:title e og:description. Senza og:image la card viene renderizzata come uno stub solo-testo sparso sulla maggior parte delle piattaforme.

Domande Frequenti

<meta property="og:title"       content="Your Page Title" />
<meta property="og:type"        content="website" />
<meta property="og:url"         content="https://yoursite.com/page" />
<meta property="og:image"       content="https://yoursite.com/og.jpg" />
<meta property="og:description" content="A short summary of the page." />

Strumenti correlati