Las etiquetas semánticas de HTML5 no mejoran el SEO por arte de magia. Mejoran el SEO cuando ayudan a Google a leer la jerarquía real de la página sin tener que adivinar.
El problema aparece cuando se usan como si fueran un <div> con mejor reputación. Ahí es donde empiezan los bloques sin función clara, varios niveles que compiten entre sí y una estructura que parece ordenada para el desarrollador, pero no para el buscador.
Menos etiquetas, más señales útiles
En la mayoría de las páginas no hace falta montar una arquitectura compleja. Normalmente basta con dejar claras cuatro cosas:
- dónde empieza el encabezado
- dónde termina la página
- cuál es el contenido principal
- qué piezas acompañan al contenido principal, pero no lo lideran
Con eso, etiquetas como <header>, <footer>, <main>, <article> y <aside> suelen cubrir casi todo lo importante.
Ese esquema parece casi demasiado simple. Justamente por eso funciona. Marca lo esencial y evita ruido.
El error más común: usar etiquetas semánticas para maquetar
La confusión más habitual es envolver cualquier bloque visual con <section> o <article> solo porque queda más "moderno" que un <div>.
En la captura anterior se ve un <article> con su <h1>, que va bien. Lo que sobra es la colección de <section> alrededor del título, sin una lógica temática clara.
<section> no existe para dibujar cajas. Sirve para dividir un contenido autónomo en partes con sentido propio. Si metes section por todas partes, Google deja de ver prioridades y empieza a ver ruido.
Cuándo sí tiene sentido usar <section>
Hay páginas donde <section> encaja perfectamente. Un análisis de producto es un buen ejemplo: diseño, pantalla, cámara, batería, rendimiento. Ahí sí existen subtemas claros dentro de una misma pieza.
Cuando cada bloque responde a una pregunta distinta y podría entenderse por separado, <section> ayuda. Cuando solo separa trozos por estética, sobra.
Qué conviene comprobar antes de usarlo:
- cada
<section>trata un subtema reconocible - cada bloque tiene su propio encabezado, normalmente un
<h2>o<h3> - el contenido del bloque se entiende incluso si lo sacas del resto del artículo
- la separación responde a la lógica del tema, no a la del diseño
Si no puedes justificar eso, usa <div> y ya está.
<article> y <aside> hablan de jerarquía
Con <article> pasa algo parecido. No es "el contenedor grande". Es la unidad principal de contenido que tiene sentido por sí sola: un post, una ficha, una noticia, una reseña.
Cuando debajo del contenido principal añades productos relacionados, enlaces a posts o módulos parecidos, no siempre deben vivir como otro <article> al mismo nivel. Muchas veces lo correcto es bajarlos un escalón semántico.
Ahí entra <aside>. Es la etiqueta adecuada para contenido relacionado pero secundario: artículos enlazados, accesorios, widgets de apoyo, cajas de autor, CTAs, bloques de suscripción.
Dicho de forma práctica:
<article>es el contenido que debería poder circular por sí solo<aside>es contenido que acompaña, amplía o empuja, pero no lleva el foco
Un solo <h1> sigue siendo la opción más segura
El estándar moderno permite varios <h1> en ciertos contextos. Aun así, para SEO la recomendación útil sigue siendo la misma: una página, un solo <h1>.
Ese <h1> debería vivir dentro del <article> principal. Cuantas más excepciones inventes, más fácil es que diluyas el tema central de la URL.
Regla rápida para estructurar una página sin liarte
Si quieres una forma sencilla de decidir qué etiqueta usar, piensa en este orden:
- Usa
<header>para la cabecera global o de la pieza. - Usa
<footer>para el pie. - Usa
<main>una sola vez para la zona principal de la página. - Dentro de
<main>, reserva<article>para el contenido único y más valioso de esa URL. - Usa
<aside>para lo relacionado pero secundario. - Añade
<section>solo cuando realmente divides el tema en subbloques con entidad propia.
Si tu página ya es grande y no tienes claro si la jerarquía quedó bien, una revisión en SEO Analyzer puede ayudarte a detectar señales mezcladas antes de que se conviertan en un problema de indexación o relevancia.
Otras etiquetas semánticas que sí merece la pena usar
La semántica no se acaba en la estructura de bloques. También hay etiquetas útiles a nivel de texto:
<strong>para marcar importancia real, no para poner negritas por costumbre.<em>para enfatizar una palabra o giro concreto.<mark>para resaltar algo que de verdad quieres destacar.<abbr>para siglas y abreviaturas con su explicación completa.<figure>y<figcaption>para imágenes, diagramas o ejemplos que necesitan contexto.<ul>y<ol>cuando la información funciona mejor como lista.<table>y<caption>cuando presentas datos tabulados y quieres que el contexto quede claro.
Las tablas bien marcadas siguen siendo una muy buena forma de exponer información estructurada. Si además llevan un <caption> útil, le pones bastante más fácil el trabajo a Google.
Conclusión
La semántica útil no va de llenar el HTML de etiquetas "correctas". Va de quitar ambigüedad.
Cuando una página deja claro qué es principal, qué es apoyo y cómo se reparte el tema, los buscadores lo entienden más rápido. Y cuando lo entienden mejor, también resulta más fácil que indexen, clasifiquen y muestren la URL con el contexto adecuado.
Así que la regla es sencilla: usa menos etiquetas, pero úsalas con intención.
Recursos
- Guía sobre elementos semánticos en W3Schools
- Visor para revisar la estructura HTML5 de una página: Semantic HTML5 Viewer
- Si quieres detectar problemas técnicos relacionados con estructura y rastreo, puedes revisar tu sitio con SeoSpeedup
