Corso SEO & HTML: #09 Open Graph Protocol

2021-08-04 11:08:08

Dati strutturati e metadati, sono in assoluto gli strumenti più potenti per raggiungere la prima pagina su Google! Ma come si usano?

« Corso SEO & HTML: #08 Script Javascript

  • Open Graph Protocol, cos'è?
  • Cosa sono i dati strutturati?
  • Come si inseriscono i dati strutturati in una pagina web?

In questa rubrica sulla SEO dedicata alla scrittura di codice HTML ti spiego con parole semplici quali sono i tag HTML fondamentali di ogni pagina web per farti capire come è fatto un sito web in modo da sfruttare al meglio le conoscenze sulla SEO ed essere in prima pagina su Google, senza farti necessariamente diventare un webmaster o un hacker!

Open Graph Protocol

Cosa sono i dati strutturati OG: open graph

Hai presente che quando condividi una pagina web su Facebook o su LinkedIn compare una anteprima della pagina web? o per meglio dire, viene creato un banner in modo automatico con un bel titolo, una immagine importante e cliccandoci sopra ti rimanda alla pagina in questione?

Hai presente quando condividi su Facebook la URL di un video YouTube, ti compare la bella immagine di copertina e un bel titolone in evidenza? 

Le pagine web del tuo sito non lo fanno? Vuoi sapere come fare per personalizzare questo comportamento per le pagine del tuo sito?

Facile: devi usare il Protocollo Open Graph!

Va detto che quando si parla di Open Graph Protocol, si intende una tecnologia software targata Facebook! Il Protocollo Open Graph serve a Facebook per creare i post in modo più veloce e per classificare nel migliore dei modi le condivisioni di pagine web, all'interno del Social Network.

Open Graph Protocol è un elemento invisibile all'utente e dunque viene posizionato nel solito tag <head> insieme ai metadati, al <title> e agli altri tag che abbiamo visto negli articoli delle scorse settimane.

<meta property="og:title" content="Corso SEO & HTML: #09 Open Graph Protocol" />
<meta property="og:type" content="article" /> ...

Come vedi, questi meta tag hanno l'attributo property che inizia con og:

OG: sta appunto per Open Graph e puoi inserire diversi metadati tra cui:

  • og:title : definisce il titolo che deve comparire nel post di Facebook quando qualcuno condividerà la URL della pagina web in questione, tipicamente corrisponde al tag <title> ma può anche essere diverso;
  • og:type : che serve per definire la tipologia di pagina web, per esempio "article", ma anche  "music", "video", etc;
  • og:image : è l'URL dell'immagine che Facebook deve usare come copertina quando crei un post di condivisione di questa pagina web (si consiglia di usare immagini di dimensioni 1200x630 pixel);
  •  og:url : definisce la URL canonica da cui la risorsa viene condivisa, tipicamente dovrebbe corrispondere al meta tag "canonical" che abbiamo già visto in un articolo precedente;
  • og:audio : è un parametro facoltativo e va inserito l'URL del file mp3 solo nel caso in cui la pagina web in questione si riferisca a una traccia audio o musicale;
  • og:video : indica l' URL del file video qualora la pagina web si riferisca a un video

Trovi le specifiche complete del Open Graph Protolo a questo indirizzo:

Open Graph e SEO

Come il Protocollo Open Graph influisce sulla SEO

Ogni volta che inseriamo dati strutturati all'interno delle nostre pagine web, diamo un aiuto notevole al "crawler" di Google, che il più delle volte si comporta da "scraper" (trad. lett. "raschietto") cercando le informazioni utili "grattando" le parole chiave e cercando di capire quali siano le informazioni importanti e quale sia invece il "testo di riempimento".

I metadati e i dati strutturati invece, contengono le informazioni utili, già pronte "sul piatto d'argento", dunque il motore di ricerca ti sarà molto grato per avergli semplificato il lavoro, premiando la tua pagina web e mettendola in prima pagina nella SERP (Search Engine Result Page : Pagina dei risultati di ricerca).

Essendo l'Open Graph un protocollo dedicato alla creazione di post per il social network Facebook, le informazioni che troviamo al suo interno sono limitate all'aspetto grafico del post che si creerà quando qualcuno condividerà l'URL della nostra pagina web.

Open Graph aiuta dunque anche Google ad abbinare ad una pagina web una immagine di copertina o un video, pertanto ci offre l'opportunità di essere in prima pagina anche nella ricerca per immagini o nella ricerca per video!

Open Graph e fattore umano

Il fattore umano nella SEO non deve essere mai dimenticato

Naturalmente il protocollo Open Graph serve a migliorare l'esperienza utente agli utilizzatori del nostro sito web: se la condivisione delle pagine web su Facebook (o sui social in generale) produrrà con facilità buoni risultati estetici, certamente il visitatore sarà più ben disposto a condividere i contenuti di valore che gli proponiamo!

Per l'effetto ristorante in cui Gente fa Gente il passaparola aiuterà Google a raccogliere informazioni sul numero e sulla qualità dei nuovi utenti o utenti di ritorno!

Quindi anche in questo caso Open Graph aiuta a ricevere un buon posizionamento e visibilità sui motori di ricerca, sebbene lo faccia indirettamente!

Naturalmente non si può prescindere dalla qualità e dal valore dei contenuti che mettiamo in rete, strumenti potenti come Open Graph Protocol vanno usati per amplificare il valore che desideriamo trasmettere, mentre se usiamo tecniche Click Bait, se trasmettiamo notizie false o contenuti di scarso valore, otterremo il risultato opposto!
Tutte queste cose sono ben trattate nel Corso SEO Operativo Basic!

Open Graph come fare

Come inserire Open Graph nel tuo sito

Naturalmente dipende sempre dalla piattaforma su cui è ospitato il tuo sito web.

Se ti appoggi a una piattaforma come Cam Tv o simile, non devi fare nulla poiché è già tutto predisposto in maniera ottimale!

Se il tuo sito è scritto "from scratch" o come dico io "di sartoria" usando linguaggio HTML, basterà inserire i tag <meta property="og:..." /> all'interno del tag <head>.

Se invece il tuo sito è basato su un CMS come Wordpress, ti sarà sufficiente installare un Plugin come questo: OG Open Graph Protocol Plugin for Wordpress che si aggancia direttamente alle informazioni native di Wordpress inserendo automaticamente le informazioni nell'intestazione dell' HTML del tuo Blog.


Conclusioni

Hai capito che il meta tag <meta property="og:..." /> ha una doppia valenza ed è davvero semplice da implementare nel tuo sito web per portare benefìci al tuo sito web.

Abbiamo quasi concluso la parte di corso HTML dedicata al tag <head>  — dove quello che scriviamo serve solo al browser e al crawler di GoogleBot e oggi anche al Crawler di Facebook — per parlare di argomenti importanti in termini di SEO, quindi fai click su "Seguimi" per ricevere una notifica!

Ti do appuntamento alla prossima settimana, nel frattempo metti un like se questo articolo ti è stato utile e condividilo con tutti i tuoi amici che — come te — vogliono essere in prima pagina su Google, te ne saranno immensamente grati.

Se qualcosa non ti è chiaro, fammi le tue domande nei commenti, risponderò a tutti, oppure scrivimi in privato.

Iscriviti al Corso SEO Operativo per poter entrare nel gruppo privato dove parliamo ogni giorno di SEO e di come fare per essere in prima pagina su Google, a presto.

Corso SEO & HTML: #10 Schema.org »

Corso SEO Operativo: come funziona l'algoritmo di Google
Impara come funziona l'algoritmo di Google per creare i giusti contenuti e sarai sempre in prima pagina sui motori di ricerca!
by Emanuele Frisoni