Dimensione dell'immagine Open Graph: un file unico per ogni piattaforma

Un'immagine a 1200 per 630 pixel, in PNG o JPEG, sotto circa 1 MB, con il contenuto importante all'interno della zona centrale di 1080 per 600. Quel file si visualizza correttamente su Facebook, LinkedIn, X, Slack, Discord, WhatsApp e iMessage, il che è l'intera risposta alla domanda sulla dimensione dell'immagine Open Graph per quasi ogni sito.

Le dimensioni sono la parte facile. Di solito non sono nemmeno ciò che si rompe. Ciò che si rompe è il testo posizionato troppo vicino a un bordo che una piattaforma taglia, un'immagine che non si aggiorna mai perché un crawler ha memorizzato nella cache quella vecchia mesi fa, oppure una scheda che si visualizza senza alcuna immagine perché il file era di 4 MB su un'origine lenta. La domanda sulla dimensione dell'immagine OG è in realtà tre domande, e solo una di esse riguarda i pixel. Questa guida copre le specifiche, la zona sicura, il comportamento della cache che fa pensare alle persone che i loro tag siano sbagliati, e come si risolvono le anteprime quando ciò che viene condiviso è un link breve. Se la tua anteprima è completamente assente piuttosto che tagliata male, anteprima del link non visualizzata è la guida diagnostica.

La dimensione, e perché è quella dimensione

Il rapporto 1.91:1 proviene dalla scheda di link di Facebook, ed è rimasto tale perché tutti gli altri hanno adottato un layout compatibile invece di inventarne uno proprio. Il protocollo Open Graph stesso non dice nulla sui pixel; definisce og:image come un URL e lascia il rendering al consumatore, il che è esattamente il motivo per cui si è formato uno standard di fatto attorno a un'unica dimensione conveniente.

Le linee guida di Facebook sulla condivisione delle immagini fissano il minimo a 200 per 200 e raccomandano il file più grande per i display ad alta risoluzione, e X documenta separatamente il markup della scheda, che è l'unico caso in cui serve un tag specifico della piattaforma invece di un file specifico della piattaforma.

La zona sicura di cui nessuno parla

Una scheda viene raramente mostrata nel rapporto in cui l'hai progettata. Le app di chat tagliano verso il quadrato per la miniatura, alcuni feed rifilano i lati su viewport stretti, e un angolo arrotondato divora gli ultimi pixel di un logo posizionato nell'angolo.

Mantieni tutto ciò che deve sopravvivere all'interno della zona centrale di 1080 per 600, centrato, e tratta la banda esterna come una decorazione che puoi permetterti di perdere. In pratica questo significa che il titolo si posiziona centro-sinistra invece che a ridosso del bordo, il logo vive dentro il margine invece che nell'angolo, e non c'è alcun bordo sottile, perché un bordo è l'unico elemento di design che appare rotto nell'istante in cui viene tagliato.

Anche il contrasto conta più di quanto sembri. Le schede si visualizzano su bianco in un client e su un quasi-nero in un altro, quindi un'immagine che si affida allo sfondo circostante per la separazione perde i suoi bordi nella metà di essi.

I tag intorno all'immagine

Quattro tag fanno il lavoro. Due di essi sono quelli che le persone saltano.

<meta property="og:image" content="https://example.com/og/spring-launch.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta
  property="og:image:alt"
  content="Spring launch: 30 percent off through May"
/>
<meta name="twitter:card" content="summary_large_image" />

L'URL deve essere assoluto, incluso schema e host, perché il crawler legge il tag senza alcun contesto di pagina con cui risolvere un percorso relativo. Larghezza e altezza permettono alla piattaforma di riservare lo spazio giusto prima che il file arrivi, il che è la differenza tra una scheda che appare istantaneamente e una che si riorganizza. E og:image:alt è il tag di accessibilità che non costa nulla ed è assente quasi ovunque.

Perché la tua nuova immagine non verrà mostrata

Questo è quello che genera i ticket di supporto. Hai corretto l'immagine, puoi vedere il nuovo file al suo URL, e la scheda mostra ancora il design del trimestre scorso.

I crawler social memorizzano nella cache in modo aggressivo, e non sono per niente discreti al riguardo. Una volta che un URL è stato scansionato, la versione memorizzata è quella che viene renderizzata per le condivisioni successive, a volte per settimane, e modificare il tuo HTML non comunica loro in alcun modo di guardare di nuovo. Tre vie d'uscita, nell'ordine in cui le proverei:

• Forza una nuova scansione con lo strumento della piattaforma stessa: sia il Facebook Sharing Debugger sia il LinkedIn Post Inspector recuperano nuovamente la pagina su richiesta.
• Pubblica l'immagine con un nuovo nome file, il che è un URL diverso e quindi non ha alcuna voce in cache. Questa è quella affidabile.
• Cambia l'URL condiviso stesso, il che è banalmente facile quando ciò che stai condividendo è un link breve che controlli invece di un indirizzo di pagina permanente.

Prima di pubblicare qualsiasi cosa, il checker Open Graph ti mostra la scheda esattamente come la costruirebbe un crawler, il che richiede dieci secondi e ti risparmia l'imbarazzante ricondivisione.

Le anteprime quando condividi un link breve

Un link breve non ha tag Open Graph propri e non ne ha bisogno. Il crawler segue il reindirizzamento, atterra sulla destinazione, e costruisce la scheda dai tag presenti lì, il che significa che un URL accorciato eredita qualunque anteprima abbia la pagina di destinazione. Se la scheda è sbagliata, sono i tag sulla destinazione a essere sbagliati.

Due cose dipendono davvero dal livello del link. Il reindirizzamento deve essere seguibile da un crawler, il che è il caso normale per un salto lato server ma non per un reindirizzamento JavaScript, un motivo in più per mantenere la catena corta e lato server. E poiché l'anteprima appartiene alla destinazione, ripuntare un link breve ne cambia anche l'anteprima, il che è una proprietà silenziosamente utile quando una pagina di campagna viene sostituita dopo che il link è già stato condiviso.

Se vuoi il link, la scheda e i dati sui click in un unico posto, avvia un workspace sul tuo dominio e controlla la scheda con lo strumento prima dell'invio invece che dopo.

Una checklist che vale la pena tenere

• 1200 per 630, PNG o JPEG, sotto 1 MB, URL HTTPS assoluto. Questa è l'intera decisione sulla dimensione dell'immagine OG.
• Niente di importante al di fuori della zona centrale di 1080 per 600, nessun bordo sottile.
• og:image:width, og:image:height e og:image:alt presenti.
• twitter:card impostato su summary_large_image se vuoi la scheda grande su X.
• Nuova immagine, nuovo nome file, poi nuova scansione prima di annunciare qualsiasi cosa.

Sistema bene queste cinque cose una volta, inseriscile come template nell'head della tua pagina, e le immagini Open Graph smettono di essere qualcosa a cui pensare. Il che è la giusta quantità di attenzione da dedicare loro.

Leggi la serie cornerstone

Questo articolo si trova nel cluster tutorial. Per le anteprime che falliscono del tutto invece di tagliarsi male, anteprima del link non visualizzata è la soluzione piattaforma per piattaforma, e come creare un link cliccabile copre il livello sottostante.

Correlati sul Blog

• Anteprima del link non visualizzata? Cause e come correggerla
• Accorciare un link per X (Twitter): cosa gli fa t.co
• Come tracciare i link dei social media: click per canale
• Cos'è un link brandizzato, e perché converte meglio
• Come reindirizzare un URL: sei modi, e quando ognuno è quello giusto
• Link brevi con dominio personalizzato: DNS, TLS e l'edge