SMX Milano 2014 Presentazione sul Semantic Search

Semantic SEO con Schema.org

Dal web dei Documenti e Dati al web delle Informazioni e delle Entità

Buon pomeriggio e benvenuti a questa sessione dedicata al semantic search e le sue implicazioni sulla nostra visibilità online nei motori di ricerca. Ricerca semantica SEO implica molte cose e non possiamo citarle tutte: io stesso mi rendo conto di essere appena all’inizio di un percorso che trasformerà radicalmente il modo in cui facciamo siti web ed affrontiamo il SEO, ed è per questa ragione che oggi vi presento gli elementi che sono alla base di quella che possiamo definire la prossima rivoluzione del web: Dai Dati e Documenti alle Informazioni e le Entità: Il Web del Linked Data.
C’è differenza tra Dati ed informazioni anche se spesso siamo abituati ad utilizzare le due parole in maniera intercambiabile. Il dato (da latino datum che significa letteralmente fatto) è una descrizione elementare, spesso codificata, di una cosa, di una transazione, di un avvenimento o di altro. Il dato è ad esempio la rilevazione delle temperature.
L’Informazione deriva dall’analisi ed interpretazione dei dati: analizzando ed interpretando i dati delle temperature raccolte si possono fare delle considerazioni ed identificare dei trend sul riscaldamento globale.
Una pubblicazione del 1986 asserisce che l’elaborazione dell’informazione ha due scopi: Ridurre l’incertezza e ridurre l’ambiguità. Sono due aspetti che molto hanno a che fare con il nostro Web popolato da miliardi di documenti che offrono molti dati, spesso dal contesto molto debole, e di difficile interpretazione – in una sola parola sono “ambigui”. Questo è un grande problema per i motori di ricerca che devono poter “capire” per poter fornire risposte di qualità agli utenti.
Per essere utili, le informazioni devono avere alcune caratteristiche importanti e cioè essere sempre disponibili (così come lo sono i documenti nel web), Consistenti (ovvero non contradditorio, sempre uguale a se stessa), Inequivocabile (Tale da escludere qualsiasi riserva o incertezza; chiaro, indubbio, univoco), ed Affidabile (Su cui si può fare affidamento, degno di motivata fiducia).
Alle Informazioni possiamo attribuire delle Proprietà (persona animale o cosa), delle Caratteristiche (Dimensioni, peso nome, razza), delle Connotazioni (ad esempio l’aspetto, attributi, particolarità) ed infine una Geolocalizzazione (dove è ubicato).
Quando un’informazione è così identificata e ad essa sono attribuibili uno o più degli elementi attribuibili, l’informazione diventa Entità.
L’insieme delle Entità interconnesse tra di loro diventano Linked Data che è alla base del Web Semantico che è alla base dello sviluppo del web del futuro di cui ci accingiamo a parlare nel resto della presentazione.
Uno (ma non l’unico) strumento che abbiamo a disposizione per trasformare le informazioni delle nostre pagine web in Dati Strutturati è Schema.org
Costruire uno Schema per un web non è una cosa semplice o immediata. Occorre sviluppare un modello di riferimento e vi farò vedere come fare nelle prossime slides. Come potete vedere alla pagina della screenshot che vi propongo, ci sono tantissimi elementi a disposizione (oltre 700) per sviluppare gli schema.
Una cosa che vi posso anticipare è che non esistono delle regole, oltre le indicazioni che vedremo nelle prossime slides ed oggi siamo nella fase di sperimentazione. Possiamo Paragonare la nostra attività di architetti dell’informazione, a quella del cuoco: molto spesso gli ingredienti di una ricetta sono noti a tutti (ad esempio per fare una semplicissima pizza) eppure il risultato finale è molto diverso da cuoco a cuoco.
Per evitare fraintendimenti e traduzioni che possono essere il frutto di una mia interpretazione personale, ho riportato i punti essenziali che sono alla base di Schema.org.
L’uso di microdati è importante perché i motori di ricerca hanno una capacità limitata di comprensione dei contenuti (informazioni) – molto più limitata rispetto ad una persona che legge ed è in grado di interpretare dati/informazioni dando contesto a ciò che viene letto.
L’uso di questo strato aggiuntivo di markup organizza i dati nella pagina web offrendo struttura e contesto che aiuta a capire e presentare in maniera più efficace i dati.
Riprendo l’esempio riportato dalle pagine di schema.org per introdurre due elementi fondamentali nella creazione degli schema che sono itemscope e itemtype
Questo è un paragrafo di testo sul film AVATAR (il titolo, il direttore, la tipologia di film, ed il link al trailer. L’HTML esistente può essere modificato introducendo l’attributo itemscope caratterizza il contenuto dando uno scopo al contenuto (la sua ragione di esistere).
Aggiungendo itemscope abbiamo individuato un blocco e specificato che tratta di un certo argomento senza specificare DI QUALE argomento si sta trattando – per questo si utilizza l’attributo Itemtype.

Quali sono le informazioni aggiuntive che possiamo dare ai motori di ricerca sull’argomento film Avatar?

I film sono realizzati da attori, registi ed è per questo che si utilizza un terzo attributo chiamato Itemprop – così nel nostro esempio basta aggiungere itemprop=”director” nel markup HTML del nome del direttore del film.
Adesso lo stesso blocco di contenuti che avevamo prima assume un significato che non si presta ad alcuna ambiguità: Qui si sta parlando di un film (e non dell’avatar di una persona) il cui direttore è James Cameron e che è disponibile un trailer del film seguendo il link.
Le proprietà associate all’entità Movie sono disponibili all’indirizzo specificato nel link dell’Itemtype – questa è la screenshot della pagina dove puoi vedere la proprietà director che può essere ulteriormente esplosa per dare ulteriori informazioni sulla figura del direttore.
In particolare possiamo fornire degli elementi discriminanti molto importanti del direttore come la Data di Nascita il Cognome ed il Nome.
Essendo queste proprietà legate alla persona che a sua volta è il direttore del film, è possibile legare funzionalmente all’Entità Movie l’entità Person mediante un’operazione di Nesting ovvero il collegamento di diverse entità tra loro. Nella slide prendo lo schema fornito e fin qui utilizzato per espanderlo ulteriormente con un’operazione di “annidamento” (=nesting) dove l’itemprop viene utilizzato come collegamento tra le due entità (Movie e Person).
Il risultato del nuovo markup può essere visto validando il codice mediante il Google Rich Snippet Validator. Si vede come dall’Entità Movie viene fatta una chiamata ad una nuova entità Person dove vengono forniti ulteriori informazioni sulla figura del direttore: nome (givenname) cognome (familyname) e data di nascita (birthday).
Forse non hai notato che nell’introdurre le proprietà su Person è stata utilizzata una meta tag:

itemprop=”birthDate” content =”1954-08-16″

non siamo abituati a vedere meta tag nel contenuto. A tal proposito ci si dice a volte non è possibile implementare un attributo per offrire informazioni di supporto per il modo in cui il contenuto compare nella pagina – in realtà la maggioranza dei casi che si presentano sono di una scarsa presenza di informazioni che sono importanti/indispensabili per fare chiarezza e caratterizzare le informazioni e c’è bisogno di diversi meta tags a supporto.
Abbiamo introdotto molti concetti teorici anche complessi – adesso vediamo degli esempi pratici dove si affronta praticamente la creazione di schema utilizzando schema.org
Intanto una considerazione generale: schema non è utile solo perla presentazione di microdati per alcune tipologie di dati ma è una metodologia universale che si può utilizzare nei campi più disparati e quelli riportati nella slide li ho sperimentati tutti con successi più o meno interessanti.
Va detto che schema.org da solo non è il fattore determinante per molti settori ma aiuta e può aiutare tanto se l’implementazione è accurata ed attenta a fornire tutte le informazioni possibili ed immaginabili che aiutano a ridurre incertezza ed ambiguità dei dati (ricordate quanto ho detto all’inizio della presentazione?).
Altra cosa che vi anticipo: non esiste lo schema perfetto: ogni volta che ne farai uno nuovo l’esperienza maturata nei progetti precedenti ti aiuteranno a fare di più e meglio.
Devi utilizzare il validatore di rich snippet e fare in modo che non ci siano errori nel markup – nel Google Webmaster Tools alla sezione Dati Strutturati.
Per fare un buon markup con Schema è necessario un modello di riferimento del prodotto/servizio o comunque dei contenuti della pagina web.
Consideriamo l’esempio di un Hotel ci sono molte proprietà che concorrono a definire una struttura ricettiva a partire dalla proprietà, l’ubicazione, il brand, le caratteristiche (3,4, o 5 stelle – se ha una piscina, sauna centro fitness e benessere …) e poi ci sono le news e le offerte oltre alle immagini (molto importanti per un hotel).
Le immagini sono importantissime e possono essere un elemento importante nel rappresentare un albergo o prodotti: pensiamo a quante sono le proprietà che si possono associare ad un’immagine e che facciamo continuamente: vediamo la foto di una persona ed associamo a quella foto il nome della persona, il luogo dov’è stata scattata, la persona o artista che l’ha scattata, il tipo di foto (se di un matrimonio oppure una festa, uno scatto di un panorama nella natura…). Tutti questi elementi concorrono a caratterizzare una foto e nella stragrande maggioranza dei casi queste informazioni NON SONO PRESENTI nella pagina web che la riportano ne possono essere riportate per tantissimi motivi. Quindi l’uso di META TAGS in questo caso sono necessari.
La sfida qui è la possibilità di poter aprire il CMS e popolarlo con gli elementi WebPageElement per identificare intestazione e piedi pagina e sidebar. Questo in WordPress è fattibile con l’aiuto di un buon HTMLista. Al momento non sono presenti Plugin che possano fare tutto questo in automatico e non credo ce ne saranno poiché è la skin di WordPress a caratterizzare il front end e quindi il codice ultimo che viene utilizzato per il rendering del sito.
Questi aspetti sono ulteriormente complicati per le skin responsive: la presenza di ulteriori DIV o META TAGS possono compromettere il layout che va quindi verificato caso per caso.