Publicidad

La importancia semántica del HTML5: ¿usas bien las tags de HTML5?

Autor: | Categoría:

La versión de HTML5.0 ya está acabada y éste 2014 se empezarán a hacer las últimas actualizaciones de la version HTML5.1 para dar paso en 2015 a la versión HTML5.2, eso significa que HTML5 ya debería de ser tu estandar de maquetación en tus proyectos, olvidando la obsoleta version HTML4 y que deberías convertirte en un peregrino del HTML5.

¿Por qué es semántico el HTML5?

La web semántica es la evolución de la web 2.0 y de las necesidades del mercado que, debido a la expansión de la información y de la necesidad de filtrarla se pensó en hacer una estructura HTML que permitiese organizar la información mucho mejor para que los bots rastreadores de los buscadores pudieran recorrerla más exactamente para tal de mostrar la información solicitada por los usuarios en sus grillas de resultados de búsqueda (SERPS).
Semántica… ¿qué significa? Pues significa que los bots saben el significado de cada tag HTML y qué tipo de información se proporciona en esa parte dentro de una web, pudiendo organizar jerárquicamente la información y siendo más exacto el resultado mostrado en los SERPS. Es decir, cada etiqueta tiene un significado muy claro, por lo tanto: ¡usa las tags de HTML5 correctamente y deja de usar divs como un loco!

Cómo estructurar tu página con tags HTML5

Aquí viene lo divertido. Partiendo de la base que es una estructura jerárquica tienes que tener claro qué función tiene cada parte de la página dentro de un contexto jerarquizado, y pensar en tu página HTML como un mapa conceptual.

Bien, sabiendo eso, mi pregunta es: ¿puede ir un <section> dentro de un <article>? Poder si puede, pero ¿puedes meter el envoltorio dentro de una piruleta? Si puedes pero no es lo lógico. Entonces la estructura lógica de una web simple sería la siguiente:

<header>
   <nav>
      <ul>
         <li><a href="#">MENU LINK 1</a></li>
         <li><a href="#">MENU LINK 2</a></li>
      </ul>
   </nav>
</header>
<section>
   <article>
      <h1></h1>
      <p></p>
   </article>
   <article>
      <h1></h1>
      <p></p>
   </article>
   <aside>
      <ul>
         <li><a href="#>RELACIONADOS 1</a></li>
         <li><a href="#>RELACIONADOS 2</a></li>
      </ul>
   </aside>
</section>
<footer></footer>

Ahora está más claro, ¿no? Gracias a esta manera de jerarquizar, los bots entienden que dentro de tu página hay un cabecero, un navegador, unas secciones divididas en partes denominadas <articles> con sus respectivos títulos y links, y de esta manera categorizarán mejor el contenido y podrán almacenar la información de tu web de una manera mucho más ordenada y ofrecerán al usuario que haga una búsqueda dentro de tu temática contenido relevante para el, convirtiendo tu contenido en mucho más valioso. Dicho de otra manera, tu web se indexará mejor y más rápido.

Conclusión

Usa las tags de HTML5 header, nav, section, article, h1, h2, aside y footer… de manera inteligente y verás como tu web se indexa mejor.
Como has podido ver, el HTML5 nos trae unas ventajas para SEO que no podemos desaprovechar, así que ya estás poniéndote en frente de tu pantalla y analizando tu web para convertir su html en HTML5, darle una importancia semántica al código y usar bien las tags que este lenguaje de maquetación nos brinda, para que tu web sea indexe mejor y sea mucho más SEO friendly.

Publicidad
Etiquetas: , , , , ,
  • Francisco

    Me agrado mucho tu información, se agradece la info. Me ayudo,no podrías compartir mas sobre este tipo de información de estructura y como interrelacionarla con su posterior diseño(css)

    • Francisco! Gracias por tu comentario, un placer poder ayudarte 🙂
      Pues es una buena idea, aunque en cuestión de SEO poco influye el CSS, pero si que puedo hacer una guía de tendencias CSS3 que se siguen en la actualidad para que la maquetación y el diseño vayan de la mano.

      Un saludo y de nuevo gracias!

  • Muchas gracias por tu articulo. ¿Que opinas de la nueva etiqueta ? me parece muy util pero casi nunca la veo referenciada en ningún post acerca del tema.

    • Gracias a ti por el comentario!
      Sobre la etiqueta que comentas, el W3C (el organismo que intenta poner un poco de standares sobre este caos llamado internet XD ) recomienda usar role=”main” de momento, hasta que todos los navegadores sean capaces de indexar correctamente e interpretar la etiqueta . Así que de momento creo que deberíamos hacerle caso y ceñirnos a eso. ¿Como lo ves?

  • Pingback: Cómo mejorar el posicionamiento en buscadores de tu web aplicando estos 10 consejos | Dashaft - The Creative Blog()

¡Suscríbete!

¡Sé el primero en enterarte de las novedades del diseño web y mejora tus conocimientos!

Suscríbete al blog por correo electrónico

Introduce tu correo electrónico para suscribirte a este blog y recibir notificaciones de nuevas entradas.

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies