HTML5: SEO y Web Semántica
Fuente: compilando.es
El pasado miércoles 22 de Junio 2011 tuve el placer de asistir a un taller introductorio de HTML5 y CSS3 impartido por Miguel Jiménez en el Aula Vulcan de los amigos de DotNetMania en Madrid.
Este pequeño curso tenía el objetivo de mostrar las novedades de HTML5 y CSS3 desde un punto de vista práctico haciendo hincapie en las características y ventajas frente al ya obsoleto modelo de web actual.
En futuros post iré expicando por encima las principales características de este nuevo lenguaje así que hoy empezamos por uno de los aspectos que me parecieron más importantes: Facilidad para crear una buena Web Semántica.
Una Web Semántica no es más que una página web cuyo código html es facilmente legible y entendible por robots, buscadores y lectores de web.
Actualmente no se presta mucha atención a este aspecto a menos que tu web tenga que pasar los controles de accesibilidad para ciegos o tenga una alta importancia a nivel de indexación en buscadores. Y es que actualmente la estructura de nuestro código html es caótica, sin relación entre cada elemento y, lo que es peor, desestandarizada ya que cada uno pone lo que quiere.
¿Cómo puede un buscador saber, por ejemplo, qué parte de tu código html es el menú principal o la cabecera? La respuesta es simple: No puede.
Os pongo un ejemplo de una página típica con una cabecera, un menú superior de navegación, un cuerpo, lateral y pie de página. Si somos un poco ordenados podríamos tener una estructura como esta:
Cómo veis tenemos una serie de div para crear nuestros controles y cada uno con su clase css asignada dónde indicamos el tamaño, la posicón, etc...
Este código a simple vista parece ordenado y se sabe cada div a qué parte de la web corresponde, ¿no? Bueno, a tus ojos si que puede parecerlo pero para un buscador o para un lector de web para ciegos un div con una clase "menu" es lo mismo que "cabecera" o "estilo1", ¿cómo se supone que debe saber Google dónde está nuestro menú principal así?
Esto es lo que HTML5 resuelve con el uso de etiquetas semánticas para identificar cada uno de estos elementos de forma única e inequívoca: header, nav, article, section, aside y footer (entre otros).
Estos nuevos elementos se muestran en tu navegador como un div con la salvedad de que, al tener un nombre único, los lectores automáticos son capaces de entender que contiene y para que sirven cosa que hasta ahora era imposible.
- <header> es la etiqueta utilizada para albergar los elementos que forman la cabecera de nuestra web. Tomando como ejemplo esta misma web sería el título "Compilando.ES", subtítulo y fondo azul de la parte superior.
- <nav> representa el contenedor de nuestro menú de navegación. Es de vital importancia resaltar este contenedor para que Google pueda generar los enlaces automáticos que aparecen debajo de tu web al buscarla. Por ejemplo:
- <article> representa un elemento independiente y con sentido propio dentro de la web. El ejemplo es claro, cada post de este blog debería estar embebido en una etiqueta <article>.
- <section> define una sección dentro del contenedor en el que se anida. Por ejemplo, una <section> en un post de este blog sería el listado de tags al pie.
- <aside> representa la información que no está directamente relacionada con el resto de la web como la barra lateral con el blogroll o una banner de publicidad.
- <footer> es el contenedor que alberga los elementos del pie de la página.
En nuestro ejemplo usando estas nuevas etiquetas semánticas de HTML5 la cosa quedaría así:
-
<header></header>
-
<nav></nav>
-
<article>
-
<section></section>
-
</article>
-
<aside></aside>
-
<footer></footer>
-
</body>
Como veis el código queda más simple y entendible, no solo por ojos humanos si no por los buscadores que ahora ya sabrán dónde buscar los links o que parte de la web corresponde al texto o cabecera.
Además, al tener cada etiqueta un identificador único el estilo CSS se simplifica ya que basta con sobreescribir el estilo del "header" para dar formato a la cabecera sin tener que asignarle una clase con un nombre inventado por nosotros.
Espero que el ejemplo haya quedado claro y veais que es muy sencillo cambiar la vieja y desestructurada metodología de divs por esta nueva estructura semántica de HTML5.
¡¡Nos vemos Compilando!!
Para finalizar introducimos el dominio al que deseamos que realice la redirección.
