Verifica dei marcatori OGP e dei metadati

Basta incollare il sorgente HTML per convalidare in blocco i metadati del protocollo Open Graph e delle schede di X. Rileva i marcatori mancanti e le immagini og:image indicate con un indirizzo non assoluto, e mostra un'anteprima in forma di scheda di come apparirà il collegamento condiviso su una rete sociale.

Ultimo aggiornamento: 2026-10-18

Esaminare i meta tag che decidono l'aspetto di un link condiviso

Il titolo, la descrizione e l'immagine che compaiono quando un link viene pubblicato su una rete sociale sono decisi dai meta tag Open Graph e Twitter Card scritti nel <head> della pagina. Questo strumento li estrae dall'HTML che incollate, segnala i tag assenti e i valori difettosi, e ne dà un'anteprima assai vicina alla scheda quale apparirà.

Il difetto di gran lunga più comune consiste nello scrivere og:image come percorso relativo. I crawler prelevano l'immagine dai propri server, sicché un percorso come /img/ogp.png non si può risolvere e la scheda arriva priva dell'immagine. Scrivetela sempre come indirizzo assoluto che cominci con https://. L'altra cosa da sapere è che questi servizi conservano in cache ciò che hanno esplorato. Correggere un tag può lasciare in vista il vecchio contenuto, e allora occorre sollecitare un nuovo prelievo tramite lo strumento di diagnostica di ciascun servizio. Notate inoltre che una Twitter Card ripiega sui tag og: là dove non esista un tag twitter:, perciò non serve scriverli entrambi.

Come si usa

Incollate il sorgente HTML Basta il contenuto di <head>, oppure l'intera pagina se vi torna più comodo.
Provate prima gli esempi Sono forniti un buon esempio e uno cattivo, così potete vedere in che cosa differiscano i giudizi prima di cominciare.
Leggete i punti sollevati Vengono segnalati i tag assenti e ogni og:image che non sia un indirizzo assoluto.
Controllate l'aspetto nell'anteprima Vedete come il titolo vada a capo e dove la descrizione venga tagliata prima di pubblicare alcunché.

Consigli per sfruttarlo al meglio

Per og:image la dimensione raccomandata è di 1200 per 630 pixel, con proporzione 1,91 a 1. Le immagini troppo piccole o con proporzioni diverse vengono ritagliate dalla rete sociale con esiti indesiderati.
I programmi di raccolta di Facebook, delle applicazioni di messaggistica e degli strumenti di collaborazione leggono og:title e og:description. Anche le schede di X ripiegano sui marcatori og: corrispondenti quando mancano twitter:title, twitter:description o twitter:image: con i marcatori og: in ordine non serve quindi duplicarli come twitter:. Aggiungete i marcatori twitter: solo se volete che X mostri qualcosa di diverso.
twitter:card non ha un corrispondente og: e indica il tipo di scheda (summary, summary_large_image e così via). La guida ufficiale di X parte proprio dall'indicazione del tipo di scheda, quindi conviene impostarlo esplicitamente.
In og:url indicate l'indirizzo canonico della pagina, assoluto e in HTTPS: eviterete anche che gli indirizzi con parametri siano giudicati contenuto duplicato.
Subito dopo aver modificato i metadati, la condivisione può mostrare ancora l'anteprima memorizzata in precedenza. Aggiornate la memoria con gli strumenti di rilettura offerti da ciascuna piattaforma.

Quando torna utile

Nel verificare un articolo prima della pubblicazione

Se il link appare rovinato una volta uscito, la cache fa sì che correggerlo non rimedi. Guardare prima è la via più sicura.

Nel controllare ciò che produce un modello

Incollate il <head> emesso dal vostro gestore di contenuti e accertate che i tag previsti ci siano.

Nel rivedere un cambio d'immagine

Che un nuovo og:image sia un indirizzo assoluto è proprio il genere di dettaglio che sfugge.

Nel prendere esempio da altri siti

Incollate il sorgente di una pagina che si mostra bene e osservate quali tag si sia presa la briga di porre.

Termini di Open Graph

Og:title: Il titolo mostrato sulla scheda. Può differire da <title>, il che consente di formularlo più breve per le reti sociali.
Og:description: Il testo descrittivo della scheda. Viene tagliato se troppo lungo, perciò mettete davanti la sostanza.
Og:image: L'immagine della scheda. Datela sempre come indirizzo assoluto. Circa 1200 per 630 pixel è una misura comoda.
Og:type: Il genere di pagina. article è consueto per uno scritto e website per tutto il resto.
Twitter:card: La forma della scheda. Porre summary_large_image mostra l'immagine a tutta larghezza.
Og:url: L'indirizzo canonico della pagina. È dove le condivisioni si raccolgono, perciò badate a non scrivervi un indirizzo con parametri di ricerca.

Domande frequenti

La causa più frequente è un indirizzo relativo, come /img/a.png. Poiché molti programmi di raccolta non risolvono gli indirizzi relativi, indicate sempre un indirizzo assoluto che cominci con https://. L'immagine può inoltre non comparire se il servente blocca l'agente del programma di raccolta o se le dimensioni sono troppo piccole.

Sì, perché hanno ruoli diversi: si raccomanda di indicarli entrambi. Il marcatore <title> serve al titolo nei risultati di ricerca e nella scheda del navigatore, mentre og:title serve al titolo della scheda quando la pagina è condivisa. In assenza del secondo molti programmi di raccolta ripiegano sul primo, ma il testo non è necessariamente quello desiderato.

Per gli articoli e le pagine di un diario in rete si raccomanda summary_large_image, che mostra l'immagine in grande. Se basta un'immagine piccola, si usa summary. I valori app e player sono riservati rispettivamente al richiamo di un'applicazione e all'incorporamento di filmati o audio, e non si usano per le pagine ordinarie.

Le piattaforme conservano in memoria l'esito della raccolta e possono continuare a mostrare il contenuto precedente. Occorre chiedere l'aggiornamento con gli strumenti di rilettura che ciascuna mette a disposizione, come il verificatore delle condivisioni o quello delle schede.

Molti programmi di raccolta ripiegano su <title> e sulla descrizione dei metadati per comporre un'anteprima, ma senza immagine il risultato è un modesto insieme di collegamento e testo. Poiché ciò incide sul tasso di clic, si raccomanda di configurare almeno og:title, og:description e og:image.

A proposito — perché è nato il protocollo Open Graph, creato da Facebook per far funzionare il «mi piace»

Il protocollo Open Graph fu definito da Facebook nel 2010 per diffondere il proprio pulsante «mi piace». Le pagine web di allora, condivise su una rete sociale, comparivano nei messaggi con il solo collegamento e il titolo, e il tasso di clic ne soffriva. Facebook pensò che, se la pagina stessa avesse potuto dichiarare come mostrarsi, si sarebbe potuta costruire un'esperienza di condivisione più attraente, e progettò il protocollo aggiungendo all'HTML uno spazio dei nomi proprio, nella forma <meta property="og:xxx">.

È interessante che il protocollo si fondi su RDFa, la specifica del consorzio del web per descrivere i dati strutturati. Riutilizzando uno standard esistente, Facebook poté realizzare una nuova funzione senza la collaborazione dei produttori di navigatori o di altre aziende, semplicemente aggiungendo metadati all'HTML. Questa idea di estendere senza rompere la compatibilità all'indietro si rivelò vincente e il protocollo si diffuse come standard di fatto anche presso altre piattaforme.

Twitter, all'epoca, non lo seguì e adottò uno spazio dei nomi proprio, quello delle schede con il prefisso twitter:. Più che una necessità tecnica, vi contribuì probabilmente la riluttanza ad adottare tale e quale una specifica nata in casa di un concorrente. Il programma di lettura di Twitter, però, ricorre al marcatore og: corrispondente quando manca quello twitter:, sicché vanno scritti a parte soltanto pochi marcatori, come twitter:card. Resta comunque poco evidente quale marcatore sostituisca quale, ed è anche per questo che strumenti di verifica come il presente restano utili.

Vedi tutte le curiosità