Il protocollo Open Graph (OG) è un insieme di meta tag originariamente creato da Facebook nel 2010. Questi tag risiedono nel <head> del tuo HTML e indicano alle piattaforme di social media esattamente come visualizzare i tuoi contenuti quando qualcuno condivide un link. Senza questi tag, le piattaforme cercano di assemblare un'anteprima in base a ciò che riescono a trovare sulla pagina, e il risultato di solito non è ottimale.
Dove appaiono i tag Open Graph in pratica
Quando qualcuno incolla un link in Facebook, LinkedIn, WhatsApp, Telegram, Slack o Discord, la piattaforma recupera la pagina e legge i tag OG. Questi tag determinano il titolo dell'anteprima, la descrizione e l'immagine che appaiono nel post o nella visualizzazione del messaggio. Questa anteprima è spesso la prima impressione che le persone hanno dei tuoi contenuti, quindi è importante controllarla. Un link con un'immagine chiara e un titolo convincente riceve significativamente più clic rispetto a un link con una miniatura rotta o una descrizione generica estratta dal piè di pagina.
Tag Open Graph obbligatori vs opzionali
La specifica Open Graph definisce quattro proprietà obbligatorie:
og:title: il titolo del tuo contenuto come dovrebbe apparire nell'anteprima social.og:type: il tipo di contenuto. Predefinito a "website" se omesso.og:image: l'URL dell'immagine da mostrare nell'anteprima.og:url: l'URL canonical della pagina.
Inoltre, diversi tag opzionali sono comunemente usati:
og:description: un riepilogo di una o due frasi della pagina.og:site_name: il nome del tuo sito web complessivo (ad es. "InspectWP").og:locale: la lingua e la regione (ad es.en_US,it_IT).og:video: un URL a un file video associato al contenuto.
Comprendere i valori di og:type
Il tag og:type indica alle piattaforme che tipo di contenuto rappresenta la pagina. I valori più comuni sono:
- website: usalo per la tua homepage e le pagine generali. Questo è il valore predefinito se non viene specificato alcun tipo.
- article: usalo per post di blog, articoli di notizie e qualsiasi contenuto scritto con una data di pubblicazione. Questo tipo sblocca tag aggiuntivi come
article:published_time,article:authorearticle:section. - product: utilizzato dai siti di e-commerce per descrivere i prodotti. Supporta tag come
product:price:amounteproduct:price:currency. - profile: per le pagine che rappresentano una persona. Supporta
profile:first_nameeprofile:last_name.
Requisiti e best practice per og:image
L'immagine di anteprima è la parte più prominente visivamente di una condivisione social, quindi è importante farla bene. Ecco le specifiche:
- Dimensione minima: Facebook consiglia almeno 1200 x 630 pixel per schermi ad alta risoluzione. Le immagini inferiori a 600 x 315 pixel potrebbero non essere visualizzate correttamente o apparire come una piccola miniatura invece di una card grande.
- Proporzioni: 1,91:1 è lo standard per le anteprime di link grandi sulla maggior parte delle piattaforme. Le immagini quadrate (1:1) funzionano anche, ma producono un layout diverso.
- Dimensione del file: mantieni le immagini sotto gli 8 MB. Facebook e LinkedIn possono essere lenti nel renderizzare immagini molto grandi.
- Formato: JPEG e PNG sono supportati universalmente. WebP funziona su alcune piattaforme ma non su tutte.
- Usa sempre URL assoluti: l'URL dell'immagine deve iniziare con
https://. I percorsi relativi non funzionano, perché la piattaforma social recupera l'immagine dai propri server.
Come funziona il Facebook Sharing Debugger
Facebook memorizza in cache i tuoi dati OG in modo aggressivo. Se aggiorni i tuoi tag OG, l'anteprima vecchia potrebbe ancora apparire quando qualcuno condivide il tuo link. Il Facebook Sharing Debugger (developers.facebook.com/tools/debug/) ti consente di inserire un URL e vedere esattamente cosa Facebook legge da esso. Puoi cliccare su "Scrape Again" per forzare Facebook a recuperare nuovamente la pagina e aggiornare la cache. Questo strumento è anche prezioso per risolvere problemi come immagini mancanti, titoli errati o tag che non vengono analizzati correttamente. LinkedIn ha uno strumento simile chiamato Post Inspector.
Open Graph e Twitter Cards
Twitter (ora X) ha sviluppato il proprio sistema di meta tag chiamato Twitter Cards. I tag Twitter Card utilizzano l'attributo name invece di property:
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Page Title" />
<meta name="twitter:description" content="A brief description" />
<meta name="twitter:image" content="https://example.com/image.jpg" />La buona notizia è che Twitter ricade sui tag Open Graph quando mancano i tag Twitter Card. Quindi se hai og:title ma non twitter:title, Twitter usa il titolo OG. Il tag twitter:card stesso, tuttavia, non ha un equivalente OG, quindi dovresti sempre includere almeno questo tag specifico di Twitter. Impostarlo su summary_large_image produce l'anteprima visivamente più attraente, con un'immagine grande sopra il testo.
WordPress e la generazione di tag Open Graph
WordPress core non include i tag Open Graph per impostazione predefinita. Hai bisogno di un plugin per aggiungerli. Le opzioni più popolari sono:
- Yoast SEO: genera automaticamente tutti i tag OG essenziali in base al titolo del post, all'estratto e all'immagine in evidenza. Ti consente di sovrascrivere il titolo, la descrizione e l'immagine OG per post tramite la scheda "Social" nell'editor. Genera anche tag Twitter Card.
- Rank Math: simile a Yoast con generazione automatica di OG e sovrascritture per post. Include una funzione di anteprima social che mostra come apparirà il post quando viene condiviso.
- The SEO Framework: un'alternativa leggera che genera tag OG e Twitter con configurazione minima. Meno opzioni di configurazione ma valori predefiniti solidi.
Se utilizzi un page builder come Elementor o un plugin di caching, assicurati che i tag OG siano presenti nell'output HTML in cache. Alcune configurazioni di caching aggressive possono rimuovere meta tag dalla sezione <head>.
Tag Open Graph per prodotti WooCommerce
Per i negozi WooCommerce, i tag OG diventano ancora più importanti perché le anteprime dei prodotti influenzano direttamente le decisioni di acquisto. Una pagina prodotto ben configurata dovrebbe avere og:type impostato su "product", insieme al nome del prodotto come titolo, una descrizione convincente e l'immagine principale del prodotto. I plugin SEO come Yoast WooCommerce SEO o Rank Math possono generarli automaticamente. Il prezzo e la disponibilità del prodotto possono anche essere inclusi tramite ulteriori tag OG, che alcune piattaforme mostrano nell'anteprima.
Errori comuni con Open Graph
- Dimensione dell'immagine errata: usare un'immagine inferiore a 600 x 315 pixel risulta in una piccola miniatura invece di un'anteprima a card grande. Usa sempre i 1200 x 630 pixel raccomandati.
- Tag og:image mancante: senza un tag immagine, le piattaforme non mostrano alcuna immagine o scelgono un'immagine casuale dalla pagina, che potrebbe essere un annuncio della barra laterale o un logo che appare terribile come anteprima.
- URL relativi: tutti gli URL OG devono essere assoluti.
/images/photo.jpgnon funzionerà; deve esserehttps://example.com/images/photo.jpg. - Tag OG duplicati: avere due tag
og:titlesulla stessa pagina (ad esempio da due plugin diversi) causa comportamenti imprevedibili. Controlla il sorgente della tua pagina per assicurarti che ogni tag OG appaia solo una volta. - Non testare dopo le modifiche: i dati OG vengono memorizzati in cache dalle piattaforme social. Dopo aver aggiornato i tag, svuota sempre la cache utilizzando il Facebook Debugger o LinkedIn Post Inspector per verificare che i nuovi tag funzionino.
Cosa controlla InspectWP
InspectWP scansiona la sezione <head> della tua pagina e riporta quali tag Open Graph e Twitter Card sono presenti. Mostra i valori esatti per ciascun tag, rendendo facile verificare che titoli, descrizioni e URL delle immagini siano corretti. I meta tag dei social media mancanti vengono segnalati come un'opportunità di miglioramento SEO, poiché le pagine senza tag OG in genere ricevono meno engagement quando vengono condivise sulle piattaforme social.