Anteprima social e controllo Open Graph
Guarda come appare il tuo link quando qualcuno lo condivide su WhatsApp, LinkedIn, Facebook e X, e cosa manca fra i tag Open Graph e Twitter Card.
Leggiamo solo l'HTML pubblico della pagina che indichi. Niente account, niente dati salvati.
Leggiamo l'HTML che il tuo server restituisce, gli stessi tag che legge il crawler di Facebook o di WhatsApp.
Come si usa
- 01
Incolla l'indirizzo della pagina
Quello vero, con la pagina già online: i tag Open Graph si leggono solo dall'HTML servito. Se la pagina è ancora in bozza, mettila in anteprima pubblica e riprova.
- 02
Guarda le quattro anteprime
Facebook, LinkedIn, X e WhatsApp ritagliano in modo diverso e tagliano il testo in punti diversi. Qui vedi tutti e quattro i riquadri affiancati, con la tua immagine vera dentro.
- 03
Correggi i tag e forza il rinfresco
Sotto le anteprime c'è la lista di quello che manca e il blocco pronto da incollare. Dopo aver corretto, passa dal debugger di Facebook: altrimenti resta in giro l'anteprima vecchia.
Che cosa sono i tag Open Graph
I tag Open Graph sono righe di codice nell'<head> della pagina che dicono alle app come mostrare il tuo link quando qualcuno lo condivide: quale titolo scrivere, quale descrizione, quale immagine. Senza di loro l'app deve indovinare, e indovina male.
Il protocollo nasce in Facebook nel 2010, ma oggi lo legge quasi tutto: WhatsApp, LinkedIn, Telegram, Slack, Discord, iMessage, X quando non trova i suoi tag. Sono cinque righe e la sintassi è sempre la stessa: <meta property="og:title" content="..." />. I quattro che contano davvero sono og:title, og:description, og:image e og:url; og:type e og:site_name sono il contorno.
Va detta una cosa che nessuno dice: Open Graph non è un fattore di posizionamento. Google non guarda og:title per decidere se metterti primo. Serve a un'altra cosa, che però conta uguale: la percentuale di persone che cliccano quando il tuo link passa in una chat di lavoro o in un gruppo. Un link senza anteprima sembra spam anche quando non lo è, e in una conversazione fra dieci persone quella differenza si vede tutta.
Perché l'anteprima resta vecchia dopo che hai corretto i tag
Perché ogni piattaforma tiene la sua copia in cache, e la tiene per settimane. Quando qualcuno condivide il tuo link, il crawler scarica la pagina una volta, ne salva titolo, descrizione e immagine, e da lì in poi serve quella copia a tutti. Se cambi l'immagine il giorno dopo, la piattaforma non se ne accorge da sola.
Il rimedio è chiedere il rinfresco a mano. Per Facebook e WhatsApp — che condividono la stessa cache — si usa il debugger di Facebook: incolli la URL, premi «Scrape Again» e l'anteprima si riscrive. Per LinkedIn c'è il Post Inspector, che fa la stessa cosa e in più ti dice cosa ha letto. X rinfresca da solo, con i suoi tempi.
C'è un trucco che vale la pena conoscere: se hai già condiviso il link ovunque e l'anteprima sbagliata è ormai in giro, cambiare il nome del file immagine — da social.jpg a social-2.jpg — è più rapido che sperare che ogni cache scada. La URL nuova non è in nessuna cache, quindi viene scaricata subito.
L'immagine: misure, peso e il ritaglio che nessuno ti dice
La misura che funziona ovunque è 1200 × 630 pixel, cioè il rapporto 1,91:1. Non è una regola arbitraria: è il formato del riquadro grande su Facebook e su X, e le altre piattaforme ritagliano verso quello. Sotto i 600 × 315 pixel Facebook rinuncia al riquadro grande e mostra la miniatura piccola di lato, anche se hai dichiarato tutto il resto correttamente.
Il ritaglio è la parte che sorprende. WhatsApp mostra un quadrato, non un rettangolo: prende la tua grafica 1200 × 630 e ne taglia i lati. Se il testo della grafica arriva vicino ai bordi, in chat sparisce. La regola pratica è tenere il testo dentro il quadrato centrale, quindi in una fascia di circa 630 × 630 pixel al centro dell'immagine.
Due dettagli tecnici che rompono anteprime funzionanti. Il primo: la URL dell'immagine deve essere assoluta, con https e dominio — un percorso come /img/social.jpg le piattaforme non lo risolvono, lo buttano. Il secondo: il file deve essere raggiungibile da chiunque, senza login e senza protezione hotlink; se il tuo server blocca le richieste che arrivano da fuori, il crawler riceve un 403 e il riquadro resta vuoto. Sul peso, stai sotto i 5 MB e usa JPG o PNG: WebP e AVIF sono ancora trattati male da diverse app di chat.
Domande
Quali tag Open Graph servono davvero?
Quattro: og:title, og:description, og:image e og:url. Con questi il link si condivide bene ovunque. og:type e og:site_name aggiungono contesto e costano due righe, quindi tanto vale metterli. Tutto il resto — og:locale, og:image:type, i tag article: — serve in casi specifici e non cambia l'anteprima nella maggior parte delle app.
Perché su WhatsApp non compare l'anteprima del mio link?
Nella grande maggioranza dei casi è l'immagine: manca, oppure è dichiarata con un percorso relativo, oppure il file non è raggiungibile dall'esterno. WhatsApp usa la cache di Facebook, quindi il debugger di Facebook ti dice cosa sta vedendo davvero. Un'altra causa frequente è il tempo: se il tuo server impiega più di qualche secondo a rispondere, il crawler si arrende prima.
Devo mettere anche i tag twitter:*?
Uno solo: twitter:card. X legge og:title, og:description e og:image se non trova i suoi, ma senza twitter:card disegna la card piccola con la miniatura quadrata. Se hai una grafica orizzontale, dichiara summary_large_image e prende tutta la larghezza. twitter:title, twitter:description e twitter:image servono solo se vuoi mostrare su X qualcosa di diverso dal resto.
Quanto lunghi devono essere og:title e og:description?
Titolo entro i 60 caratteri, descrizione entro i 155. Non sono limiti tecnici: le piattaforme accettano di più, ma tagliano a lunghezze diverse e WhatsApp taglia prima di tutti, intorno ai 65 caratteri di descrizione. Scrivi come se avessi una riga sola e considera il resto un di più che qualcuno leggerà.
og:title deve essere uguale al title della pagina?
Non deve, e spesso conviene che sia diverso. Il title è scritto per Google e di solito porta in coda il nome del sito dopo una barra verticale: nel riquadro di condivisione quella coda è spazio buttato, perché il dominio è già scritto sopra. og:title può essere più corto, più diretto e più discorsivo, perché parla a una persona in una chat e non a un motore di ricerca.
Gli altri strumenti
Vedili tutti →Il prossimo articolo del tuo blog
esce questa settimana.
Scrivi il dominio: vediamo cosa cerca la tua gente, ti proponiamo il piano e tu decidi. Tre giorni di prova, €0 oggi.