Semantica HTML5 e Schema.org, sai veramente come usarli?

Oggi affrontiamo un argomento che lo sviluppatore che è in te dovrebbe conoscere veramente bene, non tanto perché la semantica presenta nuovi elementi e attributi da utilizzare nel tuo codice HTML, ma piuttosto perché con queste nozioni sarai in grado di costruire pagine web più comprensibili da parte dei motori di ricerca in modo da migliorare i prodotti che consegni ai tuoi clienti.

Parlo di clienti perché essere in grado di creare dei siti web comprensibili ai motori di ricerca migliorerà la qualità del tuo lavoro e di conseguenza la tua professionalità, cose che non dobbiamo mai prendere sottogamba in un mercato pieno di cugggini in grado di realizzare pagine web.

I consigli che troverai all’interno di questo articolo sono stati affrontati in un webinar che abbiamo registrato, se preferisci questo formato puoi consultarlo direttamente da questa pagina proprio qua sotto, ma allo stesso tempo nell’articolo trovi i blocchi di codice che ti permetteranno di capire meglio i singoli aspetti.

Insomma, ci sono veramente tante cose da vedere, quindi non voglio perdere altro tempo e vado subito ad analizzare le migliorie che puoi utilizzare sin da ora.

Cosa è la Semantica?

Forse sono partito un po’ in quarta e non ti ho spiegato che cosa sia questa componente essenziale di qualsiasi sito web. Con il termine semantica si intende avere le potenzialità e le competenze di assegnare un significato ad un significante, che nel nostro caso specifico non è altro che un elemento HTML.

Grazie alla semantica possiamo assegnare un significato ai nostri elementi HTML.

Fare questa operazione è sempre stato un compito difficile perché i motori di ricerca non sono in grado di riconoscere l’importanza semantica dei nostri elementi se le pagine web vengono costruite con i <div>,

un contenitore generale che non porta alcun significato semantico.

Per fortuna con l’avvento dell’HTML5 le cose sono cambiate e grazie ai nuovi elementi, che andremo a conoscere a breve, è possibile definire direttamente nel nostro codice quale sia la porzione di testo che definisce i componenti essenziali di un testo come la sua introduzione, il corpo o anche la navigazione e i contenuti che sono di appoggio a quello principale presente nella pagina web.

Ma perché ti dovrebbero interessare queste cose, in fin dei conti sei un frontend developer, giusto?

Ci sono certe persone che pensano che il lavoro di uno sviluppatore sia soltanto quello di creare il prodotto, non è importante che questo ne conosca lo scopo oppure che partecipi alle riunioni riguardanti l’usabilità e il design… Dal mio punto di vista, che poi è quello che portiamo anche in azienda, non c’è niente di più sbagliato.

Noi sviluppatori siamo un componente fondamentale sia nelle fasi di progettazione che (ovviamente) in quelle di realizzazione del prodotto digitale perché siamo quelli incaricati di fornire il miglior aspetto possibile al prodotto che stiamo realizzando. In questo contesto mi sto riferendo all’aspetto non soltanto nel senso grafico e quello che vedrà il cliente finale, ma le nostre pagine hanno un aspetto anche per quanto riguarda i motori di ricerca e i vari programmi che rendono accessibile il web (screen reader, screen magnification e speech recognition).

Da questo concetto diventa chiaro che se vogliamo rendere il sito web o l’applicazione accessibile a più utenti possibili, scrivere pagine web come lo si faceva 5 anni fa non ha più molto senso.

In questo articolo andremo a vedere l’aspetto semantico dal punto di vista dei motori di ricerca e non seguendo da vicino le regole di accessibilità presenti nel WCAG, aggiungere semantica ci avvicinerà molto a rendere le pagine più accessibili, ma per creare un prodotto che rispetta queste linee guida dovremmo fare ulteriori operazioni che non andremo a vedere oggi. Magari questo aprirà le porte ad un prossimo articolo dove analizzeremo questo aspetto da vicino; se sei interessato non devi far altro che aggiungere il tuo commento nella sezione finale dell’articolo 😉

La Semantica in HTML5

Torniamo a parlare quindi di semantica e soprattutto di quella che possiamo raggiungere con l’HTML5. Come abbiamo discusso con Eugenio e Daniele nel nostro webinar, grazie a questa nuova versione è stato possibile mettere molto ordine all’interno delle nostre pagine perché fino a poco tempo fa l’unico elemento blocco che poteva contenere qualsiasi tipo di contenuto era il <div>.

Questo creava non pochi problemi visto che il motore di ricerca si trovava molto spesso di fronte a una pagina così composta:

<div>
	<!-- Testata e navitazione -->
</div>
<div>
	<!-- Corpo e contenuti -->
</div>
<div>
	<!-- Sidebar -->
</div>
<div>
	<!-- Footer -->
</div>

Come puoi notare tu stesso, a parte gli id che comunque non portano alcun valore semantico, la pagina appena realizzata è piena di <div>

che non aiutano i motori di ricerca e i programmi precedenti a comprendere quali sono gli elementi che definiscono un determinato contenuto presente nella pagina.

All’interno delle definizione degli elementi HTML5 ne abbiamo visti nascere di nuovi che consentono di aggiungere della semantica utile alle nostre pagine, da questa definizione possiamo trasformare il precedente blocco di codice in:

<header>
	<!-- Testata -->
	<nav>
		<!-- Navigazione -->
	</nav>
</header>
<main>
	<!-- Contenitore principale -->
	<section> ... </section>
	<section> ... </section>
	<section> ... </section>
</main>
<aside>
	<!-- Sidebar -->
</aside>
<footer>
	<!-- Footer -->
</footer>

Con questa struttura siamo in grado di definire i componenti presenti nella pagina e anche se nel webinar discutiamo nel dettaglio di questi elementi e di come devono essere utilizzati, lasciami aggiungere questo elenco per fornire chiarezza a questo articolo:

• <header> – questo elemento permette di definire la testata di uno specifico componente all’interno del quale è possibile inserire informazioni aggiuntive riguardanti la pagina o l’articolo all’interno del quale viene inserito. È molto importante che tu comprenda l’importanza di uno specifico componente dato che questo elemento può essere ripetuto nelle nostre pagine andando a evidenziare diverse porzioni di contenuto interessante.
• <nav> – grazie a questo è possibile indicare la navigazione principale del sito. Al suo interno dovrai inserire i link che aiutano la navigazione e l’accesso alle varie pagine che lo compongono e anche se ripetibile all’interno del nostro codice, è consigliabile utilizzarlo una sola volta per non far confondere i motori di ricerca o gli screen reader.
• <section> – un contenitore generico di un documento o di un’applicazione. Abbiamo discusso molto questo tipo di elemento all’interno del nostro webinar perché il suo ingresso ha confuso moltissimo le idee di molti sviluppatori, ma principalmente serve proprio a delineare un raccoglitore di contenuto. Specificando, se all’interno di una tua pagina è presente una lista di articoli non devi far altro che racchiudere la lista con questo specifico elemento.
• <aside> – con questo è possibile aggiungere un insieme di informazioni che arricchiscono e approfondiscono i contenuti che vengono presentati nel contenuto principale della pagina web consultata ma, come nel nostro esempio, può anche essere utilizzata per delineare la sidebar del nostro layout come specificato anche da HTML5 Doctor.
• <footer> – anche se in questo caso viene identificato come il pié di pagina questo è un elemento ripetibile che il motore di ricerca sa che verrà utilizzato per raccogliere informazioni aggiuntive come la sitemap del sito e altre informazioni utili. Quindi come è successo per l’elemento <header> anche in questo caso il <footer> può essere ripetuto più volte a seconda delle informazioni contenute all’interno della pagina.

Insomma questo è soltanto una piccola descrizione degli elementi che abbiamo utilizzato in questa pagina di esempio, se vuoi approfondire puoi vedere il nostro webinar oppure consultare le pagine di HTML5 Doctor. L’aspetto importante che voglio mettere in luce è che con questi nuovi elementi semantici il contenuto diventa parte integrante del nostro codice.

Ovviamente con questo piccolo esempio non siamo andati a conoscere tutti gli elementi semantici che sono stati introdotti, come avrai notato dalla lista presente su HTML5 Doctor, gli elementi a nostra disposizione sono veramente molti e ciascuno di questi richiederebbe un articolo a parte.

Forse un giorno andremo a colmare questa lacuna creando un glossario, ma ricorda che che oggi più che mai il tuo lavoro è importante, sia dal punto di vista della realizzazione del codice che dell’importanza che stiamo assumendo come architetti dell’informazione.

Informazioni aggiuntive grazie a Schema.org

Con la dichiarazione precedente, ovvero che oltre che sviluppatori stiamo diventando anche degli architetti dell’informazione, spero di averti fatto capire che il tuo ruolo diventa sempre più fondamentale e che dovresti far comprendere questi concetti sia ai tuoi colleghi che al tuo cliente.

Soprattutto perché, oltre agli elementi che puoi utilizzare, oggi hai a disposizione anche dei nuovi attributi che ti permetteranno di aggiungere un ulteriore valore semantico ai tuoi elementi che potranno essere sfruttati all’interno delle SERP, le pagine contenenti i risultati delle ricerche effettuate dai motori di ricerca.

Questo significa che non soltanto dovrai conoscere i nuovi elementi che aiutano sia i motori di ricerca sia i programmi dedicati all’accessibilità, ma dovrai anche conoscere gli attributi in grado di fornire ulteriori informazioni in modo da garantire una comprensione del testo senza la possibilità di fraintendimenti.

Prendiamo un esempio pratico che abbiamo analizzato anche all’interno del webinar: una qualsiasi ricetta di cucina.

A parte gli ingredienti da utilizzare, che sono sicuramente di fondamentale importanza per la buona riuscita del piatto, ci sono molte altre informazioni che potrebbero interessare l’utente che sta cercando questo tipo di contenuto come per esempio il tempo di preparazione, la valutazione degli utenti, l’immagine del piatto finito e il numero di calorie che si assumeranno.

Grazie a Schema.org possiamo fornire tutte queste informazioni all’interno delle nostre pagine e il motore di ricerca sarà in grado di utilizzarle come meglio desidera, proprio come mostrato nell’immagine qua sotto:

Nonostante che io abbia cercato il termine “ricetta pasta al peso” è curioso notare che il primo risultato non inserisce questo termine in testa alla stringa del titolo (come molti colleghi SEO suggeriscono), questo è dovuto al fatto che il sito in questione sta utilizzando la struttura proposta dallo Schema.org nel modo corretto.

Per scoprire quali attributi potrai utilizzare per passare queste informazioni ai motori di ricerca non dovrai far altro che andare a consultare il sito Schema.org e controllare la tabella dedicata al tipo di contenuto che vuoi ottimizzare, nel nostro caso le ricette.

Dall’immagine si nota che le informazioni che siamo in grado di inserire nelle nostre pagine sono veramente molte e se visiti la pagina scoprirai che il numero aumenta man mano che prosegui verso il basso. Questo però ci porta ad affrontare un quesito interessante: come faccio a inserire queste informazioni?

Ebbene la risposta è molto semplice perché questi elementi si comportano esattamente come dei classici attributi HTML ai quali vanno assegnati dei valori. Tutto lo Schema.org si basa sull’utilizzo di tre attributi:

• itemscope – questo è l’attributo principale che non richiede alcun tipo di valore, semplicemente dice ai motori di ricerca che il contenuto presente all’interno del contenitore in cui viene dichiarato è un tipo di Schema.org che vogliamo utilizzare.
• itemtype – con questo primo attributo identifichiamo il tipo di informazione che stiamo passando, nel nostro esempio questo attributo servirà per indicare la struttura della recipe.
• itemprop – ecco l’attributo che ci troveremo a inserire più spesso all’interno del contenitore e ci permette di identificare le varie informazioni che compongono il contenuto che stiamo dichiarando.

Ovviamente questa è tutta teoria e sono convinto che tu desideri osservare qualche esempio dal vivo, non è forse vero? Ebbene, anche se stiamo raggiungendo la fine dell’articolo, ecco un piccolo esempio che spero possa aiutarti a capire meglio come lavorare con le informazioni ottenute da questo tipo di schema:

<section itemscope itemtype="recipe"> 
	<header> 
		<h1 itemprop="name">Pasta al pesto</h1> 
		<img itemprop="image" src="pasta-pesto.jpg" alt="Pasta al Pesto"> 
	</header>
	<div id="ingredienti">Informazioni Nutrizionali: 450 calorie, 9 grammi di grasso</div>
	<article itemprop="description" class="desc"> ... </article> 
	<footer> 
		Tempo di preparazione: <meta itemprop="prepTime" content="PT15M">15 minuti 
    	Tempo di cottura: <meta itemprop="cookTime" content="PT1H">1 ora 
	</footer> 
</section>

Come puoi notare tu stesso, gli elementi HTML5 che abbiamo utilizzato sono gli stessi che ti avevo presentato precedentemente (a parte <article> che comunque approfondiamo molto nel video). La prima cosa che voglio farti notare è come viene personalizzato il contenitore dell’intera ricetta, la nostra <section>.

Grazie all’uso degli attributi itemscope e itemtype, come accennato precedentemente, siamo in grado di dire al motore di ricerca che le informazioni contenuto all’interno di questo blocco sono relative a una ricetta, questo ci consentirà di utilizzare i successivi itemprop che si legheranno alle singole informazioni.

Se sei stato attento avrai notato che in questo blocco di codice accadono un paio di cose strane, o meglio cose che non ti ho ancora spiegato.

La prima è che all’interno di un contenitore personalizzato con lo Schema.org è possibile inserirne un altro che ha caratteristiche specifiche. Nell’esempio che ti ho mostrato ho creato un nuovo <div> che oltre ad avere la itemprop con valore nutrition abbiamo aggiunto un itemtype che va a indicare lo schema in grado di descrivere i valori nutrizionali.

Ovviamente questo è possibile perché le regole definite da Schema.org lo permettono e per questo motivo ti consiglio di salvare tra i preferiti questo sito perché è incredibilmente utile e ti aiuterà a rendere le informazioni presenti sulle tue pagine ancora più semplici da utilizzare.

Un’altra cosa che personalmente mi ha incuriosito è che puoi utilizzare i <meta> per portare informazioni. A differenza di quello che possiamo pensare, o almeno che ho sempre pensato io, questi elementi possono essere utilizzati anche nel <body> e risultano incredibilmente utili per passare informazioni strutturate per la macchina, ovvero non direttamente comprensibili dall’essere umano.

Tempo di preparazione: <meta itemprop="prepTime" content="PT15M">15 minuti 
Tempo di cottura: <meta itemprop="cookTime" content="PT1H">1 ora

Adesso dovresti essere in grado di poter costruire le tue strutture HTML inserendo in queste anche le informazioni semantiche che ti permettono di creare un prodotto migliore. Prima di andare nella parte conclusiva dove riepiloghiamo i contenuti presentati in questo articolo voglio ricordarti due cose.

Se sei rimasto con qualche dubbio, non esitare a usare la sezione dei commenti per chiedere chiarimenti oppurediscuti di questi aspetti assieme agli altri Skillati. Quest’ultima possibilità è dedicata agli utenti che hanno stretto un abbonamento con il nostro portale.

La seconda cosa che voglio ricordarti è l’importanza che una tua condivisione può avere nei nostri confronti. Come puoi vedere, su questo blog pubblichiamo moltissimi articoli che presentano le nuove tecniche e tecnologie che puoi utilizzare nel tuo lavoro e molto probabilmente la tua vita professionale è circondata da colleghi che potranno beneficiare delle informazioni che sarai in grado di condividere.

Oltre che aiutare noi, cosa per la quale avrai per sempre la nostra stima, sarai anche in grado di posizionarti come il professionista che è sempre sul pezzo e conosce per primo le ultime novità; cosa che ti permetterà di ricevere anche non pochi ringraziamenti 😉

Conclusioni

In questo articolo abbiamo esposto dei concetti che ritengo fondamentali se desideri chiamarti esperto. Grazie alla conoscenza dei nuovi elementi HTML5 e allo Schema.org potrai trasformare le pagine web che realizzi rendendole più semplici da consultare sia da parte dei motori di ricerca che dai lettori.

Sapere che con dei semplici elementi HTML, che fino a poco tempo fa erano utili soltanto per definire la struttura delle tue pagine web, adesso puoi aggiungere anche del valore semantico alle tue pagine è un valore aggiunto che potrai fornire ai tuoi clienti e ti permetterà di differenziarti dalla marea di cugini che popolano il web.

Spero che la spiegazione dello Schema.org non sia stata troppo difficile e ti confesso che sono curioso di scoprire i tuoi lavori! Non esitare quindi a chiedere consiglio all’interno del nostro forum e farci sapere quali sono i dubbi che ti affliggono; ricorda che siamo qua per aiutarti!