Come creare un’immagine di anteprima per il tuo sito

Che cos’è l’immagine di anteprima di un link?

Invii un articolo e chi lo riceve vede un semplice indirizzo, un’immagine sbagliata oppure una scheda con immagine e titolo chiari. L’immagine della scheda si chiama immagine di condivisione, anteprima del link o immagine Open Graph.

Accompagna il link di una pagina web. Ha un ruolo diverso da un post Instagram, dalla piccola icona della scheda del browser (favicon) o dalla copertina visibile nell’articolo. Puoi usare lo stesso originale, adattando taglio, testo e impostazioni a ogni utilizzo.

Per creare l’anteprima, il servizio legge titolo, descrizione e indirizzo dell’immagine della pagina. Queste informazioni si chiamano metadati. Open Graph le identifica per gli altri servizi. Di solito puoi inserirle nelle impostazioni del sito senza scrivere codice. La guida MDN ai metadati spiega la differenza rispetto al contenuto visibile.

Le applicazioni non mostrano tutte la stessa anteprima. Possono ritagliare l’immagine, accorciare il titolo o non mostrare la scheda. Il sito non controlla quindi tutto il risultato. Prova il link nel servizio in cui vuoi condividerlo.

Quali dimensioni scegliere?

Parti da 1200 × 630 pixel, salvo indicazioni diverse del tuo sito. Significa 1200 piccoli punti in larghezza e 630 in altezza: quasi il doppio di larghezza rispetto all’altezza. È un consiglio pratico, non una regola valida per tutti i servizi.

Per esempio, le indicazioni di LinkedIn consigliano 1200 × 627 per l’anteprima di un post di una Pagina. Non deformare l’immagine per pochi pixel di differenza. Segui le istruzioni del servizio quando prepari una versione per una posizione precisa.

Dimensioni e peso sono diversi: i pixel indicano larghezza e altezza; kilobyte (KB) e megabyte (MB) lo spazio occupato. Non esiste un peso ideale universale. Confronta le copie e scegli quella più leggera se resta chiara. Controlla anche il limite del servizio.

Se l’originale è 1600 × 1600, prepara prima un taglio orizzontale. Impostare direttamente 1200 × 630 può deformare il soggetto se lo strumento non conserva le proporzioni. La guida al ridimensionamento senza deformazioni spiega la differenza tra ritaglio e modifica delle dimensioni.

Progetta un’immagine leggibile in piccolo

Molti vedranno la scheda sul telefono, fra altri contenuti. I dettagli piccoli possono sparire. Scegli cosa si deve capire subito: il tema dell’articolo, il tipo di evento o il prodotto dietro il link.

«Foto prodotto migliori» può funzionare meglio del titolo completo con sottotitolo. Spesso il titolo compare anche fuori dall’immagine. Non inserire tutto nel disegno: le informazioni essenziali devono essere presenti anche nel testo della pagina.

Scegli colori che rendano il testo evidente. Lascia spazio attorno al soggetto e tieni volti, prodotti e parole importanti lontani dai bordi. Non c’è un’area sicura identica per tutti i servizi. Guarda l’immagine intera e prova anche un ritaglio più stretto al centro.

Visualizza la bozza a circa 300 pixel di larghezza o in piccolo sul telefono. È una prova di leggibilità, non un requisito tecnico. Riesci a leggere senza zoom e a capire il soggetto? Altrimenti accorcia il testo, ingrandisci le lettere o riduci i dettagli.

In un negozio il prodotto dovrebbe riconoscersi subito. Per un evento, l’immagine può dare atmosfera, ma data e iscrizione devono comparire anche nel testo. Il logo aiuta a riconoscere il marchio; ripeterlo in grande su ogni articolo dice poco sul singolo tema.

Scegli il formato e comprimi una copia

JPG è una scelta iniziale pratica per le foto. PNG è utile se il JPG peggiora lettere o contorni. Scegli uno sfondo intenzionale: un’immagine trasparente dipende dall’interfaccia che la mostra, dove un logo chiaro può scomparire.

WebP e AVIF possono andare bene sul sito, ma il supporto del browser non garantisce quello del servizio che crea l’anteprima. Qui parti da JPG o PNG. Per altri formati, controlla compatibilità e risultato reale.

Prepara la composizione nel tuo programma di grafica. Usa lo strumento di ritaglio di Pixilo per l’inquadratura e lo strumento di ridimensionamento per le misure. Se devi rispettare un limite di peso, prova la riduzione a un peso massimo. Controlla il file scaricato: questi strumenti non impostano l’immagine di condivisione sul tuo sito.

Comprimere significa ridurre lo spazio occupato. Conserva l’originale e lavora su una copia. Confronta lettere, contorni del logo e sfumature. Se la qualità peggiora, riparti dall’originale con meno compressione. Rielaborare una copia sfocata non recupera dettagli. Il confronto fra JPG e PNG aiuta a scegliere per testi e fotografie.

Aggiungere l’immagine in WordPress o in un creatore di siti

Apri l’articolo nella gestione del sito. Cerca «immagine di condivisione», «Social image» oppure «Open Graph image». Il campo può essere nelle impostazioni per i motori di ricerca, dette SEO. Procedi così:

1. Apri la pagina giusta. Modifica proprio l’articolo o la pagina di cui vuoi condividere il link.
2. Scegli l’immagine della pagina. Carica il file pronto o selezionalo dalla libreria media, dove sono conservate le immagini già caricate.
3. Controlla titolo e immagine predefinita. La modifica deve riguardare questa pagina, senza cambiare l’immagine generale del sito.
4. Salva e pubblica. Caricare il file nella libreria non modifica da solo i dati dell’anteprima.
5. Prova il link pubblico. Segui i controlli riportati sotto prima di condividere.

In WordPress l’opzione può trovarsi nel plugin SEO già installato. Un plugin aggiunge funzioni a WordPress. Per esempio, la guida di Yoast descrive le sue impostazioni social. Menu e anteprime dipendono da versione e abbonamento. Controlla le funzioni disponibili prima di installare un altro plugin.

L’immagine in evidenza può fare da anteprima, ma dipende dal tema e dai plugin. La documentazione tecnica di Yoast spiega come seleziona l’immagine. Quella predefinita è un’alternativa comune per le pagine senza una scelta propria. Per articoli importanti usa un’immagine specifica se quella generale non ne spiega il tema.

Se non trovi l’impostazione, passa indirizzo della pagina e file a chi gestisce il sito. Chiedi di configurare l’immagine e verificare i dati pubblicati. Incollare metadati nel testo visibile dell’articolo non equivale a inserirli nel punto corretto.

Facoltativo: aggiungere l’immagine nel codice

Salta questa parte se hai scelto l’immagine nelle impostazioni. È per te o chi gestisce il sito quando si modifica direttamente il codice. HTML descrive la struttura della pagina; la sezione head contiene informazioni che non appaiono come testo dell’articolo. Inserisci lì le indicazioni seguenti. og:image indica l’indirizzo dell’immagine; gli altri campi Open Graph descrivono la pagina. La specifica Open Graph spiega questi campi. L’esempio riguarda un articolo. Per una pagina generale usa website come tipo.

Sostituisci dominio, indirizzi, titolo, descrizione e file con i tuoi valori. Se dichiari 1200 × 630, l’immagine deve avere davvero quelle dimensioni.

<meta property="og:type" content="article">
<meta property="og:title" content="Foto migliori per il tuo negozio">
<meta property="og:description" content="Prepara immagini chiare e controllale nella pagina del prodotto.">
<meta property="og:url" content="https://example.com/guides/product-photos/">
<meta property="og:image" content="https://example.com/images/product-photos-social.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Una tazza blu su sfondo chiaro con la scritta Foto migliori.">

Usa un indirizzo HTTPS completo, con nome del sito e percorso del file. L’indirizzo della pagina va in og:url e quello dell’immagine in og:image. La pagina deve usare il suo indirizzo principale previsto. Per un sito multilingue controlla titolo e indirizzo di ogni versione.

Descrivi soggetto e testo importante dell’immagine in og:image:alt. È il testo alternativo, chiamato anche alt. Non sostituisce la descrizione di un’immagine visibile nell’articolo. Se il file compare anche lì, aggiungi la descrizione nei suoi appositi campi.

Controlla se tema o plugin forniscono già i campi e aggiorna l’impostazione esistente. Più immagini possono essere volute, ma riferimenti vecchi e nuovi in conflitto rendono la scelta incerta. Tieni insieme immagine principale e dimensioni.

I dati devono essere nel codice HTML pubblicato quando il servizio legge la pagina. Un’aggiunta successiva nel browser può non essere letta. Se esistono impostazioni separate per le schede di X, controlla anche la loro immagine: correggere Open Graph non aggiorna altri campi.

Prova il link pubblicato prima di condividerlo

Incolla l’indirizzo pubblico nella bozza di un post o messaggio e aspetta l’anteprima. Immagine e titolo sono corretti? Il testo si legge? Prova nel servizio previsto senza inviare la bozza. Se manca l’immagine o è sbagliata, continua i controlli.

Apri il codice sorgente della pagina pubblicata dal browser e cerca og:image. Il nome del comando varia. Controlla immagine, titolo e indirizzo, oppure chiedi a chi gestisce il sito. L’indirizzo di una bozza dell’editor non verifica il link pubblico.

Per LinkedIn usa Post Inspector. Su Facebook lo strumento corrispondente è Sharing Debugger. Inserisci l’indirizzo e avvia la verifica; potrebbe essere necessario accedere. Poi controlla una nuova bozza. Non devi pubblicare nulla solo per fare una prova.

Annota indirizzo della pagina, dell’immagine e servizio provato. Se funziona in un posto ma non altrove, questi dati aiutano più di continui cambi dell’immagine. La guida LinkedIn alla cache precisa che gli aggiornamenti di Post Inspector riguardano i nuovi post; le anteprime di quelli esistenti non cambiano.

Perché l’immagine manca o mostra la versione sbagliata?

Distingui tre cause: la pagina indica l’immagine errata, il servizio non raggiunge il file oppure mostra un’anteprima salvata in precedenza. Una qualità maggiore non ripara un indirizzo rotto. Ricaricare il browser non svuota la cache di un altro servizio.

Se l’indirizzo dell’immagine apre una pagina web, il percorso può essere sbagliato o il file assente. Alcuni siti mostrano allora la home. Passa entrambi gli indirizzi al gestore e chiedi di verificare che il vero file sia accessibile senza login.

La cache è una copia salvata della pagina o dell’immagine. Accelera il caricamento, ma può restare vecchia. Una CDN distribuisce file da più server e può conservarne copie. Chiedi di aggiornare quelle del sito se necessario. Verifica prima pagina e immagine pubbliche, poi chiedi al servizio di rileggerle. Svuotare la cache del tuo browser non aggiorna le altre copie.

Puoi salvare l’immagine nuova con un nome diverso, per esempio product-photos-social-v2.jpg, e aggiornare il riferimento sulla pagina. Questo distingue i file, ma non forza una nuova lettura della pagina né modifica tutti i messaggi precedenti.

Non cambiare l’indirizzo permanente dell’articolo e non disattivare le protezioni per tentativi. Fornisci indirizzo e messaggio d’errore al gestore. Potrà capire cosa blocca l’accesso a quel contenuto pubblico preciso.

Esempio: l’anteprima di una guida alle foto prodotto

Immagina una guida per negozi con una copertina quadrata di una tazza e un lungo titolo sulle foto per diversi dispositivi. Il taglio orizzontale automatico elimina il manico. Questo è un esempio di procedura, non un risultato misurato.

1. Crea una versione orizzontale. Parti da 1200 × 630, mostra tutta la tazza e lascia spazio attorno.
2. Accorcia il testo nell’immagine. Prova «Foto prodotto migliori». Mantieni il titolo completo nell’articolo e nel campo del titolo dell’anteprima.
3. Salva e controlla. Confronta JPG e PNG per peso, lettere e bordi del prodotto nell’anteprima piccola.
4. Configura l’immagine della pagina. Scegli il file nelle impostazioni social dell’articolo. Salva e pubblica.
5. Prova il link. Controlla file pubblico, dati della pagina e una nuova anteprima nel servizio.

La versione può funzionare per il link senza essere ideale per Instagram o una copertina ampia del sito. Conserva il progetto originale per creare varianti senza modificare continuamente il JPG finale.

Che rapporto ha con la SEO?

L’immagine aiuta a capire il link condiviso. Aggiungere og:image non garantisce posizioni migliori nei motori di ricerca. Immagine nei risultati, nella pagina e nel link sono usi distinti; una sola impostazione non li controlla tutti.

Usa un nome descrittivo e un titolo fedele al contenuto. Descrivi l’immagine per una persona, senza riempire il campo di parole chiave. La guida SEO di Google parla di contenuti utili e immagini comprensibili. La guida ai testi alternativi e ai nomi dei file aiuta a descrivere le immagini visibili nella pagina.

Ridurre l’immagine social non accelera automaticamente la copertina visibile. Se la pagina usa un altro file, ottimizzane il caricamento separatamente. Valuta le prestazioni con le immagini realmente caricate.

Domande frequenti

Open Graph richiede 1200 × 630?

No. Qui è una misura iniziale pratica. Open Graph definisce come indicare indirizzo e dimensioni; il servizio destinatario stabilisce visualizzazione e limiti.

La copertina può essere l’immagine di condivisione?

Sì, se la composizione è adatta e il sito indica il file corretto. Una versione distinta aiuta con copertine verticali, quadrate o con testo illeggibile in piccolo.

Serve un’immagine diversa per ogni pagina?

Non per forza. Una predefinita è una buona alternativa. Immagini proprie aiutano soprattutto per guide, prodotti ed eventi condivisi il cui argomento non si capisce dal solo logo.

Perché un vecchio post non mostra la nuova immagine?

Il servizio può conservare l’anteprima originale. Controlla una nuova bozza e le sue indicazioni di aggiornamento. Cambiare il file del sito non garantisce la modifica di messaggi già inviati.

Un pulsante Condividi aggiunge l’immagine all’anteprima?

No. Facilita l’invio del link, ma non sostituisce i dati della pagina. Il servizio ricevente decide se caricare e mostrare la scheda. Condividere direttamente il file immagine è un’altra azione.

Riassumi conChatGPT (si apre in una nuova scheda)Grok (si apre in una nuova scheda)Google (si apre in una nuova scheda)Perplexity (si apre in una nuova scheda)Claude (si apre in una nuova scheda)