Come impostare i metadati di Open Graph e Twitter card per il tuo sito web
I metadati delle card di Open Graph e Twitter (ora X) sono essenziali per condividere il tuo sito web sui social media. Ti aiuteranno a mostrare anteprime belle del tuo sito web e ad attirare più attenzione.
GaoFounder
Smetti di sprecare settimane sull'autenticazione degli utenti
Lancia app sicure più velocemente con Logto. Integra l'autenticazione degli utenti in pochi minuti e concentrati sul tuo prodotto principale.
Quando condividi un link al tuo sito web sui social media, vuoi che appaia bene. Invece di mostrare semplicemente un link semplice, vuoi mostrare una bella anteprima con tutti i metadati necessari come titolo, descrizione e immagine. È qui che entrano in gioco i metadati delle card di Open Graph e Twitter (ora X).
In questo articolo, ti mostreremo come configurare i metadati di Open Graph (ogp.me) e Twitter Cards per il tuo sito web. Ti mostreremo anche come testare i tuoi metadati per assicurarti che appaiano bene sui social media.
Quando un umano visita un sito web, vede il contenuto renderizzato dal browser. Ma quando un bot (come un crawler del motore di ricerca o uno scraper dei social media) visita un sito web, vede solo l'HTML grezzo. I metadati del sito web ora entrano in gioco per fornire informazioni strutturate sul sito web al bot, che può utilizzare per renderizzare un output strutturato, come una card di anteprima.
Se fai clic con il tasto destro su un sito web e selezioni "Visualizza sorgente pagina", vedrai l'HTML grezzo del sito web. I metadati sono solitamente inclusi nella sezione <head> dell'HTML e sembrano qualcosa del genere:
Il codice sopra è autoesplicativo: il titolo del sito web è "Home del mio sito web" e la descrizione è "Questo è il mio sito web.".
Potresti notare il prefisso og: nei metadati, che sta per Open Graph. Open Graph è un protocollo sviluppato da Facebook per fornire informazioni strutturate su un sito web. Anche Twitter (ora X) ha il suo protocollo di metadati, chiamato Twitter Cards.
og:type: Il tipo di sito web (es. sito web, articolo, video).
La differenza tra og:title e og:site_name è che og:title è il titolo della pagina corrente (es. il titolo del post del blog), mentre og:site_name è il nome del sito web (es. il nome del blog). Se controlli il codice sorgente di questa pagina, vedrai i seguenti metadati di Open Graph:
Poiché abbiamo impostato og:type su article, è possibile aggiungere metadati aggiuntivi come autore e data di pubblicazione. Ad esempio, se vuoi aggiungere i tag per un post del blog, puoi aggiungere i seguenti metadati:
Open Graph specifica che se desideri aggiungere valori multipli, devi usare multipli tag <meta> con lo stesso nome di proprietà.
Dopo aver aggiunto i metadati di Open Graph al tuo sito web, puoi testarli utilizzando il Facebook Sharing Debugger. Basta inserire l'URL del tuo sito web e fare clic su "Debug". Se ci sono problemi con i metadati, il debugger ti mostrerà gli errori.
Configurare i metadati di Open Graph e Twitter Cards per il tuo sito web è facile ma utile. Alla gente piacciono le immagini e una bella card di anteprima può attirare più attenzione al tuo sito web. Ti auguriamo buona fortuna con il tuo sito web e buona condivisione!
