HTML semántico.

HTML semántico y SEO

El HTML semántico consiste en usar los elementos HTML con significado, para comunicar lo mejor posible la estructura y la jerarquía de una página web a los rastreadores de los motores de búsqueda.

Esto mejora la accesibilidad y, en consecuencia, la indexación, gracias a un código estructurado y preparado para el posicionamiento orgánico, con etiquetas que definen sin ambigüedad la función de cada elemento de la página.

Elementos del HTML semántico

Veamos los elementos clave que distinguen el HTML semántico del HTML tradicional y las buenas prácticas para mejorar la estructura a nivel SEO:

• Usar etiquetas semánticas: usa etiquetas como <header>, <footer>, <nav>, <article>, <section>, <aside>, <main>, etc., para delimitar claramente las secciones de la página y su función.
• Estructura lógica: organiza el contenido de forma lógica y jerárquica. Por ejemplo, usa <h1> para los títulos principales, <h2> para los subtítulos, etc., para reflejar la estructura del contenido.
• Describir el contenido: usa las etiquetas adecuadas para cada tipo de contenido. Por ejemplo, <p> para los párrafos, <ul> y <ol> para listas no ordenadas y ordenadas, <figure> y <figcaption> para imágenes con pie, etc.
• Atributos semánticos: usa atributos como alt para dar un texto alternativo a las imágenes o title para aportar información adicional en los enlaces, para mejorar la accesibilidad y la experiencia de usuario.
• Evitar el abuso de etiquetas genéricas: no abuses de etiquetas genéricas como <div> y <span> cuando hay etiquetas semánticas más específicas adecuadas y disponibles.

Ejemplo de HTML semántico

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Título de la página</title>
</head>
<body>
    <header>
        <h1>Encabezado principal</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>Contenido de la sección Home...</p>
        </section>

        <section id="about">
            <h2>About</h2>
            <p>Contenido de la sección About...</p>
        </section>

        <section id="contact">
            <h2>Contact</h2>
            <p>Contenido de la sección Contact...</p>
        </section>
    </main>

    <footer>
        <p>Pie de página</p>
    </footer>
</body>
</html>

En este ejemplo:

• Hemos usado etiquetas semánticas como <header>, <nav>, <main>, <section> y <footer> para dar a la página una estructura más significativa.
  • La etiqueta <main> define de forma explícita el contenido principal
• Las etiquetas <h1> y <h2> se usan para el título principal y los subtítulos, respectivamente.
• La etiqueta <nav> contiene una lista de enlaces de navegación.
• Cada sección (Home, About, Contact) está dentro de una etiqueta <section> y tiene un título adecuado.
• El contenido principal de la página está dentro de la etiqueta <main>.
• Se han añadido atributos id para la navegación interna de la página.
• La etiqueta <footer> contiene el pie de página.

Como hemos dicho, el HTML semántico tiene ventajas notables a nivel SEO, pero sus beneficios no acaban ahí: es una auténtica palanca para la accesibilidad, con una experiencia mucho mejor también para las personas con discapacidad, porque los lectores de pantalla interpretan con más facilidad las secciones de la página.

Combinando HTML semántico, textos alternativos en las imágenes, roles ARIA (Accessible Rich Internet Applications) y una mejor accesibilidad con teclado, podemos crear una web más sencilla y, sobre todo, más inclusiva.

Para completar la optimización del código, además de los elementos HTML semánticos y la mejor navegabilidad que aportan a los Spiders, es esencial integrar los datos estructurados. Estos datos ofrecen información detallada al buscador y le permiten clasificar con más precisión tu proyecto.