Il tuo link mostra l'anteprima sbagliata? Cinque controlli per le anteprime dei link

Per chi è questa guida

Qualcuno ha condiviso un link al tuo sito, al tuo negozio, alla pagina di prenotazione o alla pagina di stato, e la scheda di anteprima nella chat o sul social mostra il logo di un’altra azienda, un’immagine vecchia, un semplice indirizzo o niente. Nel browser la pagina si vede bene. Questa guida spiega perché le anteprime sbagliano e ti dà cinque controlli. Se il link appartiene a un sito che non gestisci tu, l’ultima parte spiega come segnalarlo perché venga corretto in fretta.

Come nasce un’anteprima

Quando incolli un link, l’app non mostra la tua pagina. Un piccolo programma scarica l’HTML della pagina e legge alcune righe nell’intestazione, i tag Open Graph. Titolo, descrizione e immagine della scheda vengono da quelle righe e da nessun’altra parte. Se mancano, sono sbagliate o copiate da un modello, la scheda mostra proprio questo. L’app conserva una copia del risultato, per questo una correzione spesso non si vede subito.

I cinque controlli

1. Guarda cosa vedono gli altri. Incolla il link in una chat con te stesso o usa uno strumento di anteprima: lo Sharing Debugger per Facebook e Instagram, il Post Inspector per LinkedIn. Mostrano titolo, descrizione e immagine trovati ed elencano i problemi. Guarda la scheda, non il tuo browser: quello che vedi sulla pagina non è ciò che legge il programma che la scarica.

2. Dai a ogni pagina i suoi tag. L’insieme di base è og:title, og:description, og:image e og:url, più og:type per il tipo di pagina. Stanno nel <head> della pagina:

   <meta property="og:title" content="Orari e prenotazione">
   <meta property="og:description" content="Prenota una chiamata gratuita di 30 minuti.">
   <meta property="og:image" content="https://example.com/img/prenotazione.png">
   <meta property="og:url" content="https://example.com/prenotazione/">
   

   Un solo insieme per tutto il sito significa che ogni pagina mostra la stessa scheda. Per un sito piccolo va bene, ma una pagina di stato, una di prenotazione e una di prodotto meritano la propria.

3. Usa un’immagine che il programma può aprire. Usa un indirizzo completo che inizia con https://, non un percorso come /img/scheda.png. L’immagine deve aprirsi senza accesso, senza banner dei cookie e senza reindirizzamenti, e non deve essere bloccata per i robot. Una dimensione di 1200 per 630 pixel, un rapporto di circa 1,91 a 1, funziona bene sulle grandi reti; il minimo di Meta è 200 per 200 pixel. Tieni il file leggero, bastano poche centinaia di kilobyte. Metti poco testo nell’immagine, perché viene mostrata piccola.

4. Scopri da dove arrivano i tag. Quando la scheda mostra un’immagine che non è tua, i tag arrivano da un punto che non hai impostato. Le cause più comuni:

   • un tema, un modello o un costruttore di siti inserisce un’immagine predefinita, spesso la propria
   • il provider o il servizio mostra ai programmi una pagina segnaposto, per esempio quando l’indirizzo punta al sito sbagliato o a un progetto non finito
   • i tag vengono aggiunti con JavaScript dopo il caricamento della pagina. Molti programmi di anteprima non eseguono script e non li vedono mai. I tag devono stare nell’HTML inviato dal server. Per controllare, apri il sorgente della pagina (non l’ispettore) e cerca og:image.

5. Aggiorna la copia salvata. Facebook e LinkedIn conservano ciò che hanno scaricato. Dopo la correzione, ripassa il link nel debugger o nell’inspector e usa il pulsante che lo scarica di nuovo. Alcune app di chat tengono una copia propria senza strumenti per cancellarla. Aggiungere al link un parametro innocuo, come ?v=2, fa trattare il link come nuovo. I messaggi già inviati mantengono la vecchia scheda.

Un autocontrollo di due minuti

• Incolla il tuo link più importante in uno strumento di anteprima: titolo, descrizione e immagine sono giusti?
• Apri il sorgente della pagina e cerca og:image: c’è, con un indirizzo https:// completo?
• Apri l’indirizzo dell’immagine in una finestra privata: si carica senza accesso?
• L’immagine è nitida e leggibile anche piccola, ed è la tua?
• Hai fatto scaricare di nuovo il link dopo l’ultima modifica?

Se il link è sul sito di qualcun altro

Quando l’anteprima sbagliata è sul sito di un fornitore o di un partner, non puoi correggerla tu, ma puoi rendere la segnalazione facile da gestire. Invia il link, uno screenshot della scheda sbagliata e il risultato del debugger o dell’inspector. Indica quale dei cinque controlli fallisce, per esempio «la pagina non ha og:image, quindi la scheda mostra un’immagine che non c’entra». Con queste tre cose il loro team riproduce il problema in pochi minuti. Aiuta anche dire in quale app l’hai visto.

Quando chiedere aiuto

Chiedi a qualcuno con esperienza se:

• hai cambiato i tag e dopo l’aggiornamento compare ancora la vecchia scheda
• gestisci molte pagine o un negozio e ti serve una scheda per ogni prodotto
• i tag sono giusti nel sorgente ma il debugger segnala errori che non sai leggere
• vuoi far controllare anteprima, titoli e immagini insieme al resto del sito

Fa parte anche dei controlli prima di andare online. Li facciamo con te in una videochiamata gratuita di 30 minuti: prenota una chiamata.