HTML5: ¿Qué son los Microdatos en SEO y cómo usarlos?

Los microdatos no son algo exclusivo del SEO, pero sí que empiezan a tener cada vez más sentido y todos los que trabajamos en el mundo del posicionamiento en buscadores empezamos a encontrar mayor relación entre el término microdatos, el HTML5 y el SEO, por lo que parece necesario entrar en detalles sobre qué es microdata y de qué manera puede ayudarnos a indexar mejor nuestras páginas en Google, Bing y demás motores de búsquedas.

Qué es Microdatos

Los microdatos se refieren a una especificación de HTML5 relativamente reciente que simplemente ayuda a los robots o computadoras a entender qué contenido hay en una página. ¿Cómo sucede esto? Lo que hace es una especie de embed de los datos que deben leer las máquinas dentro de documentos HTML.

Importancia de los microdatos en SEO

Los microdatos son un punto que, aun si no se pensara de esa forma y que si bien probablemente de momento no esté considerado como alguno de los 200 factores SEO de Google, irremediablemente serán importantes para el posicionamiento en buscadores y es bueno considerarlos a la hora de optimizar tus páginas sin duda. Esto se debe a que lo que hace esta «microdata» es facilitar el trabajo de las arañas de los buscadores. Simplemente se hacen más legibles para los buscadores y les permiten parsear y clasificar mejor tu página de acuerdo a los contenidos o búsquedas que les puedan corresponder.

En general, los microdatos no son solo para SEO, pueden servir para que, por ejemplo, los navegadores Web entiendan mejor el contenido de una página y hacer más fácil la experiencia para un usuario. Por ejemplo, detectar automáticamente una fecha de un evento que promocionas en tu página y agregarla directamente a tu calendario.

Pero cuando hablamos estrictamente de posicionamiento, los microdatos son utilizados por Google, Bing, Yahoo! y compañía para mostrar en sus resultados algo conocido como «rich snippets«, algo que si aún no sabes qué es, es bueno que lo vayas leyendo, ya que para muchos puede suponer un nuevo paso en el futuro del SEO. Por ejemplo, al buscar fechas de eventos, recetas de cocina o opiniones de algún producto, puede dar prioridad a contenidos con rich snippets mejor organizados y más útiles para los usuarios.

Entonces, es posible que un buscador sepa que tu página pone una receta y que tiene muchas opiniones y buenas valoraciones y así darle prioridad dentro de las SERPs porque es más relevante y más fácil de clicar.

Google sobre los microdatos y rich snippets

Cómo agregar microdatos a tu página

Las especificaciones de microdatos suponen cinco nuevos atributos al HTML5:

itemprop— Es el atributo que define los nombres de los campos en tu microdata

itemscope— Esto indica que un elemento es parte de un grupo de microdatos

itemref— Esta es una lista de identificadores de elementos asociados entre sí, aun sin estar dentro del mismo itemscope.

itemtype— Esta es la URL que da el contexto a los microdatos.

itemid— Este es un identificador global que es reconocido fuera de la página Web.

Atributos de microdatos con microformatos

Los atributos HTML5 antes mencionados se usan con términos de microformatos para definir el contenido de tus páginas. Algunos de los más utilizdos son los siguientes:

hCalendar— Para enmarcar eventos y añadirlos como calendarios

hReview— Para marcar opiniones sobre productos, servicios, etc.

hRecipe— Para recetas de comida

Definición y ejemplo de microdatos

Entonces, para utilizar los microdatos correctamente, debes definir primero los atributos adecuados en tu HTML. Por ejemplo, para una notificación de un evento añadiéndole información hCalendar con microdatos habría que hacer algo así:

<h2>Próximos Eventos</h2>
<article id=bday>
<h3>Fiesta de Graduación</h3>
<p>
<strong>Cuándo:</strong> <data value=»20-10-2014″>20 de Octubre, 2014</data> desde las<data value=»2014-10-20T19:00-0800″>6pm</data> hasta las<data value=»2014-10-20T22:00-0800″>10pm</data>
</p>
<p>
<strong>Dónde:</strong> Aula Magna de la Universidad
</p>
<p>
<strong>Motivo:</strong> ¡Porque por fin nos graduamos!
</p>
</article>

Primero tendrías que determinar el itemtype en el elemento artículo alrededor de este evento. Eso sería el hCalendar en, por ejemplo, «https://googleseo.marketing/perfil/hcalendar» y itemscope al elemento artículo:

<article id=grado itemscope

itemtype=»https://googleseo.marketing/perfil/hcalendar»>

Entonces se debe definir el propio evento con el atributo itemprop establecido como vevent  en el artículo:

<article itemprop=»vevent» id=grado

itemtype=»https://googleseo.marketing/perfil/hcalendar»>

Para darle un nombre al evento, añade al heading del artículo el atributo summary:

<h3 itemprop=»summary»>Fiesta de Graduación</h3>

Además, ya que estamos usando el elemento data para definir las fechas, podemos añadirles las propiedades dtstart y dtend a esos elementos:

<strong>Cuándo:</strong> <data itemprop=»dtstart» value=»2014-10-20″>20 de Octubre, 2014</data> desde las<data itemprop=»dtstart»value=»2014-10-20T19:00-0800″>7pm</data> hasta las <dataitemprop=»dtend» value=»2014-10-20T22:00-0800″>10pm</data>

Y por último, añadir un elemento span en la ubicación para poder añadir el atributo location.

<strong>Dónde:</strong> <span itemprop=»location»>Aula Magna de la Universidad</span>

Así tenemos todo el HTML con los microdatos definidos. Incluso podríamos añadir un hCard para mejorar el SEO haciendo que sea localizable en un servicio de mapas como Google Maps.