Le pagine web non sono solo quello che vediamo navigando, ma hanno un significato molto importante dato dal codice HTML usato per costruirle. Definire nella maniera corretta la struttura dei contenuti di una pagina web serve ad assegnare una gerarchia e un senso ai vari elementi che la compongono, così da permettere ai motori di ricerca di capirne meglio il contenuto e quindi di poter soddisfare in maniera più precisa le query degli utenti, andando infine a migliorare di conseguenza il proprio posizionamento nella SERP.
Il web oggi è sempre di più composto da oggetti e relazioni tra di essi.
Questo, in termini di SEO, significa analizzare le diverse entità presenti in una pagina web e stabilirne gerarchie e connessioni, così da consegnare ai motori di ricerca un contenuto ottimizzato che non soddisfa semplicemente l’intento di ricerca dell’utente, ma si collega al concetto nascosto dietro la ricerca effettuata.
Negli ultimi anni, l’indicizzazione dei motori di ricerca si basa su algoritmi semantici basati sull’intelligenza artificiale.
Da quando Hummingbird ha fatto la sua comparsa nel 2013, il web e la SEO non sono più stati gli stessi: si è passati da una ricerca basata su combinazioni di lettere ad una in cui le parole chiave sono elementi di un insieme (chiamato entità).
Per questo negli ultimi anni si parla di web semantico e di SEO semantica: si passa da dall’ottimizzazione basata sulle singole keyword, alla creazione di correlazioni tra i vari elementi che creano un contesto semantico che rende l’interpretazione più facile e automatica da parte dei motori di ricerca.
Diventa quindi sempre più importante spiegare ai motori di ricerca quali sono gli elementi della pagina, così da poter aumentare il senso del contenuto scritto, ad esempio: qual è il menù? il titolo? il prezzo del prodotto?
Ma cos’è la SEO semantica e come ci siamo arrivati?
Il web semantico
Verso la fine degli anni ’90, Tim Berners-Lee, fondatore del World Wide Web, parlò per la prima volta di «un web in cui i computer diventino capaci di analizzare tutti i dati: contenuti, link, transazioni tra persone e macchine. […] Quando ciò succederà il commercio, la burocrazia, le nostre stesse vite quotidiane saranno gestiti da macchine che parlano con altre macchine» (T. Berners-Lee, M. Fischetti, “Weaving the Web”, 1999).
Affinché ciò succeda, è necessaria la creazione di una rete semantica che colleghi i dati online, il web semantico.
Attraverso la codifica delle informazioni mediante ontologie e la descrizione formale dei concetti articolata per classi, relazioni e regole, infatti, le macchine saranno in grado di interpretare e utilizzare le informazioni correttamente.
Quali sono i tag HTML semantici?
Un tag semantico è un elemento HTML che descrive senza ambiguità il proprio significato (e, di conseguenza, il proprio contenuto) sia al browser che lo decodifica, sia allo sviluppatore che lo usa lato codice.
Per questa peculiarità, i tag semantici sono particolarmente rilevanti dal punto di vista della SEO.
Vediamo i principali (qui è disponibile un elenco più dettagliato).
<header>
Informazioni introduttive della pagina, o intestazione di una determinata sezione (contiene ad esempio il logo, il titolo, il menu).
Informazioni a piè pagina o in chiusura di una sezione (ad es. copyright, autore del sito).
<main>
Identifica la parte principale della pagina.
<h1>, <h2>, fino a <h6>
I tag intestazione definiscono l’alberatura del contenuto, assegnando ai vari elementi una struttura gerarchica (come in un libro: sezione/capitolo/paragrafo…).
Definisce una serie di link di navigazione, solitamente i menu.
<aside>
Individua il contenuto oltre la principale area di contenuti, quindi separato (ad es. barra laterale di navigazione).
<ul>, <ol>
Creano liste di elementi ordinate o non ordinate.
<a>
Identifica un link a un’altra pagina o sezione di pagina.
Identifica un bottone interattivo e cliccabile, utilizzabile per mostrare / nascondere del contenuto, aprire un popup etc. Spesso link <a> e bottoni <button> vengono utilizzati in maniera interscambiabile essendo entrambi elementi cliccabili, soprattutto <a> al posto di <button>, ma questo oltre a non essere semanticamente corretto crea anche un problema legato all’accessibilità.
Vediamo un esempio semplice di pagina strutturata correttamente.
- il tag <header> racchiude tutta la fascia iniziale
- il menù è taggato con <nav>, <ul> e <a>
- il titolo principale è <h1>
- il titolo secondario è <h2>
- i titoli delle sezioni sono <h3>
- i bottoni sono link <a>
L’analisi semantica: associare i tag corretti al design
“L’analisi semantica è l’attività di assegnazione di un significato, un senso, alla struttura sintattica corretta e, di conseguenza, all’espressione linguistica. Il processo computazionale automatico che effettua tale assegnazione di significato alle parole di un testo è detto disambiguazione.” Wikipedia
In linguistica, la semantica studia il significato delle parole e le mette in relazione al mondo intorno a noi, stabilendo un nesso tra quello che “scriviamo” e “gli oggetti” che ci circondano.
Lo stesso concetto si applica alla SEO semantica.
Infatti, così come avviene per i testi scritti, i compiti di scuola, le lettere, i romanzi, avviene anche per le pagine web, in cui le diverse entità sono messe in relazione tra loro attraverso particolari istruzioni che vengono date ai motori di ricerca per associarle tra loro.
Altrimenti una pagina sarebbe una serie indistinta di parole e non si capirebbe cosa è titolo, cosa è testo, cosa è lista, cosa è data, prezzo, ecc.
A ciascun elemento è dato un significato ben definito ed è inserito in una gerarchia ordinata.
Per questo sviluppatore e SEO specialist lavorano insieme per definire la struttura HTML della pagina, dove inserire e con quale gerarchia i tag titoli, l’uso dei filtri, e quali tag HTML sono più indicati per delineare specifiche sezioni di pagina.
L’impatto dell’HTML semantico sul posizionamento SEO
Nonostante il codice di una pagina sia un aspetto invisibile e decisamente meno “sexy” rispetto al design e ai contenuti, una struttura ben fatta è l’equivalente di avere ottime fondamenta per una casa. Gli investimenti nei contenuti sono potenziati se la struttura del sito che li ospita è ottimizzata.
Questo è un esempio di crescita organica dopo essere intervenuti sulla struttura di un sito non ottimizzato
Puoi approfondire le potenzialità di un intervento alla struttura del sito nel nostro articolo che spiega cos’è la SEO on site.
Preferisci un caso studio? Abbiamo aiutato Tecnoinox a risolvere dei problemi del suo sito in 6 lingue grazie alla SEO tecnica.
I dati strutturati per dare un significato al contenuto
“I dati strutturati sono un formato standardizzato per fornire informazioni su una pagina e classificarne il contenuto.” (Google Developers)
Questi dati vengono inseriti nel codice HTML delle pagine e servono a dare ai motori di ricerca maggiori informazioni quando devono classificare un sito web o una pagina, influendo quindi su indicizzazione e posizionamento nella SERP.
Si definiscono “dati strutturati” perché sono costruiti secondo uno schema definito, cioè il “vocabolario” consultabile su schema.org.
La presenza di queste meta-informazioni permette ai crawler di navigare meglio il sito, riconoscere le entità nella pagina, capire la relazione tra le pagine e le varie entità presenti in ciascuna di esse e, infine, valutarlo in termini di pertinenza e rilevanza con le query degli utenti.
Possono essere sia degli attributi HTML aggiunti ai normali tag sia, nella forma preferita, dei dati in formato JSON.
Vediamo insieme qualche esempio di funzionalità dei dati strutturati.
- [Article]: usato nelle pagine di news, blog e articoli ne migliora l’aspetto nella SERP di Google, ad esempio mostrandole nel carosello “Notizie principali”, mettendone in evidenza titolo, data e immagini.
- [Author]: identifica l’autore del contenuto.
- [Organization]: definisce il tipo di organizzazione (ad es. scuola, ONG, azienda, club).
- [Review]: identifica la recensione di un elemento (ad es. un ristorante, un prodotto, un film).
- [Product]: identifica un prodotto con le sue recensioni, prezzo, disponibilità.
Chi fosse interessato, può consultare la pagina Google Search Central dedicata all’argomento.
BONUS: HTML semantico e accessibilità: un principio comune
Creare uno schema ordinato e significativo della struttura della pagina e dei contenuti è un’azione importante non solo dal punto di vista SEO, ma anche dell’accessibilità di un sito.
Per accessibilità, così come definito dalle linee guida dell’AGID (l’Agenzia per l’Italia digitale) si intende “la capacità dei sistemi informatici di erogare servizi e fornire informazioni fruibili, senza discriminazioni, anche da parte di coloro che a causa di disabilità necessitano di tecnologie assistive o configurazioni particolari.“
Un HTML semantico definisce la struttura gerarchica dei contenuti e delle informazioni del sito web, rendendo quelle informazioni accessibili anche per gli utenti con problemi di vista che usano software di lettura dello schermo.
Gli screen reader infatti leggono il contenuto della pagina e lo “traducono” in un formato funzionale per l’utente (come il parlato udibile o il Braille). È quindi evidente che senza una struttura ordinata dei contenuti, il lettore si ritroverebbe davanti ad un muro di testo o ad informazioni inconsistenti e di inutile valore per l’utente.
Una struttura semanticamente corretta permette inoltre all’utente di navigare agevolmente tra i vari elementi, riconoscendo chiaramente qual è il menu della pagina, il titolo, i link.
