HTML Semantico.

HTML Semantico e SEO

L’HTML semantico si riferisce all’uso di elementi HTML in modo significativo per comunicare al meglio la struttura e la gerarchizzazione di una pagina web agli occhi dello Spider del Motore di Ricerca.

Questo scenario migliora l’accessibilità e di conseguenza l’indicizzazione da parte dei Motori di Ricerca grazie all’utilizzo di un codice strutturato e propedeutico al posizionamento organico grazie a dei marcatori che ne definiscono in modo inequivocabile lo scopo dei singoli elementi che compongono le pagine.

Elementi HTML Semantico

Vediamo assieme quali siano gli elementi chiave che contraddistinguono l’Html semantico rispetto al tradizionale Html e quali le best practice per migliorare la struttura a livello SEO:

• Uso di tag semantici: Utilizzare tag come <header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, ecc., per delineare chiaramente le sezioni della pagina e il loro scopo.
• Struttura logica: Organizzare il contenuto in modo logico e gerarchico. Ad esempio, utilizzare <h1> per i titoli principali, <h2> per i sottotitoli e così via, per riflettere la struttura del contenuto.
• Descrizione del contenuto: Utilizzare tag appropriati per descrivere il tipo di contenuto. Ad esempio, utilizzare <p> per i paragrafi di testo, <ul> e <ol> per elenchi non ordinati e ordinati, <figure> e <figcaption> per immagini con didascalie, ecc.
• Attributi semantici: Utilizzare attributi come alt per le immagini per fornire testo alternativo, title per fornire informazioni aggiuntive sui link, ecc., per migliorare l’accessibilità e l’esperienza utente.
• Evitare l’uso eccessivo di tag generici: Evitare l’uso eccessivo di tag generici come <div> e <span> quando tag semantici più specifici sono appropriati e disponibili.

Esempio HTML Semantico

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Titolo della Pagina</title>
</head>
<body>
    <header>
        <h1>Intestazione Principale</h1>
        <nav>
            <ul>
                <li><a href="#home">Home</a></li>
                <li><a href="#about">About</a></li>
                <li><a href="#contact">Contact</a></li>
            </ul>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h2>Home</h2>
            <p>Contenuto della sezione Home...</p>
        </section>

        <section id="about">
            <h2>About</h2>
            <p>Contenuto della sezione About...</p>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <p>Contenuto della sezione Contact...</p>
        </section>
    </main>

    <footer>
        <p>Footer della Pagina</p>
    </footer>
</body>
</html>

In questo esempio:

• Abbiamo utilizzato tag semantici come <header>, <nav>, <main>, <section> e <footer> per strutturare la pagina in modo maggiormente significativo.
  • Il tag <Main> è stato utilizzato per definire in modo esplicito il contenuto principale
• I tag <h1> e <h2> sono stati utilizzati per i titoli principali e i sottotitoli, rispettivamente.
• Il tag <nav> contiene un elenco di collegamenti di navigazione.
• Ogni sezione (Home, About, Contact) è racchiusa in un tag <section> e ha un titolo appropriato.
• Il contenuto del corpo della pagina è incluso nel tag <main>.
• Sono stati aggiunti attributi id per la navigazione interna della pagina.
• Il tag <footer> contiene il contenuto del piè di pagina.

L’Html Semantico come abbiamo detto ha notevoli vantaggi a livello SEO ma i suoi benefici non si esauriscono qui e rappresentano un vero e proprio grimaldello per migliorare l’accessibilità con una UX estremamente migliorata anche a chi ha disabilità grazie ai screen reader che decifrano in modo più agevole le varie sezioni delle pagine.

Integrando il Semantic HTML, l’utilizzo degli Alt Text nelle immagini, i ruoli ARIA (Accessible Rich Internet Application) e migliorando l’accessibilità tramite tastiera saremo in grado di creare un web più semplice e soprattutto inclusivo.

Per completare la nostra ottimizzazione del codice, oltre all’uso di elementi HTML semantici con relativo miglioramento della navigabilità per gli Spider, è essenziale integrare i dati strutturati. Questi dati forniscono informazioni dettagliate al motore di ricerca, consentendogli di classificare in modo più accurato il nostro progetto online.