Come si è visto nel precedente articolo i dati strutturati possono essere integrati seguendo diverse strade.
Ora andiamo a vedere come integrarli tramite microdata, ovvero a livello di codice HTML.
Premettiamo che i Microdata sono uno dei due formati preferiti da Google ma non rappresentano il metodo per eccellenza che è invece rappresentato da Json LD.
I microdata sono però leggermente più semplici da integrare e comunque pienamente supportati.
Lo schema di riferimento è sempre schema.org e i tag come già accennato vengono integrati a livello di html tramite un semplice markup.
La cosa più complicata sarà rispettare correttamente la gerarchia dei vari elementi, sopratutto in funzione del fatto che tale gerarchia dipende dal tipo e dal contenuto del sito web.
Un blog ad esempio avrà uno schema completamente diverso dal sito web di un negozio per mobili e addirittura due blog diversi potrebbero applicare schemi differenti.
Molto dipende dall'obbiettivo che si vuole raggiungere. Come è già stato detto i Microdata (e i dati strutturati in genere ) possono servire sia per la corretta contestualizzazione dei contenuti, sia per la strutturazione di rich snippets nei risultati di ricerca. Entrambe le cose portano diversi vantaggi.
Mettiamo caso che in un vostro articolo parliate di apple, è importante spiegare al crawler se state parlando di apple device o di apple pie in modo da uscire in maniera pertinente rispetto alla ricerca dell’utente su google, evitando che chi stia cercando un telefono cellulare nuovo, finisca sul vostro blog di ricette di torte, in quanto l’utente abbandonerebbe subito la pagina andando ad aumentare la vostra frequenza di rimbalzo.
La pertinenza dei risultati unita alla qualità dei contenuti, diminuiscono la vostra frequenza di rimbalzo e quindi migliorano indirettamente il trust score del sito.
Il contenitore principale
Per cominciare aggiungiamo l’itemscope principale al tag <body> della pagina, questo identificherà il contesto generale
Utilizzeremo Creative work come esempio per il mark-up di un blog, ma non sarebbe stato neanche sbagliato utilizzare WebPage.
Creative work identifica un sito web contenente una o più opere create da qualcuno, potrebbero essere film, opere d’arte, libri, scritti di svariata natura, articoli, blogpost, giochi, software, discussioni e molte altre.
Itemscope indica l’apertura dell’elemento e tutti gli altri attributi item al suo interno, saranno suoi figli, mentre itemtype, identifica la natura dell’ elemento appena aperto.
Ovviamente un negozio di mobili utilizzerà come itemtype un ramo del vocabolario più adatto, come ad esempio FurnitureStore.
Elementi di navigazione
All’ interno di una pagina web quale che sia, generalmente uno dei primi elementi che si incontrano nel codice è la barra di navigazione. Andiamo ad applicare lo schema a questo elemento, specificando che è un elemento di navigazione, quali sono i suoi link e le varie destinazioni.
Vediamo nell'esempio sopra come itemprop vada a definire la propietà di uno specifico campo
Campo di ricerca
All’ interno dell’elemento di navigazione potremmo trovare la barra di ricerca.
Applicare i microdata correttamente sul campo di ricerca, può generare un rich snippet dotato della stessa barra, rendendo possibile la ricerca dei contenuti interni direttamente dallo snippet.
Incontriamo per la prima volta il tag meta abbinato ai Microdata, questo ci viene in soccorso molte volte sia come in questo caso per indicare la forma della query di ricerca e la pagina alla quale passarla, sia in quei casi in cui l'informazione serve per i dati strutturati ma non deve essere esplicitamente stampata nella pagina per l'utente. ad esempio potremmo voler stampare la data di creazione di un articolo di un blog ma non la data di ultima modifica.
in questo caso la data di ultima modifica possiamo passarla come meta. l'importante è che sia annidata correttamente.
L'elenco degli articoli
Vediamo un esempio su come eseguire il mark-up di un eventuale lista di articoli mischiando un po di dati stampanti direttamente a video con un po di meta:
Questo riportato è un esempio di schema applicato a uno degli elementi di una lista di articoli, generata magari da un ciclo php server-side o da un each js client-side. Il risultato del validatore sulla singola riga dovrebbe essere qualcosa del genere:
Markup dell'articolo
Nella pagina di visualizzazione del singolo articolo, applicheremo il markup direttamente al contenuto, in maniera del tutto simile a come lo abbiamo applicato alla lista degli articoli ma fornendo informazioni in più come ad esempio il testo vero e proprio dell'articolo o l'elenco dei tags abbinati.
ricordiamoci che questi sono esempi e che molti rami vocabolario possono essere approfonditi come ad esempio i dati specifici dell'autore che essendo una persona potrebbe disporre dei campi disponibili nel ramo person del vocabolario schema.org, che potete trovare all'indirizzo http://schema.org/Person.
Altri campi potrebbero essere aggiunti all'insieme dei campi a disposizione sull'articolo, come ad esempio, i commenti o le valutazioni.
Alla fine del markup, l'analisi coi tools di verifica vi fornirà una panoramica dei vari elementi ai quali avete applicato gli schemi:
- WebSite - Il campo cerca
- SiteNavigationElement - Menu di navigazione
- Blog - L'articolo
- BlogPosting - La lista degli articoli
CONSIDERAZIONI
Come si sarà intuito non esiste "LA" giusta maniera per applicare lo schema o più precisamente non c'è un metodo unico per tutte le possibili situazioni. Ogni caso è a se e richiede un markup unico, dipendente dalle esigenze, dall'obbiettivo, dalla disponibiltà dei dati e dalle parti grafiche.
Bisogna indagare a fondo nel vocabolari schema.org, nelle linee guida di google, testare le proprie configurazioni col il tool di test google https://search.google.com/structured-data/testing-tool
"Bell'articolo, in rete ce ne sono molti ma pochi sono così chiari :-) Oltre allo schema per i blog, hai anche qualche esempio o qualche link su come applicare lo schema ai siti istituzionali delle aziende ?"
Lascia un commento