HTML semántico

Ventajas del HTML semántico sobre el HTML tradicional

HTML semántico y SEO

El HTML semántico se refiere al uso de elementos HTML de forma significativa para comunicar mejor la estructura y jerarquía de una página web a los ojos de la araña de los motores de búsqueda.

Este escenario mejora la accesibilidad y, en consecuencia, la indexación por parte de los Motores de Búsqueda gracias a la utilización de un código estructurado que prepara el posicionamiento orgánico gracias a marcadores que definen de forma inequívoca la finalidad de cada uno de los elementos que componen las páginas.

Elementos HTML semánticos

Veamos juntos cuáles son los elementos clave que distinguen el Html semántico del Html tradicional y cuáles son las mejores prácticas para mejorar la estructura a nivel SEO:

  • Uso de etiquetas semánticas: Utiliza etiquetas como <cabecera>, <pie de página>, <nav>, <artículo>, <sección>, <aparte>, <principal>etc., para delimitar claramente las secciones de la página y su finalidad.
  • Estructura lógica: Organiza los contenidos de forma lógica y jerárquica. <> <> Por ejemplo, utiliza h1 para los títulos principales, h2 para los subtítulos y así sucesivamente, para reflejar la estructura del contenido.
  • Descripción del contenido: Utiliza etiquetas adecuadas para describir el tipo de contenido. Por ejemplo, utiliza <p> para párrafos de texto, <ul> e <ol> para listas ordenadas y desordenadas, <cifras> e <figcaption> para imágenes con pies de foto, etc.
  • Atributos semánticos: Utiliza atributos como alt en las imágenes para proporcionar un texto alternativo, title para proporcionar información adicional en los enlaces, etc., para mejorar la accesibilidad y la experiencia del usuario.
  • <> <> Evita el uso excesivo de etiquetas genéricas: Evita el uso excesivo de etiquetas genéricas como div y span cuando haya disponibles y sean adecuadas etiquetas semánticas más específicas.

Ejemplo de HTML semántico

Copy to Clipboard

En este ejemplo:

  • <header> <nav> <main> <section> <footer> Utilizamos etiquetas semánticas como , , , y para estructurar la página de forma más significativa.
    • <> La etiqueta Principal se utilizó para definir explícitamente el contenido principal
  • <h1> <h2> Las etiquetas y se utilizaron para los títulos principales y los subtítulos, respectivamente.
  • <nav> La etiqueta contiene una lista de enlaces de navegación.
  • <section> Cada sección (Inicio, Acerca de, Contacto) está encerrada en una etiqueta y tiene un título apropiado.
  • <main>El contenido del cuerpo de la página se incluye en la etiqueta.
  • id Se han añadido atributos para la navegación interna de la página.
  • <footer> La etiqueta contiene el contenido del pie de página.

El Html semántico, como hemos dicho, tiene ventajas considerables a nivel de SEO, pero sus beneficios no acaban ahí, y representan una verdadera pica para mejorar la accesibilidad con una UX extremadamente mejorada incluso para las personas con discapacidad gracias a los lectores de pantalla que descifran más fácilmente las distintas secciones de las páginas.

Integrando el HTML semántico, el uso de Alt Text en las imágenes, las funciones ARIA (Accessible Rich Internet Application) y mejorando la accesibilidad del teclado, podremos crear una web más sencilla y, sobre todo, inclusiva.

Para completar nuestra optimización del código, además del uso de elementos HTML semánticos con la consiguiente mejora de la navegabilidad para las arañas, es esencial integrar datos estructurados. Estos datos proporcionan información detallada al motor de búsqueda, permitiéndole clasificar nuestro proyecto online con mayor precisión.

Pestañas relacionadas: Datos estructurados | Informes

Ficha Seo Spider