El problema no es el HTML. El problema es cuando todo parece lo mismo
Puedes construir una página entera con <div> y va a funcionar. El navegador la mostrará y el usuario quizá ni note la diferencia. Pero para un buscador, una plantilla hecha solo con contenedores genéricos obliga a adivinar qué bloque es el contenido central y cuáles son navegación, widgets, enlaces relacionados o pie de página.
Ahí es donde el HTML5 semántico sí marca distancia. Etiquetas como <header>, <main>, <article>, <aside> y <section> no están para que el código "se vea moderno". Están para describir la función real de cada zona de la página.
Cuando esa estructura está clara, el buscador tiene menos ruido y más contexto. Y eso, en páginas con barras laterales agresivas, módulos de recomendación o mucho contenido repetido, se nota.
Por qué esto sí afecta al SEO
Google no necesita que le traduzcas cada línea de HTML. Lo que sí agradece es que no mezcles la pieza principal con bloques que se repiten en todo el sitio.
Pasa mucho en medios, ecommerce y blogs grandes:
- el artículo convive con menús, filtros, banners y recomendaciones,
- la barra lateral mete entidades y keywords que no son el tema central,
- el footer suma enlaces sitewide que no deberían pesar igual que el contenido principal.
Si no separas esas piezas, el buscador tiene que inferir cuál es el foco real. A veces acierta. A veces no del todo. El marcado semántico reduce esa ambigüedad.
Imagina una review del BMW X5. En la misma página puedes tener enlaces a Mercedes GLE, Audi Q7, comparativas y consejos de mantenimiento. Todo eso aporta, pero no debería competir con el tema principal. La estructura semántica sirve justo para eso: dejar claro qué es protagonista y qué es material de apoyo.
Empieza por las zonas grandes: <header>, <main> y <footer>
La primera capa es bastante simple:
<header>para cabecera y navegación global,<main>para el contenido único de esa URL,<footer>para el pie y enlaces de cierre.
1<body> 2 <header> 3 <!-- logo, navegación principal, buscador --> 4 </header> 5 6 <main> 7 <!-- contenido principal y único de esta página --> 8 </main> 9 10 <footer> 11 <!-- copyright, enlaces legales, contacto --> 12 </footer> 13</body>
Dos notas prácticas que se suelen pasar por alto:
- En cada página debería haber un solo
<main>. - Estas etiquetas definen significado, no estilos. Si las usas para maquetar y no para estructurar, te quedas a medias. El aspecto visual lo resuelve CSS.
Usa <article> para encerrar la pieza que de verdad responde a la búsqueda
Dentro de <main>, muchas veces conviene ir un paso más allá. Si la URL publica una unidad de contenido autosuficiente, lo normal es envolverla en <article>.
Sirve para:
- posts de blog,
- noticias,
- guías extensas,
- reviews,
- páginas que podrían circular por sí mismas.
Lo habitual es que el <h1> principal viva ahí dentro.
1<main> 2 <article> 3 <h1>BMW X5: prueba completa y opinión</h1> 4 <p>Contenido principal del análisis...</p> 5 </article> 6</main>
Eso le dice al buscador: esto es lo que esta URL vino a resolver.
Lo secundario no sobra, pero conviene aislarlo con <aside>
<aside> es útil cuando tienes contenido relacionado, pero no central. Puede estar dentro de <article> si amplía el tema, o fuera si funciona como apoyo general de la página.
Buenos usos:
- bio del autor,
- definiciones rápidas o contexto adicional,
- módulos de artículos relacionados,
- banners o promos,
- widgets laterales.
1<main> 2 <article> 3 <h1>BMW X5: prueba completa y opinión</h1> 4 <p>Contenido principal...</p> 5 6 <aside> 7 <p>Ficha rápida del modelo y datos técnicos.</p> 8 </aside> 9 </article> 10 11 <aside> 12 <h2>También te puede interesar</h2> 13 <ul> 14 <li><a href="/mercedes-gle-review">Mercedes GLE</a></li> 15 <li><a href="/audi-q7-review">Audi Q7</a></li> 16 </ul> 17 </aside> 18</main>
Esta separación evita que Google le dé el mismo peso temático a la review del BMW X5 y a los enlaces del carrusel lateral. No hace magia, pero ayuda a que la plantilla no se coma el tema.
<section> no es un reemplazo elegante de <div>
Aquí suele haber más abuso que beneficio.
<section> tiene sentido cuando agrupas una parte temática de un contenido y esa parte suele tener su propio encabezado. En una guía larga, por ejemplo, puedes dividir por bloques claros: estructura general, uso de article, uso de aside y errores frecuentes.
Eso sí tiene lógica. Usarlo para envolver cualquier caja porque "queda más semántico" no.
1<article> 2 <h1>Cómo usar etiquetas HTML5 semánticas</h1> 3 4 <section> 5 <h2>Qué hace main</h2> 6 <p>...</p> 7 </section> 8 9 <section> 10 <h2>Cuándo usar article</h2> 11 <p>...</p> 12 </section> 13</article>
Regla rápida: si el bloque no tendría un título claro o no representa una parte temática diferenciada, probablemente no necesita <section>.
Una checklist útil antes de tocar plantillas
Si quieres revisar una plantilla con criterio SEO, empieza por aquí:
- comprueba si la página tiene un solo
<main>, - mira si el contenido que responde a la intención principal está dentro de
<article>, - separa módulos laterales, promos y enlaces de apoyo con
<aside>cuando toque, - usa
<section>solo para dividir temas reales, no para pintar cajas, - revisa que el orden visual y el orden semántico no se contradigan,
- prueba varias plantillas, no solo el blog: categorías, fichas, landings y páginas de recursos.
En sitios grandes, estos fallos suelen repetirse por plantilla. Corregir uno no mejora solo una URL. Puede mejorar cientos.
En resumen
El HTML5 semántico no sustituye al contenido, ni a la intención de búsqueda, ni a una arquitectura interna decente. Pero sí ayuda a que el buscador entienda mejor dónde está la respuesta principal y qué bloques son contexto, navegación o ruido de plantilla.
Si estás auditando páginas que ya reciben tráfico y aun así no terminan de despegar, merece la pena revisar esto. En un análisis técnico con SeoSpeedup Site Audit, este tipo de señales estructurales se detectan rápido y suelen destapar problemas que no se ven a simple vista.
