SEO en HTML5 con elementos estructurales y semánticos

Los elementos semánticos hacen que sea fácil para las computadoras y las personas comprender por igual, el significado y el contexto del contenido de un sitio web. Anteriormente cuando se construían proyectos probablemente haya tenido que dividir la página (template) en varias regiones, como cabecera (head), pie de página (foot) y la barra lateral para poder identificar más fácilmente las regiones y poder aplicar las hojas de estilo (CSS) y los script de JavaScript.  El término “web semántica” no es nuevo, recordemos que el creador de la World Wide Web, Tim Berners-Lee, lo uso por primera vez cuando hablo de la transformación de la  World Wide Web en un entorno en el que los documentos publicados están relacionados con información y datos que especifican el contexto semántico en un formato interpretable.

Con HTML5,  un gran número de nuevos elementos se han introducido para proporcionar una mejor definición y estructura de las páginas web.

Comprendiendo los microdatos (microdata)

HTML5 introduce la posibilidad de definir la semántica personalizada utilizando los microdatos (microdata). Los microdatos permite especificar, elementos personalizados en una página Web mediante la sintaxis compuesta de pares nombre-valor con el contenido existente. Vamos al código para entender este concepto un poco extraño, no te alarmes si no conoces los atributos:

<div itemscope>
 <p>Nombre:<span itemprop="nombre">Alejandro</span>.</p>
 <p>Apellido: <span itemprop="apellido">Romero</span>.</p>
 <p> Fotografía: <img itemprop="foto" src="foto.png"> </p>
 <p>Dirección: <span itemprop="direccion">Cll 20 No. 10 - 10</span>.</p>
 <p>Documento de Identificación: <span itemprop="id">12345577</span>.</p>
 </div>

Ahora… ¿Para qué me sirve esto?

El vocabulario a través de microdatos también le permite proporcionar directrices a los desarrolladores que desean utilizar la misma estructura para describir el mismo tema que está ocurriendo en el backend. Otro aspecto mucho más importante de los microdatos se refiere a los motores de búsqueda. De hecho, los motores de búsqueda como Google están diseñados para presentar al usuario los resultados de búsqueda más útiles e informativos. Esta información no afecta el aspecto del contenido de la página, pero si permite a los motores de búsqueda entender la información que proviene de la página web. Por lo tanto, los microdatos también se utilizan como un método para hacer una página web de búsqueda más amigable para los buscadores.

“Los microdatos es uno de los tres métodos utilizados para ejecutar el marcado de contenido en HTML de una manera estructurada. (Los otros dos métodos son los microformatos y los RDFs.)”

Para crear un elemento utilizando la sintaxis de los microdatos, básicamente se van a declarar tres atributos de la especificación de HTML:

• itemscope: Un atributo booleano usado para crear un elemento.
• itemprop: Se utiliza para agregar una propiedad a un objeto o uno de los descendientes del elemento.
• itemtype: Se utiliza para definir un vocabulario personalizado.

Anteriormente había mencionado que Google se fija mucho en estos atributos para mejorar la búsqueda, vamos a utilizar y ojala lo tomen de base para sus desarrollos, la siguiente referencia  http://www.data-vocabulary.org/ es un vocabulario ya definido y aprobado por el motor de búsquedas más importante en la actualidad. De esta referencia utilizaremos http://www.data-vocabulary.org/Person/ con algunos de sus elementos y quedaría nuestro ejemplo de la siguiente manera:

<div itemscope>
 <p>Nombre:<span itemprop="nombre">Alejandro</span>.</p>
 <p>Apellido: <span itemprop="apellido">Romero</span>.</p>
 <p> Fotografía: <img itemprop="foto" src="foto.png"> </p>
 <p>Dirección: <span itemprop="direccion">Cll 20 No. 10 - 10</span>.</p>
 <p>Documento de Identificación: <span itemprop="id">12345577</span>.</p>
 </div>

Vamos a describir las propiedades del vocabulario seleccionado para este ejemplo http://www.data-vocabulary.org/Person/

Como pueden ver estos vocabularios definidos pueden ser herramientas útiles para el desarrollo y para el trabajo de SEO.

Conclusión 

Es importante utilizar esta herramienta semántica que ofrece HTML5, te puede ayudar para realizar un trabajo de SEO responsable como desarrollador; es muy importante no olvidar que son tres métodos. Por último, no dejes de verificar cada uno de los enlaces que hay en el artículo, ya que puedes encontrar cosas muy interesantes que puedes compartir en un futuro.