# Anteprima link: perché i link condivisi sembrano rotti e il rimedio
[Canonical HTML page](https://gradiently.design/it/guide/link-preview-image)
Incolli il link in una chat e ottieni un riquadro grigio, l’immagine sbagliata o un logo tagliato a metà. Quasi ogni anteprima rotta dipende da una di otto cause, e tutte si risolvono in pochi minuti.
## The short version
- L’immagine di anteprima di un link è l’immagine che una piattaforma mostra quando qualcuno condivide un URL e proviene dal tag og:image della pagina.
- I motivi più comuni per cui manca l’immagine di anteprima sono l’assenza del tag og:image, un URL dell’immagine relativo, un’immagine che il crawler non raggiunge e tag aggiunti da JavaScript dopo il caricamento della pagina.
- Le piattaforme mettono in cache le anteprime, quindi dopo aver corretto una pagina serve spesso uno strumento di debug o un URL diverso prima che compaia la nuova immagine.
- Un’immagine 1200×630 con le parole al centro funziona bene quasi su ogni piattaforma.
- Provare un link in un messaggio privato a te stesso è il modo più rapido per vedere ciò che vedranno gli altri.
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.
| Cosa vedi | Causa probabile | Rimedio |
| --- | --- | --- |
| Nessuna immagine | Manca il tag `og:image` nella pagina | Aggiungi il tag nell’`head` della pagina |
| Nessuna immagine, il tag c’è | URL relativo come `/share.png` | Usa l’indirizzo completo, che inizia con `https://` |
| Nessuna immagine solo in alcune app | Tag inseriti da JavaScript | Genera i tag sul server, nella prima risposta HTML |
| Nessuna immagine, l’URL è corretto | Immagine dietro login, firewall o regola `robots.txt` | Rendi l’immagine raggiungibile pubblicamente |
| Vecchia immagine dopo una modifica | La piattaforma ha messo in cache il primo recupero | Fai una nuova scansione con un debugger o cambia l’URL dell’immagine |
| Quadratino invece di una scheda grande | Immagine troppo piccola o manca il tag di scheda grande per X | Usa 1200×630 e aggiungi `twitter:card` impostato su `summary_large_image` |
| Immagine tagliata ai lati | Parole vicine ai bordi | Tieni il testo al centro dell’inquadratura |
| Immagine lenta o va in timeout | Il file pesa diversi megabyte | Comprimilo; poche centinaia di kilobyte bastano |
Scorri la lista dall’alto. Quando l’anteprima è vuota, la risposta è quasi sempre nelle prime quattro righe.
## 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.
```html
Autumn menu | Hearth Bakery
```
Un set completo. Nota l’URL https assoluto dell’immagine; un percorso come /share/autumn.png è un errore molto comune.
> **Guarda il sorgente, non la pagina** I crawler leggono l’HTML grezzo inviato dal tuo server e per lo più non eseguono JavaScript. Apri la pagina, scegli Visualizza sorgente pagina e cerca `og:image`. Se non è in quel sorgente, nessuna app di chat lo troverà, per quanto appaia corretto nell’ispettore del browser.
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](https://gradiently.design/it/guide/dynamic-og-images).
## 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. **LinkedIn** Incolla l’URL nel [Post Inspector di LinkedIn](https://www.linkedin.com/post-inspector/). Scarica di nuovo la pagina e mostra esattamente ciò che vede LinkedIn.
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. **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. **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](https://gradiently.design/it/guide/open-graph-image-size).
- Open Graph 1200×630: 1200 × 630
- Link LinkedIn 1200×627: 1200 × 627
- Quadrato di riserva 1200×1200: 1200 × 1200
La scheda 1200×630, l’immagine di link quasi identica di LinkedIn e il quadrato in cui alcune app ritagliano. Le parole al centro sopravvivono a tutti e tre.
Un’immagine di anteprima del link in cui il titolo sta su una zona luminosa del gradiente e si legge male
Le parole attraversano la parte più luminosa dello sfondo e svaniscono a dimensione di miniatura.
La stessa immagine di anteprima con una zona del gradiente più scura e calma dietro il titolo
La stessa scheda con una zona calma e ad alto contrasto dietro le parole. Leggibile anche in una chat affollata.
### Da evitare
- Il tuo logo da solo su bianco
- Uno screenshot della pagina stessa
- Frasi lunghe in corpo piccolo
- Testo che tocca i bordi
- La stessa immagine per ogni pagina
### Da fare
- Un titolo breve che corrisponda alla pagina
- Uno sfondo che la gente riconosce come tuo
- Un corpo abbastanza grande da leggersi a 300 pixel di larghezza
- Un margine netto tutto intorno
- Un’immagine per ogni pagina importante
In una chat l’anteprima è minuscola, quindi valgono le regole del [testo nelle miniature](https://gradiently.design/it/guide/typography-for-thumbnails): 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](https://gradiently.design/it/guide/social-media-image-sizes).
## 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](https://gradiently.design/it/guide/website-hero-background) copre l’immagine principale da cui spesso queste anteprime attingono.
## FAQ
### Perché l’immagine di anteprima del mio link non appare?
Di solito la pagina non ha il tag og:image, il tag usa un URL relativo, l’immagine è bloccata ai crawler o i tag sono aggiunti da JavaScript. Controlla prima il sorgente grezzo della pagina.
### Come aggiorno un’anteprima che mostra una vecchia immagine?
Le piattaforme mettono in cache le anteprime. Chiedi una nuova scansione dell’URL con il Post Inspector di LinkedIn o lo Sharing Debugger di Meta, oppure rinomina il file dell’immagine così il suo URL cambia.
### Che dimensioni deve avere l’immagine di anteprima di un link?
1200×630 pixel. Tieni le parole al centro, perché alcune app tagliano i lati o mostrano la scheda come quadrato.
### Perché X mostra una miniatura piccola invece di un’immagine grande?
Aggiungi un meta tag `twitter:card` impostato su `summary_large_image` e assicurati che l’immagine sia abbastanza grande, idealmente 1200×630.
### Le anteprime dei link funzionano con le single page app?
Solo se i tag Open Graph sono nell’HTML inviato dal server. La maggior parte dei crawler non esegue JavaScript, quindi i tag aggiunti nel browser per loro sono invisibili.