Quando incolli un link in un messaggio, in un tweet, in un post su LinkedIn o in un canale Slack, la piattaforma genera una scheda di anteprima: un'immagine grande, un titolo, un estratto. Quell'immagine è l'immagine Open Graph (OG) e lavora più del tuo titolo. In un feed che scorre veloce, è la figura a fermare il pollice. Un'anteprima vuota o rotta comunica scarso impegno e viene ignorata.
Ecco come crearne una che si guadagni il clic, alla dimensione giusta, con un testo davvero leggibile.
La dimensione: 1200×630
L'immagine OG standard è di 1200×630 pixel, un rapporto di 1,91:1. Facebook, LinkedIn, Slack, Discord e la maggior parte dei sistemi di anteprima dei link sono costruiti attorno a questa misura. Impostala bene e sei coperto quasi ovunque.
Qualche dimensione correlata torna utile a seconda di dove atterra il link:
| Piattaforma / uso | Dimensione | Rapporto |
|---|---|---|
| Open Graph (predefinita) | 1200×630 | 1,91:1 |
| Twitter/X scheda grande | 1200×628 | ~1,91:1 |
| Miniatura YouTube | 1280×720 | 16:9 |
| Quadrata (feed/IG) | 1080×1080 | 1:1 |
| Storia / verticale | 1080×1920 | 9:16 |
Per un articolo di blog non ti servono tutte queste: 1200×630 è il cavallo di battaglia. Ma se stai preparando anche una miniatura video o un post social quadrato, conviene generare la forma giusta invece di ritagliare male un'unica immagine per farla entrare.
Regole per il testo: leggibile alla dimensione di una miniatura
L'errore che rovina le immagini OG è trattarle come un poster da guardare a schermo intero. Non lo sarà. La maggior parte delle persone vede la scheda a forse un terzo della sua dimensione reale, su un telefono, mentre scorre. Progetta per quello.
- Testo grande, poche parole. Un titolo breve, cinque-otto parole, che resti leggibile quando la scheda si rimpicciolisce. Se devi strizzare gli occhi a dimensione piena, nel feed è illeggibile.
- Contrasto forte. Testo chiaro su sfondo scuro o saturo, o viceversa. Il testo su una foto affollata, senza uno sfondo di supporto, scompare.
- Tieni al centro le cose importanti. Piattaforme diverse ritagliano i bordi in modo leggermente diverso. Tieni testo e loghi lontani dai margini esterni così nulla viene tagliato.
- Un'idea per immagine. L'immagine OG è un'esca, non un riassunto. Titolo, magari un sottotitolo, fine.
Sfondi che fanno risaltare il testo
Un gradiente piatto è la scelta affidabile. Offre al testo una base pulita su cui poggiare, ha un aspetto moderno e non litiga mai con le parole come fa una foto affollata. Un gradiente dallo scuro allo scuro-appena-più-intenso con testo chiaro è quasi a prova di errore.
Lo strumento OG Image è costruito esattamente attorno a questo: scegli un preset di dimensione (OG 1200×630, Twitter, YouTube, quadrata o storia), scegli uno sfondo a gradiente e aggiungi titolo e sottotitolo. Ottieni una scheda di condivisione che si legge chiaramente a qualsiasi dimensione, senza aprire un'app di design completa.
L'HTML che la fa comparire
Creare l'immagine è metà del lavoro. La piattaforma deve sapere dove trovarla. Aggiungi questi tag nell'<head> della pagina:
<meta property="og:image" content="https://yoursite.com/og.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:title" content="Your title">
<meta property="og:description" content="One clear sentence.">
<meta name="twitter:card" content="summary_large_image">
La riga twitter:card impostata su summary_large_image è ciò che ti dà la scheda grande su X invece di una miniatura minuscola. Gli URL assoluti (con https://) contano: i percorsi relativi spesso non si risolvono quando uno scraper recupera la tua pagina.
Dopo aver pubblicato, provala. Incolla il tuo URL nel debugger di anteprima dei link di una piattaforma (Sharing Debugger di Facebook, Post Inspector di LinkedIn) per confermare che l'immagine si carichi e per svuotare eventuali vecchie versioni in cache. Le piattaforme mettono in cache le anteprime in modo aggressivo, quindi se hai aggiornato l'immagine e vedi ancora quella vecchia, il pulsante di ri-scansione del debugger è la soluzione.
Creala, non caricarla
Tutto gira nel tuo browser: l'immagine viene composta localmente con Canvas e nulla viene caricato su un server. È gratis, senza registrazione, senza filigrana stampata sulla tua scheda di condivisione, e funziona offline dopo la prima visita. Genera la 1200×630, collega i meta tag, passala una volta in un debugger e i tuoi link iniziano a fare la loro parte.