Tag Open Graph Spiegati, con un Generatore di Tag dal Vivo | We.Inc
I quattro tag Open Graph obbligatori, le proprietà dell'immagine, i valori di og:type e i tag article, commentati, più un builder che scrive il markup della head.
Tag Open Graph Spiegati
I tag Open Graph sono elementi meta nella head di una pagina che controllano come appare un link quando viene condiviso. Il protocollo ne richiede quattro: og:title, og:type, og:image e og:url. Ognuno usa l'attributo property, per esempio meta property="og:title" content="...". Aggiungi og:description, og:site_name e larghezza, altezza e alt dell'immagine per anteprime migliori.
Le quattro proprietà obbligatorie
Proprietà
Cosa inserire
og:title
Il titolo come deve apparire nella card di condivisione
og:type
Il tipo di oggetto, per esempio website o article
og:image
Un URL completo dell'immagine di anteprima
og:url
L'URL canonico che identifica la pagina
Le anteprime di condivisione dipendono da pochi tag in cui è facile sbagliare per un dettaglio: un percorso relativo per l'immagine, larghezza e altezza mancanti, o un titolo che esiste solo nell'elemento title. Compila il builder per ottenere un markup corretto, poi leggi cosa fa ogni proprietà.
Inserisci nel builder il titolo, la descrizione, l'URL della pagina e l'URL dell'immagine.
Scegli il tipo: website per la maggior parte delle pagine, article per gli articoli del blog.
Controlla l'anteprima approssimativa della card, poi copia i tag generati nella head della tua pagina.
Testa la pagina online con lo strumento di debug della condivisione di ogni piattaforma, perché ogni social mette in cache le anteprime.
Usa URL https assoluti per og:image e og:url. I percorsi relativi sono un motivo comune per cui le anteprime non mostrano l'immagine.
Includi og:image:width e og:image:height, così un'app può conoscere la forma dell'immagine dai tag senza misurare il file.
Scrivi og:image:alt per chi usa uno screen reader sulle piattaforme social.
Quando cambi l'immagine, usa un nuovo nome file. Le piattaforme mettono in cache le immagini, quindi riutilizzare il vecchio URL può lasciare l'immagine vecchia.
Domande frequenti
Che dimensione deve avere un'immagine Open Graph?
Il protocollo non stabilisce una dimensione. 1200 per 630 pixel è un formato orizzontale molto diffuso ed è quello che la documentazione di Next.js usa nei suoi esempi. Tieni il testo importante lontano dai bordi, perché alcune app ritagliano l'immagine.
I tag Open Graph aiutano la SEO?
Il loro compito è la card di condivisione, non il posizionamento. Un titolo e un'immagine chiari possono portare più clic quando le persone fanno girare il tuo link in chat e feed. Mantieni og:title coerente con l'elemento title, così ogni superficie descrive la pagina allo stesso modo.
Perché i tag Open Graph usano property invece di name?
Il protocollo si basa su RDFa, che usa l'attributo property. Gli esempi su ogp.me scrivono meta property="og:title". I tag delle Twitter card, invece, usano l'attributo name, come in meta name="twitter:card".
Mi servono ancora i tag Twitter card?
Aggiungi almeno twitter:card, impostato su summary_large_image se vuoi il layout con l'immagine grande. Molte app leggono i valori og per titolo, descrizione e immagine quando mancano i corrispondenti tag twitter, ma le regole delle piattaforme cambiano, quindi testa il tuo URL online prima di dare per scontato che il fallback funzioni.
Una pagina può avere più di un og:image?
Sì. Il protocollo ammette array: ripeti il tag og:image e metti larghezza, altezza e alt di ogni immagine subito dopo l'immagine a cui si riferiscono. Quando i valori sono in conflitto, il protocollo dà la precedenza al primo tag dall'alto.
Le proprietà strutturate appartengono al tag sopra di loro
Proprietà come og:image:width descrivono l'og:image più recente dichiarato prima di loro. L'ordine conta: dichiara prima l'immagine, poi larghezza, altezza, tipo e alt, poi l'immagine successiva.
og:image:secure_url è un indirizzo https aggiuntivo per la stessa immagine. Se il tuo og:image usa già https, non ti serve.
I tipi e i loro tag aggiuntivi
website è il valore predefinito per le pagine che non sono un tipo specifico di oggetto. article abilita article:published_time, article:modified_time, article:author, article:section e article:tag.
Il protocollo definisce anche book, profile e i gruppi music e video. Usali solo quando la pagina è davvero quell'oggetto; una pagina prodotto di solito è website.
Prima i tag obbligatori, poi descrizione, nome del sito e il blocco dell'immagine con le sue proprietà strutturate.
Articolo del blog con i tag article
L'attributo prefix dichiara i namespace. Le date usano ISO 8601.
Riparazione Tetti a Leeds | Northside Roofing
Riparazione di infiltrazioni in giornata e preventivi scritti gratuiti in tutta Leeds.
Copritetto che posa tegole di ardesia su una casa a schiera
L'URL dell'immagine deve essere assoluto e iniziare con https://
L'URL della pagina deve essere assoluto e iniziare con https://
og:title è obbligatorio
Generatore di tag Open Graph
Compila i campi per generare i tag e una card di condivisione approssimativa. Ogni app disegna la propria card, quindi considera l'anteprima un'indicazione.