Cosa imparerai
Al termine di questa lezione, capirai cosa sono i tag OpenGraph, perché sono importanti per la SEO e come implementarli correttamente sul tuo sito web per aumentare il coinvolgimento sui social media e i tassi di clic.
Cosa sono i tag OpenGraph?
I tag OpenGraph sono frammenti di codice che controllano l'aspetto dei tuoi contenuti quando vengono condivisi su piattaforme di social media come Facebook, LinkedIn, Twitter e WhatsApp. Sono stati creati da Facebook nel 2010 e ora sono utilizzati in tutto il web.
Esempio semplice: Quando condividi un link su Facebook, hai notato come vengono mostrati un titolo, una descrizione e un'immagine? È OpenGraph al lavoro.
Perché i tag OpenGraph sono importanti per la SEO
I tag OpenGraph non migliorano direttamente il tuo posizionamento su Google, ma hanno un impatto significativo sulla tua strategia SEO nei seguenti modi:
Percentuali di clic (CTR) più elevate
I tag ben ottimizzati creano anteprime accattivanti che incoraggiano più clic dai social media.
Migliore esperienza utente
Gli utenti vedono esattamente cosa aspettarsi prima di cliccare, riducendo così i tassi di rimbalzo.
Controllo del marchio
Decidi tu quale immagine, titolo e descrizione rappresenteranno i tuoi contenuti sulle piattaforme social.
Aumento delle condivisioni sui social
Le anteprime accattivanti generano più condivisioni, che possono generare traffico e backlink.
Tag OpenGraph essenziali di cui hai bisogno
Ecco i quattro tag OpenGraph principali che ogni pagina dovrebbe avere:
og:title – Il tag del titolo
Il titolo che appare nelle anteprime dei social media.
<meta property="og:title" content="10 SEO Tips to Rank #1 on Google" />Buone pratiche per i titoli
Per una visualizzazione ottimale, mantienilo al di sotto dei 60 caratteri.
og:description – Il tuo tag di riepilogo
Un breve riassunto del tuo contenuto.
<meta property="og:description" content="Learn proven SEO strategies that helped 500+ websites reach the first page of Google in 2025." />Buone pratiche per le descrizioni
Punta a 155-160 caratteri. Rendi il testo avvincente e orientato all'azione.
og:image – Il tuo tag visivo
L'immagine che appare insieme al tuo link.
<meta property="og:image" content="https://yoursite.com/images/seo-tips.jpg" />Buone pratiche per le immagini
- Utilizzare 1200 x 630 pixel (dimensione consigliata)
- Mantieni la dimensione del file inferiore a 8 MB
- Utilizzare il formato JPG o PNG
og:url – Il tuo tag link
L'URL canonico della tua pagina.
<meta property="og:url" content="https://yoursite.com/seo-tips" />Buone pratiche per gli URL
Utilizzare sempre l'URL completo e assoluto.
Tag importanti aggiuntivi
Oltre ai quattro tag essenziali, questi tag offrono un controllo extra sulla tua presenza sui social media.
og:type – Tag del tipo di contenuto
Definisce il tipo di contenuto.
<meta property="og:type" content="article" />Tipi di contenuto comuni
- sito web ufficiale
- articolo
- video
- PRODOTTI
og:site_name – Tag del nome del marchio
Il nome del tuo sito web o del tuo marchio.
<meta property="og:site_name" content="ClickRank SEO Academy" />og:locale – Tag della lingua
La lingua e la regione dei tuoi contenuti.
<meta property="og:locale" content="en_US" />Guida all'implementazione dettagliata
Segui questi quattro semplici passaggi per aggiungere tag OpenGraph al tuo sito web.
Passaggio 1: aggiungi tag alla sezione Head HTML
Posizionare tutti i tag OpenGraph all'interno di <head> sezione del tuo documento HTML.
Passaggio 2: personalizza per ogni pagina
Ogni pagina dovrebbe avere tag og:title, og:description e og:url univoci.
Passaggio 3: testa i tuoi tag
Utilizza lo Sharing Debugger di Facebook o il Post Inspector di LinkedIn per visualizzare in anteprima l'aspetto dei tuoi contenuti.
Passaggio 4: monitorare le prestazioni
Tieni traccia del traffico di riferimento dei social media in Google Analytics per misurare l'efficacia.
Esempio reale: implementazione completa
Ecco come dovrebbe apparire un post di un blog sulla SEO:
<head>
<meta property="og:title" content="Master Keyword Research in 5 Simple Steps" />
<meta property="og:description" content="Discover how to find profitable keywords that drive organic traffic. Includes free tools and templates." />
<meta property="og:image" content="https://clickrank.com/images/keyword-research-guide.jpg" />
<meta property="og:url" content="https://clickrank.com/keyword-research-guide" />
<meta property="og:type" content="article" />
<meta property="og:site_name" content="ClickRank SEO Academy" />
<meta property="og:locale" content="en_US" />
</head>Errori comuni da evitare
Impara da questi cinque errori che danneggiano le tue prestazioni sui social media.
Errore 1: utilizzare gli stessi tag in ogni pagina
Ogni pagina necessita di tag univoci che descrivano accuratamente il suo contenuto specifico.
Perché è importante
I tag generici confondono gli utenti e riducono i tassi di clic.
Errore 2: dimenticare di aggiornare gli URL delle immagini
I collegamenti alle immagini interrotti generano anteprime generiche senza elementi visivi.
Come risolverlo
Utilizza sempre URL assoluti e testali prima della pubblicazione.
Errore 3: ignorare le dimensioni dell'immagine
Le immagini troppo piccole o con proporzioni errate vengono ritagliate male.
La Soluzione
Per anteprime coerenti e professionali, attenersi a una risoluzione di 1200 x 630 pixel.
Errore 4: scrivere descrizioni generiche
"Visita il nostro sito web" non genera clic. Sii specifico sul valore che offri.
Cosa fare invece
Concentratevi sui vantaggi e includete un chiaro invito all'azione.
Errore 5: non testare prima di pubblicare
Convalida sempre i tuoi tag utilizzando strumenti di debug prima di pubblicarli.
Strumenti di test da utilizzare
Facebook Sharing Debugger e LinkedIn Post Inspector rilevano gli errori in anticipo.
OpenGraph contro Twitter Cards
Sebbene OpenGraph funzioni sulla maggior parte delle piattaforme, Twitter utilizza un proprio sistema chiamato Twitter Card. Molte piattaforme si affidano a OpenGraph se le Twitter Card non sono presenti.
Implementazione di entrambi i sistemi
Per la massima compatibilità, utilizzare sia OpenGraph che Twitter Cards:
<!-- OpenGraph -->
<meta property="og:title" content="Your Title" />
<!-- Twitter Cards -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Your Title" />Quando usare ciascuno
Utilizzare OpenGraph per:
- Facebook, LinkedIn, WhatsApp e la maggior parte delle piattaforme social
Utilizza le schede Twitter per:
- Twitter e la piattaforma X in particolare
Strumenti per testare i tag OpenGraph
Questi quattro strumenti ti aiutano a convalidare e visualizzare in anteprima la tua implementazione OpenGraph.
Facebook Sharing Debugger
URL: developers.facebook.com/tools/debug
Cosa fa
Mostra esattamente come appaiono i tuoi contenuti su Facebook e svuota la cache.
Ispettore Posta LinkedIn
URL: linkedin.com/post-inspector
Cosa fa
Visualizza in anteprima i tuoi contenuti così come appariranno nei feed di LinkedIn.
OpenGraph.xyz
Uno strumento di anteprima rapida per più piattaforme
Cosa fa
Testa i tuoi tag contemporaneamente su Facebook, Twitter, LinkedIn e altri social.
Estensioni del browser
Installa i verificatori OpenGraph come "OpenGraph Preview" per Chrome
Cosa fa
Controlla i tag OpenGraph di qualsiasi pagina direttamente dal tuo browser.
Utenti WordPress: facile implementazione
Se utilizzi WordPress, questi plugin semplificano l'implementazione di OpenGraph.
Yoast SEO
Generazione automatica di OpenGraph con opzioni di personalizzazione
Funzionalità principali
- Editor di anteprima visiva
- Generazione automatica di tag
- Integrazione dei social media
Rank Math
Anteprima e modifica integrate dei social media
Funzionalità principali
- Ottimizzazione con un clic
- Supporto per più piattaforme
- Anteprima in tempo reale
All in One SEO
Gestione completa dei meta tag social
Funzionalità principali
- Personalizzazione avanzata
- Opzioni di modifica in blocco
- Tracciamento delle prestazioni
Misurare il successo
Tieni traccia di queste metriche per valutare l'ottimizzazione OpenGraph.
Traffico di riferimento sociale
Controlla Google Analytics per gli aumenti da Facebook, LinkedIn, ecc.
Come tenere traccia
Vai su Acquisizione > Tutto il traffico > Sorgente/Mezzo in Google Analytics.
Engagement Rate
Monitora i Mi piace, le condivisioni e i commenti sui link condivisi
Cosa cercare
Un coinvolgimento maggiore indica anteprime più accattivanti.
Percentuale di clic
Confronta il CTR prima e dopo l'ottimizzazione
Obiettivi di riferimento
Punta a migliorare almeno del 20% il CTR sui social.
Frequenza di rimbalzo
Percentuali di rimbalzo più basse indicano una migliore corrispondenza dei contenuti
Metrica di destinazione
I tassi di rimbalzo inferiori al 50% indicano un buon allineamento tra contenuto e anteprima.
Punti chiave
Ecco cosa devi ricordare sui tag OpenGraph:
- I tag OpenGraph controllano il modo in cui i tuoi contenuti appaiono sui social media
- Quattro tag essenziali: og:title, og:description, og:image, og:url
- Per risultati ottimali, le immagini devono essere di 1200 x 630 pixel
- Testa sempre i tuoi tag prima di pubblicarli
- Personalizza i tag per ogni pagina per ottenere il massimo impatto
- Monitorare il traffico di riferimento sociale per misurare il successo
Cosa succede se non aggiungo i tag OpenGraph al mio sito web?
Senza i tag OpenGraph, le piattaforme social estrarranno automaticamente i contenuti dalla tua pagina, spesso generando anteprime di scarsa qualità con immagini errate o testo incompleto. Questo riduce il tasso di clic e rende i tuoi contenuti meno condivisibili. Aggiungere tag appropriati ti dà il pieno controllo sull'aspetto dei tuoi contenuti.
I tag OpenGraph funzionano su tutte le piattaforme di social media?
I tag OpenGraph funzionano sulla maggior parte delle piattaforme principali, tra cui Facebook, LinkedIn, WhatsApp, Pinterest e Slack. Twitter utilizza principalmente le Twitter Card, ma ricorre a OpenGraph se le Card non sono presenti. Instagram non mostra le anteprime dei link nei post, quindi i tag OpenGraph non sono applicabili.
Quanto tempo ci vuole perché le modifiche di OpenGraph vengano visualizzate?
Le modifiche appaiono immediatamente per le nuove condivisioni. Tuttavia, le piattaforme social memorizzano nella cache i dati precedenti, quindi i link condivisi in precedenza non verranno aggiornati automaticamente. Utilizzate lo Sharing Debugger di Facebook o il Post Inspector di LinkedIn per svuotare la cache e forzare un aggiornamento per gli URL già condivisi.
Posso utilizzare immagini OpenGraph diverse per diverse piattaforme social?
Sì, puoi specificare immagini specifiche per ogni piattaforma. Ad esempio, usa og:image per le piattaforme generali e twitter:image per Twitter. Ogni piattaforma utilizzerà il suo tag specifico, se disponibile, altrimenti ricorrerà a og:image. Questo ti consente di ottimizzare le immagini in base alle dimensioni di ogni piattaforma.
Dove dovrei esattamente posizionare i tag OpenGraph nel mio HTML?
Posiziona tutti i tag OpenGraph all'interno della sezione head del tuo documento HTML, prima del tag di chiusura head. Dovrebbero apparire dopo il tag title e gli altri meta tag. L'ordine non influisce sulla funzionalità, ma mantenerli insieme migliora l'organizzazione del codice.
Ho bisogno di tag OpenGraph su ogni singola pagina?
Sì, ogni pagina che potrebbe essere condivisa sui social media dovrebbe avere tag OpenGraph univoci. Questo include post di blog, pagine di prodotto, landing page e persino la homepage. Le pagine senza tag mostreranno anteprime generiche o errate quando condivise, influendo negativamente sui tassi di clic.
