Guida all'anteprima social
Immagini Open Graph: testa il link prima di pubblicare
Le immagini Open Graph determinano l'aspetto della tua pagina quando qualcuno condivide un link. Questa guida mostra dimensioni, tag, controlli di design, cache e checklist per anteprime efficaci.
Risposta rapida
Scegli una immagine Open Graph e testa il link prima della condivisione
Per la maggior parte delle pagine, inizia con un'immagine 1200 x 630, tieni testo e loghi lontani dai bordi, usa URL assoluti HTTPS e testa l'URL finale con gli strumenti di debug. Questo flusso semplice evita anteprime rotte.
Ruolo dell'anteprima
Tratta l'immagine Open Graph come un asset della pagina
L'immagine Open Graph non è decorativa. Rappresenta la pagina quando i crawler creano una scheda link per social, chat e strumenti di lavoro. Deve corrispondere a titolo, descrizione, argomento visibile e immagine dei dati strutturati.
Invoglia al clic
Immagine, titolo e descrizione formano la prima impressione prima che il visitatore arrivi alla tua pagina.
Deve corrispondere al contenuto
Un'immagine di anteprima efficace rispecchia il titolo della pagina, l'argomento visibile e la promessa principale all'utente, evitando grafiche generiche del brand.
Fa parte dei dati SEO
Immagini Open Graph, Twitter card, URL canonici e JSON-LD devono descrivere la stessa pagina.
Serve una regola di denominazione
Un nome file chiaro e una regola di aggiornamento evitano cache obsolete e il ritorno di immagini di campagne vecchie.
Piano dimensioni
Scegli dimensioni che resistano alle anteprime reali
Le piattaforme ritagliano e memorizzano le anteprime in modo leggermente diverso. Un file 1200 x 630 è un buon default per Open Graph, ma è meglio progettare con un'area sicura centrata e testare l'URL finale sulle piattaforme rilevanti.
| Piattaforma o uso | Piano pratico per l'immagine | Attenzione a | Controllo pubblicazione |
|---|---|---|---|
| Open Graph generale | Usa 1200 x 630 come default pratico per un'immagine di condivisione grande. | Le immagini piccole possono apparire sfocate o come miniature più piccole. | Verifica l'URL finale con il debugger della piattaforma prima di condividere. |
| Facebook e LinkedIn | Usa la stessa immagine in stile 1,91:1 a meno che la pagina non richieda un asset specifico per piattaforma. | I bordi possono essere ritagliati diversamente in feed e dispositivi vari. | Tieni testo e loghi importanti nell'area sicura centrale. |
| Scheda grande X | Usa summary_large_image e mantieni il visual centrato; X supporta immagini larghe per schede grandi. | Testo piccolo e dettagli ai bordi possono sparire se la scheda viene ritagliata o ridimensionata. | Imposta twitter:image e testa con gli strumenti X card. |
| App di chat e strumenti di lavoro | Mantieni il file leggero e il design semplice perché le anteprime appaiono spesso in riquadri compatti. | Screenshot affollati, titoli lunghi e basso contrasto diventano rapidamente illeggibili. | Incolla il link finale negli strumenti usati dal tuo pubblico. |
Mantieni il messaggio principale al centro dell'immagine. I bordi sono rischiosi perché feed, anteprime chat e layout mobili possono ritagliare diversamente.
HTML
Imposta i tag necessari ai crawler prima della pubblicazione della pagina
I tag Open Graph vanno nell'head HTML. Usa URL immagine assoluti, dichiara larghezza e altezza, aggiungi alt utile e mantieni URL canonico coerente con la pagina condivisa.
<meta property="og:type" content="article">
<meta property="og:title" content="Your clear page title">
<meta property="og:description" content="A short description that matches the page.">
<meta property="og:url" content="https://example.com/guide/">
<meta property="og:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:secure_url" content="https://example.com/images/guide-og-1200x630.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Short description of the preview image">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="https://example.com/images/guide-og-1200x630.jpg">
<meta name="twitter:image:alt" content="Short description of the preview image">| Tag | Perché è importante | Errore frequente |
|---|---|---|
| og:image | Indica ai crawler l'immagine che deve rappresentare la pagina. | Usare un percorso relativo o un'immagine bloccata da login, reindirizzamenti o regole robots. |
| og:image:width / og:image:height | Comunica alle piattaforme la dimensione dell'immagine prima che la scarichino e analizzino. | Omettere le dimensioni e lasciare che ogni crawler indovini come mostrare l'anteprima. |
| og:image:alt | Descrive l'immagine di anteprima per l'accessibilità e fornisce più contesto ai crawler. | Ripetere il titolo della pagina invece di descrivere ciò che si vede nell'immagine. |
| og:url | Collega l'anteprima all'URL canonico della pagina da condividere. | Usare un URL di tracking, staging o con cultura errata come identità permanente della pagina. |
| twitter:card / twitter:image | Fornisce a X un'istruzione esplicita per scheda grande e un'immagine opzionale specifica per piattaforma. | Assumere che X mostri sempre l'immagine Open Graph esattamente come altre piattaforme. |
Se usi Blazor, il Componente metadata SEO per Blazor mantiene insieme tag Open Graph, Twitter card, URL canonici e metadati JSON-LD.
Regole di design
Progetta prima per una scheda piccola nel feed
La maggior parte non vede l'immagine completa, ma una scheda compressa in feed, messaggi o anteprime. Vincono layout semplici: soggetto chiaro, contrasto leggibile, niente testo minuscolo.
Flusso di lavoro
Un flusso di lavoro semplice per ogni pagina importante
- 1
Scrivi la promessa dell'anteprima
Decidi cosa deve comunicare la scheda a colpo d'occhio: argomento, vantaggio, prodotto o angolazione dell'articolo.
- 2
Crea l'immagine con il rapporto previsto
Usa 1200 x 630 per il file predefinito e mantieni il contenuto importante centrato.
- 3
Ottimizza il file
Usa JPG o PNG per l'immagine social, mantieni il file abbastanza piccolo ed evita danni visibili da compressione.
- 4
Imposta metadati e schema
Aggiorna insieme tag Open Graph, Twitter card, URL canonico e riferimenti immagine JSON-LD.
- 5
Pubblica con un nome file stabile
Usa un nome file significativo e cambialo quando sostituisci l'immagine se le cache della piattaforma potrebbero mantenere la versione vecchia.
- 6
Testa l'URL finale
Esegui l'URL pubblico della pagina negli strumenti di debug e verifica l'anteprima reale, non solo il codice sorgente.
Suggerimento
Usa PixelPress dopo aver deciso la dimensione dell'anteprima
Quando il piano immagine nomina i file finali, PixelPress può aiutare con la conversione locale in WebP o AVIF. Mantieni gli originali intatti, rivedi l'output e aggiorna l'URL Open Graph.
Debug
Aggiorna le cache delle piattaforme prima di fidarti dell'anteprima
Le piattaforme social memorizzano in cache i dati delle anteprime. Se sostituisci un'immagine mantenendo lo stesso URL, la piattaforma può mostrare l'anteprima vecchia. Usa gli strumenti ufficiali e, se serve, cambia nome file o aggiungi un URL versionato.
Lista di controllo
Checklist immagine Open Graph prima della pubblicazione
Usa questa lista prima che un articolo, pagina prodotto, strumento o landing page vada online. Aiuta a individuare problemi di anteprima costosi da correggere dopo la condivisione.
Domande frequenti
Qual è la dimensione ideale per un'immagine Open Graph?
Usa 1200 x 630 come default pratico per la maggior parte delle anteprime Open Graph. È abbastanza grande per schermi ad alta densità e vicino al formato 1,91:1 comune. Testa comunque l'URL finale perché ogni piattaforma può ritagliare o memorizzare in cache diversamente.
Posso usare la stessa immagine Open Graph per ogni pagina?
Puoi farlo, ma di solito è meno efficace. Un'immagine generica del brand è meglio di nessuna immagine, ma articoli importanti, pagine prodotto e strumenti dovrebbero avere un'anteprima che corrisponda alla pagina specifica.
Perché la mia vecchia immagine Open Graph continua a mostrarsi?
La causa più comune è la cache della piattaforma. Usa Facebook Sharing Debugger, LinkedIn Post Inspector o strumenti X card per aggiornare l'URL. Se l'immagine vecchia persiste, pubblica la nuova con nome file o URL versionato.
Qual è la differenza tra og:image e twitter:image?
og:image è l'immagine standard Open Graph usata da molte piattaforme. twitter:image è specifica per le schede X. Se fornisci twitter:image, X la usa invece di og:image.
L'immagine JSON-LD deve corrispondere a quella Open Graph?
Non deve essere identica, ma deve raccontare la stessa storia della pagina. Metadati di ricerca, tag Open Graph, Twitter card e JSON-LD non devono puntare a immagini non correlate o obsolete.
Dove si inserisce PixelPress nelle immagini Open Graph?
PixelPress si usa dopo aver deciso dimensioni, nome file e ruolo dell'immagine. Aiuta a convertire i file finali localmente mantenendo gli originali intatti. Serve comunque metadata corretti e test anteprima.