Rich snippets: migliorare la struttura semantica di una pagina html

Rich snippets: migliorare la struttura semantica di una pagina html
Aug 04 Scritto da 
Pubblicato in Blog e consigli seo
Vota questo articolo
(0 Voti)

Come usare correttamente i rich snippets per fornire ai motori di ricerca pagine web con una struttura chiara ed organizzata. Per migliorare il modo in cui Google vede la tua pagina!

 

Cosa sono i Rich snippets

Novità introdotta circa 2 anni fa, i rich snippets sono uno strumento molto potente per fornire informazioni aggiuntive riguardo alla struttura semantica di una pagina internet. In pratica stabiliscono relazioni logiche tra i contenuti della pagina, permettendo ai motori di ricerca di comprendere meglio come abbiamo organizzato il testo e che tipo di contenuti trovare in ogni singola parte della pagina

Con il mark up dei contenuti, quindi, non lasceremo più che il motore di ricerca tenti di intuire quali sono i contenuti rilevanti sulla pagina e come sono stati organizzati, ma forniremo istruzioni precise sulla struttura logica delle nostre pagine

Per coloro che hanno un po' di familiarità con gli XML, si tratta in sostanza, di aggiungere direttamente all'interno dell'HTML della pagina una serie di mark up che la trasformano in una sorta di grande xml, rendendo molto più agevole ai motori di ricerca il parsing (analisi e  divisione in segmenti) del codice.

Rich snippets: come si usano

Prima di qualsiasi modifica al codice della pagina è necessaria una approfondita analisi dei contenuti e di come vogliamo organizzarli. Infatti, vista la struttura nidificata dei rich snippets è di fondamentale importanza definire quali siano i vari livelli dei contenuti.

Pensate ad una pagina internet come ad una grande scatola con al suo interno una serie di scatole più piccole una dentro l'altra. Dovremmo, quindi, identificare cosa c'è all'interno di ciascuna scatola e spiegare chiaramente al motore di ricerca cosa può trovare all'interno!

Per fare questo abbiamo a disposizione due risorse fondamentali: da una parte la descrizione completa dei diversi rich snippets utilizzabili, che potete trovare sul sito di schema.org, e dall'altra lo strumento fornito direttamente da Google per testare il codice, il Rich Snippets Testing Tool.

Rich snippets elementi principali

Come dicevamo, i rich snippets altro non sono che istruzioni per i motori di ricerca per collegare logicamente i contenuti sulla pagina. Le istruzioni sono sostanzialmente di tre tipi:

Itemscope

Aggiungendo itemscope al codice si informa che sta iniziando un nuovo elemento. Tornando, quindi, al nostro esempio, itemscope identifica una nuova scatola, senza specificarne il tipo nè il contenuto. L'istruzione quindi non può essere utilizzata da sola ma deve necessariamente essere seguita da itemtype.

Itemtype

Con itemtype definiamo il contenuto di un elemento. Deve contenere un link allo schema predefinito per la tipologia scelta, ad esempio, itemtype="http://schema.org/WebPage". 

Le tipologie previste sono moltissime: pagine web, articoli, film, musica, persone, aziende, eventi, foto, ricette, .... basta scegliere quella che meglio si adatta al contenuto dell'elemento ed inserire il link relativo.

Itemprop

L'ultima istruzione definisce alcuni dei contenuti all'interno di una tipologia. Possiamo, ad esempio, indicare il nome, il titolo, una immagine, una descrizione e così via. Seguando lo schema previsto per il tipo scelto sarà abbastanza facile identificare ogni singola parte ed indicarla al motore di ricerca: itemprop="name".

Struttura nidificata dei rich snippets

Attraverso la corretta combinazione dei diversi elementi principali potrete indicare l'intera struttura semantica della vostra pagina internet. Se, infatti, all'interno dello stesso tag html, marcato con itemprop facciamo seguire le istruzioni itemscope itemtype="...", avremmo la possibilità di specificare ulteriormente il contenuto dell'elemento.

Non tutti gli elementi possono essere nidificati, ma la maggior parte si , quindi, all'inizio dovrete fare continuo riferimento alla documentazione per il corretto uso dei rich snippets.

Il tutto risulterà molto più chiaro nell'esempio seguente.

Un esempio di uso dei rich snippets

Ipotizziamo di voler scrivere una pagina sul film Apocalipse Now. Il codice tradizionale potrebbe essere:

<div>
   <h1>Apocalipse Now</h1>
   <p>Durante la guerra del Vietnam.....</p>
   <p>Regista: Francis Ford Coppola</p>
   <p>Data di nascita: 7 aprile 1939</p>
   <img src="/coppola.jpg"/>
   <p>Durata: 02:23:00</p>
   <embed src="/video.swf" />
</div> 

Se vogliamo che il motore di ricerca comprenda chiaramente i singoli elementi della nostra pagina, dovremmo aggiungere un po' di rich snippets alla nostra pagina secondo una struttura nidificata adeguata:

<div itemscope itemtype="http://schema.org/Movie">
   <h1 itemprop="name">Apocalipse Now</h1>
   <p itemprop="description">Durante la guerra del Vietnam.....</p>
   <div itemprop="director" itemscope itemtype="http://schema.org/Person">
      <p>Regista: <span itemprop="name">Francis Ford Coppola</span></p>
      <p>Data di nascita: <span itemprop="birthDate">7 aprile 1939</span></p>
      <img src="/coppola.jpg" itemprop="image" />
   </div>
   <p itemprop="duration">02:23:00</p>
   <div itemprop="trailer" itemscope itemtype="http://schema.org/VideoObject">
      <meta itemprop="name" content="Apocalipse Now Trailer"/>
      <embed itemprop="embedUrl" src="/video.swf" />
      <p itemprop="caption">Anteprima di Apocalipse Now</p>
   </div>
</div> 

le informazioni che date sono molteplici: non solo informate il motore di ricerca che si tratta di un film, ma indicate che il titolo è Apocalipse Now e che il regista è Francis Ford Coppola, nato il 7 aprile del 1939. Date, inoltre una breve descrizione, informazioni sulla durata e su dove trovare il trailer!

Notate come abbiamo dovuto aggiungere dei tag div per meglio strutturare il codice: infatti non avremmo potuto dare correttamente le informazioni sul regista del nostro film se non le avessimo racchiuse all'interno di un contenitore specifico.

Inoltre, abbiamo aggiunto al trailer il nome in modo che non venisse visualizzato a schermo, come se fosse un metadato: in questo modo, forniamo informazioni complete sull'elemento, senza necessita di cambiare la grafica o dare all'utente informazioni doppie

Ecco come Google vedrebbe il vostro codice:

Item 
Type: http://schema.org/movie
name = Apocalipse Now 
description = Durante la guerra del Vietnam..... 
director = Item( 1 ) 
duration = 02:23:00 
trailer = Item( 2 )

Item 1
Type: http://schema.org/person
name = Francis Ford Coppola 
birthdate = 7 aprile 1939 
image = http://www.example.com/immagine.jpg 

Item 2 
Type: http://schema.org/videoobject
name = Apocalipse Now Trailer 
embedurl = http://www.example.com/video.swf 
caption = Anteprima di Apocalipse Now 

Continuate a seguire il blog per altre guide all'uso dei rich snippets

354497 Ultima modifica il Martedì, 07 Aprile 2015
ProgettoWebFirenze

Da ormai oltre 10 anni combatto al fianco dei clienti la dura battaglia per l'indicizzazione dei loro siti web.

Dopo studi di economia e marketing, ho lavorato per qualche tempo presso una agenzia SEO di New York dove ho appreso i primi segreti, gioito per i primi successi e imparato dai primi fallimenti

Oggi, a distanza di qualche anno, ho fondato ProgettoWebFirenze, agenzia di produzione e indicizzazione di siti web a Firenze: tra sviluppatori, grafici, SEO e commerciali siamo ormai in molti e continuiamo a crescere.

Questo è il mio (nostro) blog dove raccogliamo notizie, consigli pareri e qualche sciocchezza sul argomenti come il web design, la SEO ed il web marketing in generale.

Lascia un commento

Assicurati di aver digitato tutte le informazioni richieste, evidenziate da un asterisco (*). Non è consentito codice HTML.

Vuoi avere informazioni? Lasciaci il tuo contatto.

Veniamo noi da te!

Riempi tutti i campi
Grazie, ti richiameremo appena possibile
* Le tue informazioni personali sono protette. Leggi la nostra Privacy Policy per maggiori informazioni

logo bianco

Agenzia web per la creazione di siti internet a Firenze.

Se hai bisogno di maggiori informazioni sui nostri servizi web, sui nostri piani di gestione di web marketing e su tutto quello che facciamo, contattaci quando vuoi e saremmo ben lieti di dare una risposta a tutte le tue domande.

Ma per cortesia, evita di copiare i nostri contenuti creativi: sono stati reati nel tempo con fatica e passione. Se hai una agenzia web tutta tua e stai cercando ispirazione contattaci e saremmo ben lieti di aiutarti. Ma non copiare. Il copyright è una cosa seria.