Pubblicato da
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
