C’è una linea sottile che separa il web design e la programmazione dall’ottimizzazione per i motori di ricerca. Questa linea è diventata particolarmente esplicita nel momento in cui si è verificato il cosiddetto Mobilegeddon – ossia a partire da quando, esplicitamente, Google ha considerato la mobile responsiveness come parte fondamentale dell’algoritmo di ranking
Tuttavia, questa nozione non è stata interiorizzata appieno da tutti i web developer e neppure da tutti i professionisti del SEO. Troppe volte, un SEO applicato senza la dovuta attenzione ai corretti aspetti dell’HTML porta i siti a non posizionarsi come teoricamente dovrebbero
Altrettanto spesso, i motori di ricerca non riescono a comprendere di cosa parli esattamente il sito perché i contenuti, di per sé, possono convogliare sì le informazioni, ma solo fino a un certo punto. L’altro protagonista di un corretto posizionamento lavora infatti dietro le quinte, nella forma di markup semantico
Cos’è il markup semantico?
Il markup semantico potrebbe definirsi come una modalità particolare di scrivere l’HTML
I linguaggi di markup come l’HTML (HyperText Markup Language) e l’XML (Extensible Markup Language) sono responsabili della presentazione e dell’organizzazione dei documenti web in elementi diversi come liste, paragrafi, header e footer
La semantica è il significato logico e linguistico di un termine e, in senso lato, la scienza dei significati destinati a essere definiti e cristallizzati da parole significanti quando si tratti di nozioni o azioni, e da segnali morfologici quando si tratti di rapporti sintattici. Nel contesto dello sviluppo web, la semantica oltrepassa la mera funzione di presentazione e dona ai singoli elementi di un documento significati distintivi e ben identificabili
Semantica + Markup = Markup Semantico
Il markup semantico esiste da tempo ma solo raramente viene utilizzato al suo massimo potenziale. Perché? Perché esiste una tipica disconnessione tra “presentazione” (il web development) e “contenuto” (l’ottimizzazione per i motori di ricerca)
I SEO Specialist si concentrano sui messaggi che il contenuto deve trasmettere, mentre i designer e i programmatori si preoccupano di come questi contenuti appaiono e si comportano
Nella maggior parte dei casi, i tag HTML non semantici hanno lo stesso identico aspetto dei loro omologhi semantici. Ecco qualche esempio:
- <div></div>
- <span></span>
Quasi la totalità di un documento web potrebbe forse essere scritto utilizzando solamente questi due tag. Il problema è che essi organizzano il significato ma non lo convogliano: in pratica, al browser non dicono nulla riguardo al contenuto che ospitano
Al contrario, i seguenti tag sono in grado di organizzare in modo efficiente il contenuto dando, al contempo, significato al markup:
- <article></article>
- <aside></aside>
- <footer></footer>
- <header></header>
- <main></main>
- <nav></nav>
- <section></section>
- <time></time>
Con questo tipo di markup semantici, l’header, il footer e il body di un documento sono esplicitamente definiti. Il tag <nav> potrà anche delineare gli elementi di navigazione come il menu e la paginazione. <article> comunicherà che la pagina contiene un blog post o un articolo della sezione news, mentre i tag <section> divideranno l’articolo in sezioni legate l’una all’altra in modo logico
Perché il markup semantico è importante?
Le ragioni per cui i web developer dovrebbero inserire markup semantici nei loro documenti HTML sono numerose:
- Best Practices: prima di tutto, il design semantico è uno standard W3C. Se non altro, dunque, sarebbe opportuno uniformarsi a questa best practice perché è ritenuta preferenziale da tutti i browser, le aziende IT e i motori di ricerca. Non solo: il markup semantico migliora il workflow tra gli sviluppatori: se uno di essi riceve una pagina che è già stata identificata semanticamente da un altro developer, comprenderà appieno la funzionalità dell’intero documento e dei suoi componenti individuali
- User Experience: in alcuni casi, gli elementi semantici hanno un aspetto diverso e garantiscono un’esperienza utente diversa. È dunque più conveniente per i lettori “a schermo” – e anche per i browser – trovarsi di fronte a un contenuto semanticamente strutturato. In questo modo, l’utente potrà identificare più velocemente i vari elementi della pagina. Questo tipo di vantaggio vale anche per i rich snippet, che possono essere mostrati nei risultati di ricerca e producono maggiori percentuali di click-through
- Buon design significa buon SEO: la semantica è parte integrale dell’ottimizzazione per i motori di ricerca. Si pensi ad esempio della “ossessione” del SEO per le parole chiave, che rappresentano un vero e proprio segnale per i motori: “Ehi Google, questo contenuto è rivelante per determinate query!”. Certamente, questa è una motivazione solo parziale per l’utilizzo di markup semantici. Facciamo però un esempio: marcare un blog post con il tag semantico <article> permette ai crawler dei motori di ricerca di capire che la pagina in questione ospita contenuto editoriale. In questo modo, dunque, un post blog non si posizionerà solo per la query “graphic design” ma anche per long-tail quali “articoli sul graphic design”
In conclusione, i markup semantici permettono a tutti gli attori – dagli sviluppatori ai motori di ricerca, fino agli utenti – di comprendere che il developer sapeva esattamente cosa stava facendo nel momento in cui scriveva il codice. In pratica, l’utilizzo dei markup semantici è simile alla corretta formattazione di una ricerca: il valore di un documento non è solo legato al suo contenuto, ma anche alla forma con cui viene presentato, che gli permette di esprimere il suo massimo potenziale