Creazione dei video snippets nei risultati di ricerca di google
da Massimo Della Rovere · pubblicato il 4 Febbraio, 2013 · modificato il 3 Luglio, 2016

Il rich snippets è l’insieme di informazioni che vengono presentate su un singolo risultato nella pagina dei risultati di google dopo che abbiamo eseguito una determinata ricerca. Normalmente lo snippets indica il titolo della pagina web, una piccola descrizione e il link diretto alla pagina, con l’aggiunta di alcuni aspetti che vengono inseriti in base al codice html della nostra pagina web ed altre infromazioni.

Come avrete notato, molte volte ci sono dei risultati che riportano delle informazioni aggiuntive, ad esempio se abbiamo implementato l’Authorship possiamo vedere la fotografia dell’autore dentro lo snippets, altre volte vediamo le stelline delle votazioni o delle recensioni, vediamo informazioni aggiuntive sulle traccie audio come negli album discografici, se siete amanti della cucina avrete notato anche dei risultati di ricerca che riportano il tempo di preparazione del piatto e il numero delle calorie totali, ebbene tutte queste informazioni aggiuntive possono rendere lo snippets più interessante per il navigatore e quindi con buona probabilità aumentare il CTR.

Creazione di uno snippet personalizzato

L’obiettivo di questo articolo è quello di ottenere uno snippet personalizzato sulle nostre pagine web che contengono un video, sia esso memorizzato localmente sul nostro server o semplicemente inserito con il codice embed, come ad esempio per i video su youtube. Per ottenere questo risultato esistono delle tecniche diverse tra di loro che vedremo direttamente in questo articolo, in ogni caso, qualsiasi tecnica sceglieremo, dovremmo dare delle informazioni aggiuntive allo spider di google, in maniera tale che possa procedere alla generazione dello snippet. Google nella sua documentazione raccomanda l’utilizzo di schema.org, però vengono accettate anche le  tecniche e gli standard usati per Facebook Share e RDFa usata da Yahoo.

Metodo consigliato tramite schema.org

Schema.org è un progetto nato dalla collaborazione tra Google, Microsoft e Yahoo con lo scopo di migliorare il web creando uno schema di markup di dati strutturati supportati dai principali motori di ricerca. Il markup all’interno della pagina consente ai motori di comprendere meglio le informazioni e fornire risultati più completi.

Per quanto riguarda le informazioni collegate al nostro video, dobbiamo usare un <div> contenitore principale con lo schema http://schema.org/VideoObject e all’interno di questo utilizzare tutti gli attributi e le proprietà che ci interessano comunicare ai vari motori di ricerca. Vi riporto qui di seguito un codice di esempio:

<div itemscope itemtype="http://schema.org/VideoObject">
  <h2>Video: <span itemprop="name">Titolo</span></h2>
  <meta itemprop="duration" content="T1M54S"/>
  <meta itemprop="thumbnailUrl" content="thumbnail.jpg"/>
  <meta itemprop="embedURL" content="http://s.com/video.swf?video=123"/>
  <object ...>
    <embed type="application/x-shockwave-flash" ...>
  </object>
  <span itemprop="description">Video description</span>
</div>

Potete inserire molti parametri in più rispetto a questo esempio, come le informazioni sull’autore, sulla qualità del video, le regioni permesse, le date di upload etc. Per vedere la tabelle di tutte le proprietà disponibili vi consiglio il sito ufficiale VideoObject.

Metodo di Facebook Share tramite Open Graph Tags

Gli open graph tags sono dei comandi che servono a specificare dei parametri ben precisi legati alla pagina web, ad esempio si può specificare su è un recensione di un film, se è la pubblicazione di un video, un’articolo di un blog, una pagina di un sito web ect. Questi tag vengono inseriti nella sezione <head> della nostra pagina web tramite i comandi <meta> e <link>. Vi riporto qui di seguito i valori delle informazioni standard:

image_src Indirizzo URL per immagine di copertina.
video_src Indirizzo URL del video di quando l’utente esegue play.
medium audio, image, video, news, blog e mult.
video_width Dimensione in pixel della larghezza del video.
video_height Dimensione in pixel della altezza del video.
video_type Mime/Type come application/x-shockwave-flash.
description Una descrizione sintetica del video, la massimo 200 caratteri.
title Il titolo del video che sarà usato anche come titolo di condivisione.

Queste sono le stesse informazioni che vengono utilizzate dallo sharing dei link su Facebook. Un possibile codice da inserire nella sezione <head> potrebbe essere:

<meta name="title" content="Video di esempio snippet"/>
<meta name="description" content="Prova di condivisione con snippet" />
<link rel="image_src" href="http://s.com/thumbnail_preview.jpg" />
<link rel="video_src" href="http://s.com/video_object.swf?id=12345"/>
<meta name="video_width" content="512"/>
<meta name="video_height" content="300"/>
<meta name="video_type" content="application/x-shockwave-flash"/>

Metodo RDFa (Resource Description Framework in attributes)

RDFa è un modo per associare etichette ai contenuti al fine di descrivere uno specifico tipo di informazioni, come la recensione di un ristorante, un evento, una persona o la scheda di un prodotto. Questi tipi di informazioni sono definiti entità o elementi. Ogni entità possiede svariate proprietà. Ad esempio, una persona ha proprietà come il nome (name), indirizzo (address), qualifica lavorativa (title), azienda ed email. In generale, RDFa utilizza semplici attributi nei tag XHTML (spesso <span> o <div>) per assegnare nomi brevi e descrittivi alle entità e alle loro proprietà.

media:video Indirizzo URL del video di quando l’utente esegue play.
xmlns:media Mettere il valore http://search.yahoo.com/searchmonkey/media/
media:thumbnail Indirizzo URL per immagine della copertina video.
xmlns:dc Valore accettato solo http://purl.org/dc/terms/
dc:license Indica la licenza di questo contentuto.
dc:description Una descrizione sintetica del video.
media:title Il titolo del video che sarà usato anche come titolo di condivisione.
media:width Dimensione in pixel della larghezza del video.
media:height Dimensione in pixel della altezza del video.
media:type Mime/Type come application/x-shockwave-flash.
media:region Il codice della regione dove il video è visualizzato.
media:duration Durata del video espressa in secondi.

Un esempio di codice potrebbe essere il seguente. Notare che a differenza di open graph per lo share di facebook, questo codice viene inserito direttamente nel codice del video, questa tecnica in molti casi risulta più flessibile, infatti non sempre il programma o lo script che dobbiamo modificare nella fase di creazione della sezione <head> è a conoscenza del tipo di contenuto che verrà elaborato per la nostra pagina web.

<object width="512" height="296" rel="media:video"
resource="http://s.com/video_object.swf?id=12345"
xmlns:media="http://search.yahoo.com/searchmonkey/media/"
xmlns:dc="http://purl.org/dc/terms/">
<param name="movie" value="http://s.com/video_object.swf?id=12345"/>
<embed src="http://s.com/video_object.swf?id=12345"
type="application/x-shockwave-flash" width="512" height="296">
<a rel="media:thumbnail" href="http://s.com/thumbnail_preview.jpg"/>
<a rel="dc:license" href="http://s.com/terms_of_service.html"/>
<span property="dc:description" content="Descrizione"/>
<span property="media:title" content="Titolo"/>
<span property="media:width" content="512"/>
<span property="media:height" content="296"/>
<span property="media:type" content="application/x-shockwave-flash"/>
<span property="media:region" content="us"/>
<span property="media:region" content="uk"/>
<span property="media:duration" content="63"/>
</object>

2 Commenti

  1. A dire la verità non credo più molto in questa tecnica. A parte il discorso su Author Rank postato da Betti che è stato eliminato dallo stesso Google. Ma in linea generale non ho mai visto nessun miglioramento nei siti che gestisco. Mi sembrano bei concetti ma che google alla fine non applica quasi mai.

  2. Moooooolto interessante!!! L’arricchimento dello snippet è davvero fondamentale per aumentare il ctr dei click e soprattutto per incrementare il nostro Author Rank ;-) Grazie per il post!

condividi