# Immagini OG dinamiche: genera in automatico le anteprime dei link [Canonical HTML page](https://gradiently.design/it/guide/dynamic-og-images) Fare a mano un’immagine di anteprima per ogni pagina non regge la scala, e una sola immagine generica per tutto il sito spreca l’immagine più vista che hai. Meglio generarle. ## The short version - Un’immagine OG dinamica è un’immagine di anteprima Open Graph generata in automatico per ogni pagina, di solito dal suo titolo, dalla categoria e da uno sfondo coerente del brand. - La dimensione standard è 1200 × 630 pixel, e la pagina deve indicare l’immagine con un URL assoluto nel tag og:image. - Puoi generare le immagini OG una volta sola in fase di build, che costa meno, oppure su richiesta, che va bene per le pagine i cui dati cambiano, purché il risultato sia messo in cache. - Le piattaforme mettono in cache le immagini di anteprima per ogni URL, quindi cambiare un’immagine di solito significa cambiarne l’indirizzo o chiedere alla piattaforma di rileggere la pagina. - Progetta il template per una miniatura: un titolo breve in caratteri grandi, margini generosi e uno sfondo che resti riconoscibile anche in piccolo. Un’**immagine OG dinamica** è un’immagine di anteprima del link che il tuo sito genera per ogni pagina, invece di farla disegnare a mano a qualcuno. Quando una pagina viene condivisa su LinkedIn, su Slack o in un’app di chat, la piattaforma legge l’immagine indicata nel tag `og:image` della pagina. Se quell’immagine è costruita dal titolo e dai dati della pagina stessa, ogni articolo, prodotto e profilo ottiene un’anteprima che dice esattamente cos’è. Questa guida tratta il design del template, i due modi per generare le immagini, i tag che le collegano, la cache e i test. Per la dimensione in sé e per come le piattaforme ritagliano, vedi la nostra guida alla [dimensione dell’immagine Open Graph](https://gradiently.design/it/guide/open-graph-image-size). ## Perché ogni pagina dovrebbe avere la propria immagine OG L’anteprima è spesso la prima cosa che qualcuno vede della tua pagina, e in un feed affollato è quasi tutto ciò che vede. Una sola card generica con il logo per l’intero sito fa sembrare uguali tutti i link condivisi, quindi nessuno dice cosa c’è dietro. Un’immagine per pagina porta il titolo vero della pagina nella tua identità visiva: riconoscibilmente tua, e abbastanza specifica da meritarsi il clic. Un’immagine di anteprima del link con la scritta Come correggere il banding su uno sfondo sfumato Un template, riempito con il titolo di un articolo… Lo stesso template di anteprima del link con la scritta Scegliere i colori del brand …e con quello di un altro. Abbastanza coerente da riconoscere, abbastanza specifico da cliccare. ## Progettare un template per l’immagine OG Progetta il template come progetteresti una miniatura, perché è così che di solito viene vista. Le anteprime appaiono a una frazione della loro dimensione reale, e alcune app ne mostrano una versione più piccola e ritagliata. Le parole che contano devono sopravvivere a entrambe. 1. **Parti da 1200 × 630** Progetta a dimensione piena, poi controlla a un quarto. Se non riesci a leggere il titolo a 300 pixel di larghezza, è troppo piccolo o troppo lungo. 2. **Usa il titolo, non tutta la pagina** Una riga di testo grande, o due al massimo. I titoli lunghi richiedono una regola: accorciali nei dati, oppure riduci la dimensione del font oltre una certa lunghezza. 3. **Tieni margini ampi** Tieni titolo e logo lontani dai bordi, perché un ritaglio più stretto non li tagli. Circa 60-80 pixel di margine a questa dimensione sono un punto di partenza sensato. 4. **Aggiungi un solo elemento di contesto** Una piccola etichetta per la sezione, l’autore o la data aiuta a collocare il link. Più di una riga in più trasforma un’anteprima in un documento. 5. **Fai portare il brand allo sfondo** Un gradiente o un materiale coerente fa più per la riconoscibilità di un grande logo. Tieni la parte più luminosa e movimentata lontana dalle parole; [testo su un gradiente](https://gradiently.design/it/guide/text-on-gradient) spiega come. ### Anteprima debole - La stessa card con il logo su ogni pagina - Titolo e descrizione interi schiacciati in caratteri piccoli - Testo che tocca i bordi - Una foto movimentata dietro parole bianche ### Anteprima forte - Il titolo vero della pagina, grande - Una breve etichetta di contesto - Margini ampi che sopravvivono a un ritaglio - Uno sfondo calmo del brand con un chiaro contrasto ## Generare le immagini OG in fase di build o su richiesta Ci sono due momenti per creare l’immagine. **In fase di build**, il sito genera una volta sola l’immagine di ogni pagina e la serve come file statico: veloce, economico e ideale per articoli e documentazione. **Su richiesta**, una route disegna l’immagine la prima volta che viene richiesta: adatto alle pagine i cui dati cambiano, come il numero di follower di un profilo o il prezzo di un prodotto. Le immagini su richiesta vanno messe in cache, altrimenti ogni condivisione e ogni visita dei crawler ripete il lavoro. | Approccio | Ideale per | Attenzione a | | --- | --- | --- | | In fase di build | Articoli, documentazione, landing page | Il tempo di build cresce con il numero di pagine | | Su richiesta, in cache | Profili, prodotti, contenuti degli utenti | Imposta gli header di cache; i rendering a freddo sono più lenti | | A mano | Un pugno di pagine chiave | Non scala e resta indietro | La maggior parte dei framework ha un modo per disegnare un’immagine a partire da un markup simile all’HTML. In Next.js, un file `opengraph-image.tsx` accanto a una route genera l’immagine di quella route con `ImageResponse`, e Next aggiunge i meta tag per te. La stessa idea funziona altrove con un browser headless che fa uno screenshot di una pagina template. ```ts // app/guide/[slug]/opengraph-image.tsx import { readFile } from 'node:fs/promises' import { join } from 'node:path' import { ImageResponse } from 'next/og' import { getArticle } from '@/lib/articles' export const size = { width: 1200, height: 630 } export const contentType = 'image/png' export default async function Image({ params }: { params: Promise<{ slug: string }> }) { const { slug } = await params const article = await getArticle(slug) const font = await readFile(join(process.cwd(), 'assets/Inter-SemiBold.ttf')) return new ImageResponse( (
Field Guide
40 ? 60 : 76, lineHeight: 1.1 }}> {article.title}
), { ...size, fonts: [{ name: 'Inter', data: font, weight: 600, style: 'normal' }] }, ) } ``` Un’immagine OG per articolo in Next.js. Il titolo riduce la dimensione quando è lungo, e il font viene caricato come file TTF. > **I generatori di immagini parlano solo una parte del CSS** Le librerie che trasformano il markup in immagini, come quella dietro `ImageResponse`, supportano flexbox e un sottoinsieme del CSS. Le impaginazioni con grid non funzionano, e i font devono essere TTF, OTF o WOFF, non WOFF2. Controlla l’elenco del tuo framework prima di progettare qualcosa che non sa disegnare. ## I tag Open Graph che collegano l’immagine Le piattaforme trovano l’immagine tramite i meta tag nell’head della pagina. L’indirizzo dell’immagine deve essere assoluto, con `https://` e il dominio, perché il crawler lo legge dall’esterno del tuo sito. Dichiarare larghezza e altezza aiuta alcune piattaforme a impaginare l’anteprima prima di aver scaricato l’immagine, e il testo alternativo la descrive a chi usa uno screen reader. ```html ``` I tag che servono a una pagina per un’anteprima grande. `twitter:card` chiede a X il formato con immagine grande. - Open Graph 1200 × 630: 1200 × 630 - Link LinkedIn 1200 × 627: 1200 × 627 - Post su X 1600 × 900: 1600 × 900 Le anteprime dei link stanno vicine a 1,91:1. Un’immagine da 1200 × 630 copre i casi più comuni; un’immagine separata per l’allegato di un post è un altro lavoro. ## Cache e test delle immagini OG Le piattaforme mettono in cache le anteprime, a volte per molto tempo. Se cambi un’immagine ma ne tieni l’indirizzo, le persone possono continuare a vedere quella vecchia. Aggiungi una versione all’indirizzo, come `?v=2`, quando il design cambia, oppure chiedi alla piattaforma di rileggere la pagina. Per le immagini su richiesta, invia gli header di cache in modo che il tuo server e qualsiasi CDN conservino il risultato. - Incolla la pagina nel [Post Inspector](https://www.linkedin.com/post-inspector/) di LinkedIn per vedere l’anteprima e aggiornarne la cache. - Usa lo Sharing Debugger di Meta per Facebook, che può anche rileggere una pagina. - Incolla il link in una bozza di post su X, o in una chat privata su Slack o WhatsApp, per vedere l’anteprima vera senza inviare nulla. - Apri direttamente in un browser l’indirizzo dell’immagine per confermare che restituisca un PNG, della dimensione giusta, senza login. Considera le immagini OG parte di ogni lancio: sono nella lista della checklist [grafiche per il giorno del lancio](https://gradiently.design/it/guide/launch-day-graphics), e l’insieme completo dei formati è in [dimensioni delle immagini per i social](https://gradiently.design/it/guide/social-media-image-sizes). Se progetti le anteprime in Gradiently, la sua API può generare un design salvato come PNG esatto da 1200 × 630, adatto a pipeline e agenti AI che creano immagini per te. ## FAQ ### Cos’è un’immagine OG dinamica? È un’immagine di anteprima Open Graph generata in automatico per ogni pagina, di solito dal titolo e dai dati della pagina su un template coerente del brand, invece che disegnata a mano. ### Che dimensione deve avere un’immagine OG? 1200 × 630 pixel è lo standard. Tieni le parole importanti lontane dai bordi, perché alcune app mostrano una versione più piccola o ritagliata. ### Perché vedo ancora la vecchia anteprima dopo aver cambiato l’immagine OG? Le piattaforme mettono in cache le immagini di anteprima per ogni URL. Cambia l’indirizzo dell’immagine, per esempio con una query di versione, oppure usa l’inspector o il debugger della piattaforma per rileggere la pagina. ### Devo generare le immagini OG in fase di build o su richiesta? La fase di build costa meno e va bene per le pagine che cambiano di rado. Genera su richiesta per le pagine i cui dati cambiano, e metti il risultato in cache così non viene ridisegnato a ogni visita. ### og:image richiede un URL assoluto? Sì. Usa l’indirizzo completo con https e il dominio, perché i crawler leggono il tag dall’esterno del tuo sito.