Perché l'anteprima del tuo link sembra sbagliata, e come correggerla con Open Graph

Condividi il link della tua nuova landing page e l'anteprima esce senza immagine, con il titolo della home page oppure con un banner di due campagne fa. La pagina in sé va bene. L'anteprima viene costruita da qualcos'altro: alcune righe di codice nell'head della pagina che la maggior parte delle persone non vede mai.

Questo articolo elenca le sei cause dietro la maggior parte delle anteprime rotte, nell'ordine in cui conviene controllarle. Se vuoi che i tag vengano scritti per te, il generatore Open Graph gratuito li crea, li codifica correttamente e li verifica rispetto ai limiti qui sotto.

Come viene creata un'anteprima di link

Quando un link viene incollato in un post o in un messaggio, l'app invia un crawler alla pagina. Il crawler legge i tag <meta> nel <head> e disegna la scheda a partire da essi. Questi tag provengono dal protocollo Open Graph, che ne richiede quattro come obbligatori:

• og:title: il titolo della pagina così come deve comparire nella scheda.
• og:type: che tipo di pagina è, di solito website o article.
• og:image: l'immagine.
• og:url: l'URL canonico della pagina, che il protocollo chiama il suo ID permanente.

Aggiungi og:description e hai la scheda. Un insieme minimo e completo ha questo aspetto:

<meta property="og:title" content="Spring linen collection">
<meta property="og:description" content="Breathable shirts in three colours.">
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/spring">
<meta property="og:image" content="https://example.com/og/spring.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Three linen shirts on a rail">
<meta name="twitter:card" content="summary_large_image">

Causa 1: mancano i tag

Senza tag og:, ogni app deve ripiegare su ciò che trova altrimenti nella pagina, come il <title> o la prima immagine, e ciò che sceglie dipende dalla singola app. È così che un link può sembrare a posto in un posto e rotto in un altro. La soluzione è dichiarare i quattro tag obbligatori più una descrizione su ogni pagina che ti aspetti venga condivisa, non solo sulla home page. Una pagina prodotto condivisa con i tag della home page mostra la scheda della home page.

Causa 2: l'URL dell'immagine è relativo

Questo errore è facile da non notare, perché la pagina sembra a posto nel tuo browser. content="/images/og.jpg" funziona per un browser già sul tuo sito, ma il crawler è fuori. Scrivi l'indirizzo completo, che inizia con https:// e con il tuo dominio. Lo stesso vale per og:url.

Causa 3: l'immagine ha dimensioni o proporzioni sbagliate

Ogni piattaforma dichiara ciò che vuole, e per caso concordano su un'immagine larga:

• LinkedIn dichiara nella sua guida su come rendere condivisibile un sito che l'immagine deve essere almeno 1200 × 627 pixel, con un rapporto consigliato di 1,91:1, e non superare i 5 MB.
• Le best practice per la condivisione di Meta consigliano immagini larghe almeno 1080 pixel per gli schermi ad alta risoluzione, e almeno 600 di larghezza per mostrare i link pubblicitari con immagine.
• La large image card di X supporta un rapporto 2:1 da 300 × 157 fino a 4096 × 4096 pixel, sotto i 5 MB, in JPG, PNG, WEBP o GIF, e non supporta SVG, secondo la sua documentazione per sviluppatori (la pagina originale ora reindirizza, quindi questo link passa dall'Internet Archive).

Una sola dimensione va bene per tutte e tre: 1200 × 630. Supera il minimo di LinkedIn di 1200 × 627, è più larga dei 1080 di Meta, e il suo rapporto è 1200 ÷ 630 = 1,905, entro il 5% dal 2:1 di X. Un'immagine quadrata o alta verrà ritagliata per entrare in una scheda larga, quindi tieni la parte importante al centro. Il calcolatore del rapporto d'aspetto mostra cosa resta con un ritaglio centrale.

Indica anche le dimensioni nei tag. Meta chiede og:image:width e og:image:height così il suo crawler può disegnare subito l'immagine invece di scaricarla ed elaborarla prima. La sua guida per i webmaster lo dice semplicemente: specifica altezza e larghezza perché l'immagine si carichi bene la prima volta che la pagina viene condivisa.

Causa 4: i tag vengono aggiunti da JavaScript

Alcuni site builder e alcune single-page app aggiungono i meta tag dopo il caricamento della pagina, nel browser. Un crawler che legge l'HTML inviato dal tuo server potrebbe non eseguire mai quel codice, quindi non vede mai i tag. Controlla il sorgente della pagina (Visualizza sorgente, non l'ispettore, che mostra la pagina dopo l'esecuzione degli script). Se i tag non sono nel sorgente, è probabile che nemmeno il crawler li veda. La correzione va nelle impostazioni del sito o nel suo template lato server.

Causa 5: i caratteri speciali hanno rotto il tag

Un titolo con una virgoletta doppia, come Il lino "solo" che ti serve, chiude prematuramente l'attributo content="..." e il resto del titolo si perde. Dentro un attributo i caratteri importanti vanno codificati: " diventa ", & diventa & e < diventa <. Browser e crawler li riportano ai caratteri originali quando leggono il tag. Il generatore lo fa per te, ed è uno dei motivi principali per usarne uno.

Causa 6: l'app ha ricordato la versione vecchia

Hai sistemato i tag, hai ricondiviso e la vecchia scheda è ancora lì. È la cache. Le app memorizzano ciò che hanno scaricato e lo riutilizzano, e i due grandi network ti offrono uno strumento per chiedere una nuova lettura:

• Facebook: incolla l'URL nel Sharing Debugger di Meta. La guida per i webmaster di Meta dice che mostra quali tag il crawler ha letto, con eventuali errori o avvisi, e avvia una nuova lettura. Le best practice di Meta aggiungono che i contenuti letti altrimenti si aggiornano secondo un periodo standard di 24 ore.
• LinkedIn: passa l'URL nel Post Inspector. La pagina di aiuto di LinkedIn è chiara sul limite: l'aggiornamento cambia l'anteprima solo per i nuovi post. I post che contengono già l'URL mantengono quella vecchia.

Questa nota su LinkedIn è quella da ricordare prima di un lancio. Controlla l'anteprima prima che esca il primo post, perché non puoi sistemare un vecchio post sistemando la pagina.

Il tag twitter:card: una riga, non quattro

Anche X legge Open Graph. La sua documentazione sui markup delle card elenca un ripiego per ogni tag: twitter:title ricade su og:title, twitter:description su og:description, twitter:image su og:image e twitter:image:alt su og:image:alt. Quindi non devi ripetere tutto. L'unica riga da aggiungere è twitter:card: summary_large_image per un'immagine a tutta larghezza, oppure summary per una piccola quadrata. Se la ometti, la stessa documentazione dice che X può mostrare invece una piccola card di riepilogo, ed è per questo che una grande immagine a volte arriva come miniatura. La stessa documentazione limita il titolo a 70 caratteri, la descrizione a 200 e il testo alternativo a 420.

Un controllo di cinque minuti prima del lancio

1. Visualizza il sorgente della pagina e trova i tag og:. Ci devono essere tutti e quattro quelli obbligatori, più una descrizione.
2. Verifica che og:image e og:url inizino con https://.
3. Apri da solo l'URL dell'immagine in un browser. Deve caricarsi, a 1200 × 630 o vicino.
4. Incolla l'URL nel Sharing Debugger e nel Post Inspector e leggi le schede.
5. Solo a quel punto condividilo.

Dove si inserisce Hermoso

Hermoso è un agente di marketing basato sull'IA: analizza gli annunci che già funzionano nel tuo mercato, crea annunci di immagine e video in linea con il brand, programma i post sui tuoi account social e gestisce campagne a pagamento sui tuoi account pubblicitari. Una buona anteprima del link è ciò che rende quei post degni di un clic. Hermoso funziona nell'app web, oppure dentro Claude, ChatGPT e Cursor tramite il suo server MCP.

Domande frequenti

Perché il mio link non mostra un'immagine su Facebook o LinkedIn?

Di solito manca il tag og:image, usa un percorso relativo invece di un indirizzo https:// completo, oppure punta a un'immagine troppo piccola. LinkedIn chiede almeno 1200 × 627 pixel. Dopo la correzione, passa l'URL nel Sharing Debugger di Meta o nel Post Inspector di LinkedIn perché lo ricarichino.

Che dimensione deve avere un'immagine Open Graph?

1200 × 630 pixel funzionano sui grandi social network. Rispetta il minimo di LinkedIn di 1200 × 627 con circa 1,91:1, è più larga dei 1080 pixel consigliati da Meta, ed è vicina al 2:1 che X supporta per le large image card.

Come aggiorno l'anteprima di un link su LinkedIn?

Correggi i tag sulla pagina, poi inserisci l'URL nel Post Inspector di LinkedIn. L'anteprima aggiornata vale solo per i nuovi post. I post che contengono già il link mantengono l'anteprima vecchia.

Servono i tag twitter: se ho i tag og:?

Serve solo twitter:card. X ricade su og:title, og:description, og:image e og:image:alt quando mancano le versioni twitter:.