Dimensioni dell’immagine OG: anteprime 1200×630 che funzionano ovunque

La dimensione dell’immagine OG che funziona quasi ovunque è 1200×630 pixel, un formato orizzontale con rapporto di circa 1,91 a 1. Facebook, LinkedIn, X, Slack, Discord e la maggior parte delle app di messaggistica costruiscono le anteprime dei link a partire da quest’unica immagine, dichiarata nel tag og:image della pagina. LinkedIn indica la sua immagine per i link come 1200×627, abbastanza vicina da permettere a un solo file 1200×630 di servire entrambe.

Open Graph 1200×630

1200 × 630

Immagine link LinkedIn 1200×627

1200 × 627

Quadrato centrale 630×630

630 × 630

Cos’è un’immagine Open Graph e come vengono lette le anteprime

Open Graph è un insieme di tag meta nell’head di una pagina web. Quando qualcuno incolla il tuo link in un post o in una chat, la piattaforma manda un crawler sulla pagina, legge quei tag, scarica l’immagine e disegna la scheda di anteprima. Lo fa una volta e poi memorizza il risultato, a volte per giorni.

Tre dettagli colgono in fallo quasi tutti. L’indirizzo dell’immagine deve essere un URL completo, che inizia con https://, non un percorso relativo. Deve caricarsi per chiunque, senza un accesso o un banner dei cookie in mezzo. E i tag devono stare nell’HTML inviato dal server, perché la maggior parte dei crawler non esegue JavaScript, quindi i tag aggiunti da uno script dopo il caricamento della pagina non vengono mai visti.

<meta property="og:title" content="How to design a launch post" />
<meta property="og:description" content="A short, specific summary of the page." />
<meta property="og:image" content="https://example.com/og/launch-post.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:alt" content="The words Launch post design on a violet gradient" />
<meta property="og:url" content="https://example.com/guide/launch-post" />
<meta name="twitter:card" content="summary_large_image" />

Progettare un’immagine OG che si legge in miniatura

Un’immagine 1200×630 raramente viene vista a 1200 pixel. In un feed su un telefono si riduce a una striscia larga quanto lo schermo, e in una chat può essere ancora più piccola. Progetta per la versione piccola: un titolo breve, testo grande, contrasto forte e niente di importante negli angoli.

• Da tre a sette parole. Il titolo della pagina ridotto al suo punto, non il titolo completo.
• Testo grande. Sulla tela da 1200×630, un titolo alto circa da 64 a 96 pixel resta leggibile quando l’anteprima si riduce.
• Margini di circa 60 pixel o più, così niente tocca un bordo che una piattaforma potrebbe arrotondare o ritagliare.
• Una piccola firma del brand, come un logotipo o il nome del sito, sempre nello stesso punto in ogni immagine.
• Uno sfondo coerente, così le persone riconoscono i tuoi link prima di leggerli.

Alle dimensioni piccole il contrasto conta di più, non di meno. Verifica che il titolo rispetti i rapporti del contrasto dei colori, e se lo sfondo è un gradiente, misura il contrasto dove stanno davvero le parole. Il testo su un gradiente mostra come trovare la zona calma.

Un’immagine OG per tutto il sito, o una per pagina

Ogni sito ha bisogno di un’immagine predefinita per le pagine che non hanno di meglio. Ma un’immagine predefinita su ogni pagina rende identico ogni link condiviso, e dall’anteprima nessuno capisce di quale pagina si tratti. Le pagine più condivise meritano la loro.

Creare a mano un’immagine separata per ogni articolo non regge sui grandi numeri. La maggior parte dei framework moderni può generare un’immagine OG da un template quando la pagina viene costruita o richiesta per la prima volta; le immagini OG dinamiche spiega l’approccio.

Come verificare le anteprime dei link

1. 1

   Controlla i tag

   Apri la pagina, guarda il sorgente e cerca og:image. Se non è nel sorgente, i crawler non lo vedranno.

2. 2

   Apri l’indirizzo dell’immagine

   Incolla l’URL di og:image in una finestra privata del browser. Deve caricarsi direttamente, in https, senza accesso.

3. 3

   Usa lo strumento di verifica della piattaforma

   Il Post Inspector di LinkedIn mostra come LinkedIn vede un URL e ne aggiorna la cache. Facebook ha un Sharing Debugger simile.

4. 4

   Mandalo a te stesso

   Incolla il link in un’app di chat e in una bozza di post. Guarda l’anteprima su un telefono, dove è più piccola.

5. 5

   Svuota la cache dopo le modifiche

   Se continua a comparire una vecchia immagine, dai alla nuova un nuovo indirizzo, per esempio aggiungendo ?v=2 al suo URL, poi verifica di nuovo.

Formato e peso del file

Usa PNG per le schede progettate con testo e colori piatti, e JPEG per le immagini fotografiche. Evita l’SVG, che la maggior parte dei crawler non accetta per le anteprime, e fai attenzione ai formati più recenti che alcune piattaforme potrebbero non leggere. Tieni il file leggero, così il crawler lo scarica in fretta; una scheda progettata raramente deve essere pesante. Un tocco di grana evita il banding del gradiente quando una piattaforma lo ricomprime.

In Gradiently, Anteprima link 1200×630 è una delle dimensioni predefinite, quindi puoi impaginare di nuovo un post come anteprima con copia nei formati e mantenere un solo look tra post e link. Per un lancio, l’immagine OG è una voce di una lista più lunga; le grafiche per il lancio ha la checklist completa.