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.
Consigli
- 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 che leggono og:title e og:description — quelli di Facebook, delle applicazioni di messaggistica, degli strumenti di collaborazione — sono cosa diversa dai marcatori twitter:title e twitter:description, specifici di X. Configurandoli entrambi otterrete una resa corretta su ogni supporto.
- Senza twitter:card, X tenta di ripiegare su og:title e og:description, ma l'immagine può non comparire correttamente: si raccomanda quindi di indicarlo 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.
Domande frequenti
/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.<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.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.<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. Ne consegue che ancora oggi molti siti devono scrivere due volte gli stessi marcatori, ed è anche per questo che strumenti di verifica come il presente restano necessari.