HTML5 y SEO: Microdatos

 

Existen 3 maneras de incrustar o agregar contenido que pueda ser leido por una computadora o máquina en un documento HTML:

[list] [li type=”glyphicon-plus”]Microformatos[/li] [li type=”glyphicon-plus”]HTML+RDFa[/li] [li type=”glyphicon-plus”]y microdatos (microdata en ingles)[/li] [/list]

Esta vez hablaré de Microdatos.

¿Para que agregar Microdatos? Agregando microdatos a las paginas Web se ayuda a los motores de búsqueda a “entender” mejor el contenido de las paginas, de que hablan, los temas que se tocan, etc, el proposito de los microdatos es la Optimización de los Motores de Búsqueda (Search Engine Optimization: SEO). Hay que tener en cuenta que mucha de esta información podría no ser visible en el sitio o por el humano pues es información semántica especialmente agregada para los Motores de búsqueda.

Los microdatos se usan para describir Personas, Eventos, Productos, Organizaciones, Teléfonos, etc, a esto se le llaman vocabularios o esquemas (schema en ingles) y cada uno contiene diferentes piezas de información para describirlo, por ejemplo: nombre, país, imagen, URL, etc  si eres programador y conoces la terminología de la programación orientada a objetos, haz de cuenta y caso que el “Vocabulario” es una Clase y sus propiedades son los atributos de la clase, y puedes poner un esquema dentro de otro para complementar información, por ejemplo, en el esquema Persona para poner su dirección puedes usar el esquema Dirección y asi sucesivamente.

Un ejemplo rápido de microdatos para describir a una persona podría ser:

Ahora bien, como mencione antes, se pueden intercalar o anidar diferentes esquemas, para el ejemplo anterior podríamos agregar una dirección mas completa así:

Estos datos pueden ser interpretados, procesados o presentados según sea el caso:

[list] [li type=”glyphicon-minus”]Los datos anteriores un navegador o alguna extensión podrido interpretarla y proponer mostrar la ubicación en un mapa.[/li] [li type=”glyphicon-minus”]A través de javascript se puede accesar a esta información.[/li] [li type=”glyphicon-minus”]Para otro tipo de microdatos, como eventos, se puede mostrar un calendario.[/li] [li type=”glyphicon-minus”]Un web crawler podría interpretar una dirección y presentarla de una manera diferente en el buscador.[/li] [/list]

Herramientas de prueba de Microdatos

Una de los recursos mas importantes y populares para hacer pruebas con los microdatos (también microformatos y RDFa) es la página de Google que habla sobre los datos estructurados y fragmentos enriquecidos (rich snippets), si quieres probar puedes hacerlo aqui https://developers.google.com/structured-data/testing-tool/

Veamos el siguiente ejemplo el cual genera un parrafo sencillo (para el usuario) y que con los microdatos le dice al buscador que ver o leer

Ejemplo en JsBin

Código fuente:

El código anterior muestra una página algo asi:

Y asi es como Google interpreta los datos:

Google Microdatos RenderEn este enlace puedes verlo en la pagina de Google.

Otra herramienta que puedes probar es Live Microdata en el cual en lugar de mostrar una tarjeta con la información, extrae los microdatos en formato JSON. Pega el código HTML anterior y has la prueba.

¿Como se implementan los microdatos?

Para agregar microdatos a una página HTML debes conocer 3 atributos: itemscope, itemtype e itemprop.

  1. Define un contenedor y agregale el atributo itemscope, con esto defines un objeto global:
  2. Especifica el esquema o vocabulario (schema) usando el atributo itemtype:
    Para ver una lista de los diferentes esquemas o vocabularios, puedes hacerlo en la siguiente página: http://www.schema.org por ejemplo, para ver el esquema de Persona (person) puedes hacerlo aquí http://schema.org/Person
  3. Agrega las propiedades usando el atributo itemprop en los elementos HTML

Elementos compatibles con itemprop

Elements that can be associated with microdata
Elemento HTML5Valor asociado de microdato
<a><area><audio><embed><iframe>,
<img><link><object><source>, or <video>
El dato es la url en href, src, o el atributo dat
<time>El dato es el valor contenido en el elemento datetime
<meta>El dato es el valor contenido en el meta.
Cualquier otro elementoEl texto que aparezca en el elemento

Espero haber sido lo suficientemente claro y si hay dudas, contactame, estoy a la orden.

No olvides agregarte en el grupo [button style=”btn btn-primary btn-lg” icon=”fa fa-facebook-square” align=”left” iconcolor=”#ffffff” type=”link” target=”true” title=” Hablemos de SEO” link=”https://www.facebook.com/groups/HablemosDeSEO.ninja” linkrel=””] en Facebook

Si quieres que te avise cuando escriba algo nuevo, puedes suscribirte aquí:

No olvides agregarte en el grupo [button color=”success” size=”” type=”squared” target=”false” link=”https://www.facebook.com/groups/HablemosDeSEO.ninja”]Hablemos de SEO[/button] en Facebook


Recuerda que puedes encontrar mas info, tips, comentar, preguntar en los siguientes grupos en Facebook:

[button color=”primary” size=”” type=”” target=”false” link=”https://www.facebook.com/groups/desarrolladores.elsalvador”]Desarrolladores PHP El Salvador[/button][button color=”danger” size=”” type=”” target=”false” link=”https://www.facebook.com/groups/HablemosDeSEO/”]Hablemos de SEO[/button][button color=”info” size=”” type=”” target=”false” link=”https://www.facebook.com/groups/freeit”]Soy de IT y Soy Libre[/button][button color=”warning” size=”” type=”” target=”false” link=”https://www.facebook.com/groups/html5yhtml51/”]HTML5 y 5.1 de Verdad[/button]

 

Comentarios

Comenta