Anteprima link: perché i link condivisi sembrano rotti e il rimedio

Una immagine di anteprima del link nasce da una riga dell’HTML della pagina: il tag og:image. Quando una piattaforma come WhatsApp, Slack, LinkedIn o iMessage incontra un link, un crawler scarica la pagina, legge quel tag e scarica l’immagine. Se l’anteprima è vuota o sbagliata, qualcosa in questa catena si è rotto: il tag manca, l’indirizzo dell’immagine è relativo, il crawler è bloccato o la piattaforma mostra ancora una vecchia copia dalla cache.

Perché le anteprime si rompono: tabella di diagnosi

Parti dal sintomo che vedi. La tabella qui sotto copre le otto cause delle anteprime rotte, con le più probabili per prime.

I tag che servono a un’anteprima funzionante

Serve sorprendentemente poco: un titolo, una descrizione, l’URL completo dell’immagine, le sue dimensioni e una riga in più perché X mostri una scheda grande invece di una miniatura. L’URL canonico della pagina in og:url aiuta le piattaforme a raggruppare le condivisioni della stessa pagina.

<head>
  <title>Autumn menu | Hearth Bakery</title>
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://example.com/autumn">
  <meta property="og:title" content="Our autumn menu is here">
  <meta property="og:description" content="Pumpkin loaf, apple buns and spiced coffee, baked every morning.">
  <meta property="og:image" content="https://example.com/share/autumn-1200x630.png">
  <meta property="og:image:width" content="1200">
  <meta property="og:image:height" content="630">
  <meta property="og:image:alt" content="Autumn menu at Hearth Bakery">
  <meta name="twitter:card" content="summary_large_image">
</head>

I framework rendono facile sbagliare. Una single page app che imposta i tag dopo il caricamento mostrerà l’anteprima in pochi posti e fallirà nella maggior parte. Usa invece la funzione di metadati lato server del tuo framework, oppure genera l’immagine per ogni pagina come descritto in immagini OG dinamiche.

Come aggiornare un’anteprima del link in cache

Le piattaforme scaricano una pagina una volta e ne conservano il risultato per un po’, quindi correggere i tag non corregge i post già condivisi e a volte nemmeno le nuove condivisioni. Usa gli strumenti della piattaforma dove esistono e cambia l’URL dove non ci sono.

1. 1

   LinkedIn

   Incolla l’URL nel Post Inspector di LinkedIn. Scarica di nuovo la pagina e mostra esattamente ciò che vede LinkedIn.

2. 2

   Facebook, Instagram e WhatsApp

   Lo Sharing Debugger di Meta, negli strumenti per sviluppatori, mostra i tag trovati e ha un pulsante per eseguire una nuova scansione. WhatsApp può impiegare più tempo ad aggiornarsi.

3. 3

   Slack, Discord, iMessage e altri

   Per la maggior parte non esiste uno strumento pubblico di aggiornamento. Rinomina il file dell’immagine, per esempio autumn-v2.png, e aggiorna il tag, così il crawler vede un nuovo indirizzo.

4. 4

   Casi ostinati

   Condividi la pagina con una query string innocua come ?v=2. Le piattaforme la trattano come un nuovo link e la scaricano da zero.

Progettare un’immagine che si veda bene ovunque

Quando i tag funzionano, è l’immagine a decidere se qualcuno tocca. Falla 1200×630, un’inquadratura larga di circa 1,91 a 1 che ogni grande piattaforma accetta. Alcune app la mostrano più piccola o tagliano un po’ i lati, e qualcuna ripiega su un quadrato, quindi tieni le parole al centro. Tutta la storia delle dimensioni è in dimensioni dell’immagine OG.

In una chat l’anteprima è minuscola, quindi valgono le regole del testo nelle miniature: poche parole grandi, forte contrasto, un’idea sola. In Gradiently il Mark di un design tiene la sua zona più calma dietro le parole e sceglie testo chiaro o scuro riga per riga, così il titolo resta leggibile comunque la piattaforma ridimensioni la scheda. Parti dal formato Anteprima link nello Studio e lo stesso design può diventare il tuo banner del blog 1200×600 e il resto delle tue dimensioni delle immagini social.

Un test di due minuti prima di condividere

1. Guarda il sorgente della pagina e controlla che og:image ci sia, con un URL https completo.
2. Apri l’URL di quell’immagine in una finestra privata del browser. Se lì non si carica, non possono caricarla nemmeno i crawler.
3. Passa l’URL nel Post Inspector di LinkedIn o nel debugger di Meta per vedere i tag letti.
4. Invia il link a te stesso su WhatsApp o Slack e guardalo da telefono.
5. Se qualcosa è vecchio, cambia il nome del file dell’immagine e riprova.

Fallo una volta per ogni template del tuo sito, non per ogni pagina, e le anteprime rotte smettono di essere una sorpresa. Se stai costruendo un sito da zero, la guida allo sfondo hero del sito web copre l’immagine principale da cui spesso queste anteprime attingono.