Social card: tag Open Graph e immagine di condivisione

Che cos’è un’anteprima del link

Quando qualcuno condivide un link in un social network o in un’app di messaggistica, la piattaforma legge la pagina e crea una piccola scheda: un’immagine, un titolo, un breve testo e il dominio. La maggior parte delle piattaforme legge per questo i tag del protocollo Open Graph, elementi meta nell’head della pagina. X, ex Twitter, legge anche i propri tag che iniziano con twitter:. Ogni piattaforma disegna la scheda a modo suo e decide quanto testo mostrare. Tu decidi cosa dice la pagina alle piattaforme.

I tag di base

Il protocollo Open Graph, pubblicato su ogp.me, indica quattro proprietà che ogni pagina dovrebbe avere: og:title, og:type, og:image e og:url. og:url è l’indirizzo canonico della pagina. Facoltativi ma utili sono og:description, og:site_name e og:locale, la lingua e la regione dei tag, per esempio de_DE.

<meta property="og:title" content="Saldi estivi: tutte le tazze scontate">
<meta property="og:type" content="article">
<meta property="og:url" content="https://example.com/blog/summer-sale">
<meta property="og:image" content="https://example.com/img/summer-sale-1200x630.jpg">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Sei tazze blu su un tavolo di legno">
<meta property="og:description" content="Fino al 31 agosto: prezzi ridotti su tazze e piatti.">
<meta property="og:site_name" content="Negozio Esempio">
<meta name="twitter:card" content="summary_large_image">

Scrivi ogni indirizzo per intero, con https://. Il protocollo definisce un indirizzo come un URL che usa http:// o https://, quindi un percorso come /img/sale.jpg non è un valore valido. og:url dovrebbe corrispondere al link canonico della pagina. Se un tag compare due volte con valori diversi, il protocollo dà la precedenza al primo.

L’immagine di condivisione

La maggior parte delle anteprime mostra l’immagine in formato largo. Un’immagine con un rapporto di circa 1,91:1, per esempio 1.200 × 630 pixel, è spesso consigliata e si adatta alla maggior parte delle schede senza ritagli. Le immagini quadrate vengono spesso tagliate in alto e in basso, quindi tieni i contenuti importanti al centro. Per Google Discover, Google consiglia immagini larghe almeno 1.200 pixel, un’anteprima grande consentita con l’impostazione max-image-preview:large, e un’immagine indicata con og:image o con markup schema.org. Google sconsiglia anche immagini generiche come il logo del sito.

og:image:width e og:image:height indicano la dimensione dell’immagine in pixel. og:image:alt descrive cosa c’è nell’immagine, non è una didascalia. Il protocollo dice che una pagina con og:image dovrebbe indicare anche og:image:alt.

Titolo e descrizione

og:title può essere diverso dall’elemento title. Non ha bisogno del nome del sito, perché lo porta og:site_name. Le piattaforme tagliano i testi lunghi alla loro lunghezza, quindi metti prima le parole importanti. I tag Open Graph contano anche oltre i social network. Google indica il contenuto di og:title tra le fonti dei link del titolo nei risultati di ricerca, considera og:site_name per il nome del sito e cita og:image come uno dei modi per indicare un’immagine preferita.

Tag per X

Il tag twitter:card sceglie il tipo di scheda. Il valore summary_large_image chiede un’immagine grande e larga, summary una piccola. Se la tua pagina ha già i tag Open Graph, aggiungere twitter:card spesso basta. Le pagine per sviluppatori di X non è stato possibile leggerle per questa guida, quindi controlla lì le regole attuali prima di fare affidamento su un dettaglio.

Una scheda per ogni pagina

Molti siti impostano lo stesso titolo e la stessa immagine per ogni pagina, spesso tramite il tema. Così ogni link condiviso sembra uguale. Dai a ogni pagina importante i propri og:title, og:description e og:image: a una pagina prodotto la foto del prodotto, a un articolo la sua immagine principale. Per og:type il protocollo usa, tra gli altri tipi, website per una pagina generica e article per un articolo. Un sistema di negozio o un CMS può compilare questi tag automaticamente dal titolo, dal riassunto e dall’immagine principale di ogni pagina. Dopo una modifica, controlla una pagina per ogni modello.

Perché l’anteprima non cambia

Molte piattaforme salvano una scheda dopo averla creata. Se in seguito cambi l’immagine o il titolo, le persone possono continuare a vedere la vecchia scheda per un po’. Un nuovo nome di file per una nuova immagine aiuta, perché la piattaforma vede allora un nuovo indirizzo. Alcune piattaforme offrono uno strumento che recupera di nuovo la pagina.

Prima di condividere una pagina

• og:title, og:type, og:image e og:url sono presenti, e og:url è l’indirizzo canonico?
• Ogni indirizzo è completo, con https://?
• L’immagine è abbastanza larga, si carica, e i contenuti importanti sono al centro?
• og:image:alt, og:image:width e og:image:height sono impostati?
• C’è un tag twitter:card, e il titolo è abbastanza breve?

Lavorare con Do4U

Il Controllo social card mostra come appare una pagina quando il suo link viene condiviso e controlla i tag dietro l’anteprima. Inserisci un indirizzo. Do4U legge la pagina e l’inizio della sua immagine di condivisione. Il codice raccoglie i tag Open Graph, i tag delle card Twitter/X e i fallback, cioè il titolo, la meta description e la prima immagine, oltre al link canonico e alla lingua. Legge dal file il formato e la dimensione reali dell’immagine e li confronta con i tag. Ricevi un’anteprima neutra, una tabella di tutti i tag, risultati con una breve motivazione e tag suggeriti da copiare. I tag che una pagina imposta solo con JavaScript non vengono visti. Non si usa l’AI, e il controllo è gratuito, con un limite giornaliero.

Do4U trova indicazioni, tu controlli e decidi. L’anteprima è uno schizzo neutro: come una piattaforma mostra il link lo decide la piattaforma.