Per il primo anno in cui ho gestito il blog di SEOJuice, non ho pensato minimamente alle immagini Open Graph. Pubblicavamo articoli, li condividevamo su LinkedIn e Twitter, e andavamo avanti. Le anteprime mi sembravano a posto — o almeno così credevo, perché in realtà non avevo mai controllato cosa vedessero gli altri quando cliccavano su "Condividi".
Poi un cliente mi ha mandato uno screenshot di un nostro articolo condiviso nello Slack della sua azienda. L'anteprima mostrava il nostro logo a 50x50 pixel, stirato dentro un rettangolo grigio. Il titolo era troncato. Sembrava completamente sballato. Quel post ci aveva richiesto due giorni di lavoro, e l'anteprima social lo faceva sembrare spam.
Ho passato un weekend ad aggiungere immagini Open Graph personalizzate ai nostri 20 articoli principali. Nel giro di un mese, il CTR dai social su quei post è passato da una media di 1.8% a 4.1%. È un miglioramento di 2.3x ottenuto con, onestamente, circa 15 minuti di lavoro per post. (Devo precisarlo: sono dati nostri, presi da LinkedIn e dagli analytics di Twitter, non uno studio controllato. I tuoi risultati varieranno in base al pubblico e alla piattaforma.)
Open Graph è un protocollo creato da Facebook nel 2010 che ti permette di controllare come appaiono le tue pagine quando vengono condivise sui social media. L'immagine Open Graph è l'anteprima visiva — la grande immagine che compare nell'anteprima del link su Facebook, Twitter/X, LinkedIn, Slack, WhatsApp, Discord o qualsiasi piattaforma supporti le anteprime dei link. Senza tag OG, le piattaforme provano a dedurre quale immagine usare. Con i tag OG, decidi tu come viene mostrato il tuo contenuto.
Ogni piattaforma legge i tag OG, ma li visualizza in modo diverso. L'ho imparato nel modo più fastidioso possibile, quando un'anteprima perfettamente valida su Facebook è comparsa tagliata su LinkedIn. Questa è la tabella di riferimento che tengo sempre nei preferiti:
| Piattaforma | Dimensione consigliata | Rapporto d'aspetto | Formato | Dimensione massima file | Note |
|---|---|---|---|---|---|
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 8 MB | Non mostra immagini sotto i 200x200px. 600x315 è il minimo per l'anteprima grande. | |
| Twitter / X | 1200 x 675 px | 1.78:1 (16:9) | JPEG, PNG, GIF, WebP | 5 MB | Non mostra l'anteprima grande per immagini sotto i 300x157px. Usa twitter:image se impostato, altrimenti usa og:image come fallback. |
| 1200 x 627 px | 1.91:1 | JPEG, PNG | 5 MB | Minimo rigido: 1200x627. Sotto questa soglia, LinkedIn non mostra affatto l'immagine. | |
| 1200 x 630 px | 1.91:1 | JPEG, PNG | 300 KB consigliati | Fa fatica con immagini sopra i 300KB su connessioni mobili lente. Punta a stare sotto i 200KB per una visualizzazione affidabile. | |
| Slack | 1200 x 630 px | 1.91:1 | JPEG, PNG | 5 MB | Espande automaticamente le anteprime dei link nei canali. |
| Discord | 1200 x 630 px | 1.91:1 | JPEG, PNG, GIF | 8 MB | Supporta GIF animate nelle anteprime. |
| iMessage | 1200 x 630 px | 1.91:1 | JPEG, PNG | N/A | Usa i tag OG per le anteprime dei link nelle bolle della chat. |
Il rapporto d'aspetto leggermente più alto di Twitter (16:9 contro 1.91:1) significa che la tua immagine Open Graph 1200x630 potrebbe subire un taglio minimo. Nella pratica, io non ho mai notato differenze reali. Non creare immagini Open Graph separate per ogni piattaforma a meno che tu non stia gestendo una campagna importante in cui ogni pixel conta.
Una cosa che voglio sottolineare perché mi ha fatto perdere tempo: il minimo di LinkedIn è davvero un minimo rigido. Se la tua immagine Open Graph è larga 1199 pixel, LinkedIn non mostra nulla. Non una versione più piccola — nulla. Ho perso mezz'ora a cercare di capire il problema prima di misurare le dimensioni reali dell'immagine.
I tag OG vanno nella sezione <head> del tuo HTML. Ecco il set completo che ti serve per ogni pagina:
<!-- Essential OG Tags -->
<meta property="og:title" content="Your Page Title Here" />
<meta property="og:description" content="A compelling 1-2 sentence summary" />
<meta property="og:image" content="https://yoursite.com/images/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:url" content="https://yoursite.com/your-page/" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="Your Site Name" />
<!-- Twitter-Specific (falls back to OG if not set) -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@yourhandle" />
<meta name="twitter:title" content="Your Page Title Here" />
<meta name="twitter:description" content="A compelling 1-2 sentence summary" />
<meta name="twitter:image" content="https://yoursite.com/images/og/page-name.jpg" />
Dettagli tecnici importanti, la maggior parte dei quali ho sbagliato almeno una volta:
og:image. I percorsi relativi non funzionano sulla maggior parte delle piattaforme. Questo è stato in assoluto l'errore più frequente quando abbiamo impostato tutto la prima volta.og:image:width e og:image:height aiutano le piattaforme a mostrare l'anteprima più velocemente senza dover scaricare prima l'immagine completa.twitter:card su summary_large_image per ottenere l'anteprima con immagine a tutta larghezza. Senza questo, Twitter mostra una miniatura quadrata minuscola. Nella nostra prima implementazione me l'ero perso e non riuscivo a capire perché le anteprime su Twitter fossero così piccole.WordPress: plugin come Yoast SEO, RankMath e SEOPress aggiungono campi per i tag OG nell'editor di ogni post e pagina. Carichi l'immagine Open Graph, compili titolo e descrizione, e il plugin genera i meta tag. Se sei su WordPress, è la strada più semplice.
Next.js / React: usa il componente next/head o la Metadata API (App Router) per impostare i tag OG per singola pagina. Se stai costruendo con l'App Router, l'export dei metadata rende tutto piuttosto lineare.
Siti statici: aggiungi i meta tag direttamente al template HTML. La maggior parte dei generatori di siti statici (Hugo, Eleventy, Jekyll) supporta variabili nel front matter che popolano automaticamente i tag OG.
Shopify / e-commerce: molti temi espongono già i campi base, ma spesso usano la stessa immagine Open Graph per troppe pagine. Vale la pena controllare manualmente pagine prodotto, collezioni e articoli del blog. Una pagina prodotto con un'immagine Open Graph dedicata — invece del solito crop casuale della gallery — tende quasi sempre a fare una figura migliore quando viene condivisa.
Un'immagine Open Graph tecnicamente corretta ma brutta è peggio di non avere alcuna immagine. Ho iterato sul nostro template per immagini Open Graph probabilmente cinque volte, e questo è quello che ho capito che funziona:
Ogni piattaforma ritaglia in modo leggermente diverso. Tieni tutti i contenuti importanti — testo, loghi, elementi visivi chiave — entro l'80% centrale dell'immagine. Significa lasciare almeno 120px di respiro da ogni bordo su una canvas 1200x630. L'ho imparato dopo che LinkedIn ha tagliato via la prima lettera del titolo in una delle nostre immagini Open Graph.
Se la tua immagine Open Graph include testo (e di solito dovrebbe — il titolo dell'articolo o della pagina), fallo grande. Almeno 48px su una canvas larga 1200px. Queste immagini spesso vengono mostrate a 300px di larghezza nei feed mobile. Se non riesci a leggere il testo quando l'immagine è larga 300px, è troppo piccolo. Io lo testo facendo zoom out in Figma fino a circa il 25% — se riesco ancora a leggere l'headline, allora funzionerà.
Usa in modo coerente i colori del brand, i font e il posizionamento del logo. Quando qualcuno vede la tua immagine Open Graph in un feed, dovrebbe riconoscere che è tua ancora prima di leggere il testo. Noi abbiamo creato un template in Canva con i nostri colori e il nostro posizionamento del logo e lo riutilizziamo per ogni post. Ora ci vogliono circa 5 minuti per immagine.
Cosa non funziona: stock photo generiche, il tuo logo da solo su sfondo bianco, o un'immagine che non c'entra nulla con il contenuto. Le ho testate tutte e tre. La gente ci passa sopra ogni volta.
Controllo i tag OG come parte di ogni audit di sito che facciamo con SEOJuice. Gli stessi problemi saltano fuori di continuo:
og:image esplicito, le piattaforme cercano automaticamente un'immagine dalla tua pagina. Il risultato di solito è il tuo logo a 100x100 pixel o un'immagine casuale della sidebar. Controlla le tue pagine con il nostro SEO audit tool — segnala i tag OG mancanti.http://, non verrà mostrata.Testa sempre i tuoi tag OG prima e dopo le modifiche. Io faccio passare ogni post in almeno due di questi strumenti prima della pubblicazione:
| Strumento | Piattaforma | URL | Note |
|---|---|---|---|
| Facebook Sharing Debugger | developers.facebook.com/tools/debug/ |
Svuota anche la cache Open Graph di Facebook. Clicca "Scrape Again" dopo aver aggiornato i tag. | |
| Twitter Card Validator | Twitter / X | cards-dev.twitter.com/validator |
Anteprima di come verrà mostrata la tua card. Pulisce anche la cache di Twitter. |
| LinkedIn Post Inspector | linkedin.com/post-inspector/ |
Controlla e svuota la cache Open Graph di LinkedIn. | |
| OpenGraph.xyz | Multi-platform | opengraph.xyz |
Anteprima su più piattaforme contemporaneamente. Genera anche immagini Open Graph. |
| SEOJuice Screenshot Generator | Creazione | /tools/screenshot-generator/ | Genera automaticamente immagini Open Graph brandizzate dalle tue pagine. |
yoursite.com/page/?v=2. Rimuovila una volta che la cache si è aggiornata.
Qui voglio essere preciso perché questo punto viene spesso esagerato: le immagini Open Graph non influenzano direttamente il ranking su Google. Google non usa il tag og:image come segnale di ranking. Punto.
Però gli effetti indiretti sono reali, e li ho osservati in prima persona sui nostri contenuti:
<img> presenti nella pagina, avere un'immagine Open Graph di alta qualità come fallback non fa male.I dati sul CTR nel settore sono piuttosto convincenti: le pagine con immagini di anteprima social ottimizzate registrano fino al 70% di CTR in più dai social rispetto a pagine senza immagine o con anteprime generate automaticamente. Anche le stime più prudenti parlano di un miglioramento del 20%+ per le pagine che passano da nessuna immagine Open Graph a una ben progettata. I nostri numeri stanno più o meno nel mezzo di quell'intervallo.
No. Un'immagine Open Graph 1200x630 funziona su entrambe. Twitter tecnicamente preferisce 1200x675, ma la differenza di 45 pixel nella pratica è invisibile. Crea immagini specifiche per piattaforma solo se stai gestendo campagne social a pagamento in cui ogni dettaglio conta.
JPEG per fotografie e immagini complesse (dimensione file più piccola). PNG per grafiche con testo, loghi o trasparenza (bordi più nitidi). Per la maggior parte delle immagini Open Graph che combinano testo su uno sfondo, JPEG all'80-85% di qualità ti dà il miglior rapporto tra peso e qualità. È quello che usiamo per tutte le nostre.
Twitter supporta WebP. Facebook e LinkedIn non in modo affidabile. Per la massima compatibilità, resta su JPEG o PNG. Quando ogni piattaforma supporterà WebP in modo stabile, fai pure il passaggio — ma a marzo 2026 non siamo ancora a quel punto.
Solo quando il contenuto cambia in modo significativo. Se aggiorni un articolo e aggiungi "Guida 2026" al titolo, aggiorna anche l'immagine Open Graph per mantenerla coerente. Non aggiornare le immagini Open Graph tanto per farlo — dovrai svuotare le cache su ogni piattaforma, e non vale la seccatura a meno che il contenuto non sia cambiato davvero.
Controlla in quest'ordine: (1) L'URL è assoluto e in HTTPS? (2) L'immagine è davvero accessibile a quell'URL? (3) L'immagine rispetta i requisiti minimi di dimensione? (4) La cache della piattaforma è vecchia? Usa gli strumenti di debug qui sopra per fare diagnosi. Nella mia esperienza, la causa più comune è un URL relativo invece di uno assoluto.
Sì, per le pagine di contenuto (post del blog, articoli, guide). Il titolo sovrapposto a uno sfondo brandizzato è il formato di immagine Open Graph più efficace. Per le pagine prodotto, funziona meglio uno screenshot pulito del prodotto con il tuo logo. L'unica eccezione: non mettere testo su immagini in cui il titolo compare già nell'anteprima del link — alcune piattaforme mostrano entrambe le cose e il risultato è ridondante.
no credit card required