Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SEO

Una Introducción al Marcado de Datos Estructurados

by
Read Time:11 minsLanguages:
This post is part of a series called SEO Fundamentals for Web Designers.
Why You Should Add Authorship Information to Your Website
Take Control of Your Social Snippets

Spanish (Español) translation by Rodney Martinez (you can also view the original English article)

El término Dato Estructurado, se refiere a la información formateada en una forma comprehensible universalmente. Los motores de búsqueda como Google, Bing y Yahoo, usan datos estructurados (implementados dentro de las páginas web) que son para refinar los resultados de las búsquedas, filtros con gran precisión y mejora la forma en la cual se muestran los resultados. Esto hace que sea más fácil para los usuarios encontrar la información que están buscando.

¿Por qué necesitamos los Datos Estructurados?

Los datos estructurados se han vuelto cada vez más importantes como parte del ecosistema de la web. - Google

Las páginas web tienen un inherente significado que los usuarios entienden cuando las leen. Los motores de búsqueda, por otra parte, tienen un entendimiento limitado del contenido de la página web. Por ejemplo, digamos que usted tiene una página web sobre "jaguar". Un motor de búsqueda podría rastrear la página, sin embargo, no sabría, necesariamente, lo que la palabra "jaguar" significa. "Jaguar", podría hacer referencia a un animal, o podría hacer referencia al fabricante de autos.

Esto hace que sea muy difícil para los motores de búsqueda mostrar resultados de búsqueda relevantes para un usuario. Los humanos pueden obtener el significado de una palabra desde el contexto de la página web, pero los motores de búsqueda tienen dificultad para hacerlo.

Con los datos estructurados usted puede ayudar a los motores de búsqueda a entender su contenido y mostrarlo en una forma útil y relevante.

¿Cómo son usados los Datos Estructurados?

Los datos estructurados tienen una ventaja importante: visibilidad. La información almacenada dentro de los datos estructurados puede ser usada por los motores de búsqueda para generar fragmentos enriquecidos. Fragmentos enriquecidos ofrecen a los usuarios información detallada y que está relacionada a sus consultas específicas.

Probablemente, usted se haya encontrado con ejemplos de estos fragmentos enriquecidos, si no, de un vistazo en Google la SERP por lasagna. Estoy seguro que usted observo las imágenes que están a la para de los resultados de búsqueda. Estas imágenes se añadieron gracias a los microdatos. Éstos pueden ser usados para ofrecer a los motores de búsqueda información adicional sobre la página web, en este caso una imagen, pero también puede añadir una clasificación, hora de cocina, cantidad de calorías, etc.

Estos fragmentos enriquecidos hacen que ciertos resultados resalten del resto, a menudo esto produce un resultado más alto en las tasas a través de clic (CTR). Algunos sitios web han reportado un incremento del 30% en CTR después de implementar la clasificación de datos estructurados. ¿Suena bastante bien, o no?

Tipos de Datos Estructurados

Hay tres tipos de marcado de datos estructurados:

  • Microdata
  • Microformats
  • RFDa

Antes de empezar a explorar estos tipos de marcado, usted necesita tener una cosa en mente: usted no puede usar más de un tipo de dato estructurado en una página web porque confunde  a los motores de búsqueda. Además, necesitamos escoger entre estas tres opciones. Pero, ¿qué es lo más adecuado para nuestro sitio web? Vamos a echarle un vistazo a todos ellos de forma individual.

Si usted quiere saber todo (y me refiero a absolutamente todo) sobre las diferencias técnicas entre RDFa, microdata y microformats, entonces le sugiero que lea Una comparación Uber de RDFa, Microdata y Microformats, escrito por Manu Sporny, Presidente del grupo en el Consorcio World Wide Web que fue quien creo RDFa.

Microdata

Microdata es, probablemente, el tipo más popular de datos estructurados, en gran medida debido al sitio web Schema.org. En este sitio web, una iniciativa de los tres motores de búsquedas más grandes (Google, Bing y Yahoo), usted encontrará una colección compartida de esquemas (microdata) que usted puede ver.

El marcado de microdata consiste de 3 elementos: itemscopeitemtype y itemprops. El atributo itemscope incluye información sobre los item. Cuando añade itemscope a su HTML, usted está especificando que el contenido dentro de su elemento escogido es sobre un ítem en particular. 

Agregue el elemento itemtype para identificar el tipo de contenido. Use este atributo justo después de itemscope.

En este ejemplo, el itemscope informa a los motores de búsqueda que el item que está dentro del div es de hecho, un evento. Itemtypes siempre son agregados como URLs. Usted puede encontrar una lista completa de todos los itemtypes en Schema.org.

Ahora que los motores de búsquedas saben que nuestra página se trata de un evento, podemos proporcionarle información adicional sobre este evento específico. Y para esto usamos el atributo itemprop.

Si queremos identificar la ubicación de un concierto Foo Fighers, entonces agregamos itemprop="location" al elemento y encerrado el nombre de la ubicación (nuevamente, visite schema.org para conseguir la lista completa de todas las propiedades que usted puede asociar con un itemtype).

Algunas veces, usted tendrá que añadir elementos adicionales para agregar itemprop detallados. Usamos las etiquetas <span> porque, por defecto, no tienen influencia alguna sobre el texto que está en linea y que presenta el navegador.

Fechas y Horas

Las fechas y las horas pueden ser difíciles de interpretar. Por ejemplo, la fecha 08/10/12, ¿acaso significa 8 de Octubre de 2012? ¿O 10 de Agosto de 2012? ¿O Agosto 12, 2008? Es confuso, ¿verdad? Bueno, los motores de búsqueda tiene el mismo problema.

Para proporcionales la hora y fecha correctas, necesitamos agregar un atributo "datatime". Este atributo especifica una fecha usando el formato YYYY-MM-DD.

El código anterior es para la fecha 1 Abril 2011.

El atributo datetime, también puede ser utilizado para especificar una hora. Las horas son prefijos con la letra T y puede ser proporcionada junto con una fecha.

El código anterior muestra la siguiente fecha y hora: 8 de Mayo de 2011, 7:30 pm. Si añadimos el marcado de la fecha y la hora a nuestro ejemplo anterior, entonces podríamos conseguir algo como esto:

Con estas etiquetas sencillas podemos decirle a los motores de búsqueda que en el 8 de Mayo de 2011 a las 7:30 pm habrá un concierto de los Foo Fighters en el Madison Squart Garden. Podemos usar otros atributos para marcar páginas web sobre Libros, Películas, Organizaciones, Recetas, etc.

Información Implicita

La información no siempre está visible para los usuarios y los motores de búsqueda. Alguna información puede ser integrada a través de algún tipo de medio, o tal vez podría no estar declara explicitamente sobre una página. En este caso, usted puede usar las etiquetas meta para especificar esta información.

Digamos que tenemos un vídeo en nuestra página y queremos que la duración del vídeo aparezca como fragmento enriquecido. Debido a que la duración del vídeo no se ha proporcionado como texto en nuestra página, necesitamos usar etiquetas meta para agregar esta información. Por ejemplo:

El código de arriba le dice a los motores de búsqueda que el vídeo tiene una duración de 2  minutos con 40 segundos (no olvide que usamos el formato ISO8601 para las fechas y las horas). Esta información aparecerá como un fragmento enriquecido en los resultados de búsqueda.

Microformats

Los microformats expanden las etiquetas HTML convencionales con información semántica. Para agregar datos estructurados a una página web con microformats, usted usará, en la mayoría de los casos, el atributo de la clase. Esto hace que los microformats sean, probablemente, la forma más fácil y nítida para agregar datos estructurados.

Los tipos de microformats más populares son hCardhCalendar y hReview. hCard, es utilizado por personas, empresas y organizaciones. hCalendar, puede ser utilizado para agregar información sobre eventos. Y con hReview, usted puede hacer reseñas sobre restaurantes, libros, películas, etc.

Digamos que tenemos una páginas para un partido de fútbol. En primer lugar necesitamos decirle a los motores de búsqueda que esta página web es sobre un evento así que hacemos la referencia por medio de hCalendar dentro de la etiqueta <head> de su documento HTML.

A continuación, necesitamos decirle a los motores de búsqueda cual parte de nuestra página web es sobre el evento. Para esto usamos la clase vevent.

Todo lo que se encuentre dentro de nuestro <div> da a los motores de búsqueda más información sobre el evento (pero, además debería usar otras etiquetas como <span> o <p> si es necesario). Si queremos añadir el título de nuestro evento, usamos la propiedad summary. ¡Summary es una propiedad necesaria para un evento!

Mediante la propiedad location podemos especificar donde tendrá lugar el partido.

Con éste código le estamos diciendo a los motores de búsqueda que el partido entre Real Madrid y FC Barcelona ocurrirá en Camp Nou. Otra propiedad necesaria para hCalendar es dtstart. Ésta describe la fecha y la hora del evento.

Estas etiquetas le dan a los motores de búsqueda más información sobre el partido de fútbol entre Real Madrid y FC Barcelona  como la ubicación y la fecha, así como la hora.

Para más información sobre microformats, revise microformats en wiki.

RFDa

RFDa usa un número de propiedades para identificar entidades (como una persona o un evento). Ésta usa etiquetas HTML como <div> y <span> para describir entidades. La funcionalidad más avanzada de RFDa puede ser difícil para los webmasters que no sean expertos en los datos estructurados.

RFDa tiene cuatro atributos: voctypetypeofproperty y resource.

El primer atributo, voctype, define el vocabulario que vamos a usar para nuestros datos estructurados. Gracias a este atributo, los motores de búsqueda saben donde conseguir la información sobre datos estructurados.

Con el código anterior especificamos que el vocabulario para nuestras etiquetas RFDa pueden ser encontradas en schema.org (por ejemplo). Hay varios vocabularios más como LOV y Dublin Core. Ahora necesitamos especificar el tipo de datos. ¿Es información sobre una persona, un evento, un restaurante…? Entonces, para esto usamos el atributo typefo.

Los motores de búsqueda sabe que estamos hablando de una persona, pero no saben mucho al respecto. Al agregar propiedades, podemos darles más información sobre esta persona.

El código anterior nos dice que ésta página web es sobre una persona llamada John Doe. Podemos añadir un id único a este dato estructurado para identificar esta persona mediante el atributo resource.

Este id único es útil si queremos hablar sobre John Doe en otro sitio web. Al agregar el id al final de la url de esta página web (por ejemplo, http://example.com/employees#john), tenemos referencia para toda la información sobre John Doe.

Para más información sobre la implementación de RFDa, revise la documentación RFDa en w3.org.

¿Por qué prefiero Microdata?

Yo prefiero usar microdata para implementar los datos estructurados. De ninguna manera estoy diciendo que microdata sea la mejor opción (hay ventajas y desventajas para cada tipo mencionado anteriormente) pero, para mí, microdata ofrece las principales ventajas.

Comparado a microdata, RDFa tiene un poco más en su curva de aprendizaje cuando trata con entidades anidadas. Y la implementación de RFDa en las páginas que no son XHTML puede ser un problema debido a ciertos atributos y valores. 

La desventaja de los microformats es que, si uste quiere acondicionarlo para un sitio web, usted probablemente tenga
que cambiar el nombre de muchas clases CSS y de etiqeutas <div> y <span>.

Para mí, microdata es lo mejor de los dos mundos, es sencillo y fácil de implementar. Además, Microdata, es recomendado por Google, así que para las personas a quienes les gusta seguir las guías de Google, ésta puede ser una buena razón para escoger microdata por encima de microformats y RFDa.

Probando su Marcado

Usted ha gastado horas incontables agregando datos estructurados a su sitio web. Pero, ¿cómo sabe usted si se ha implementado correctamente? Ahí es donde la Herramienta para Probar Fragmentos Enriquecidos de Google resulta útil. En este sitio web usted puede tomar una URL, o un porción del código HTML, y probar el marcado de los datos estructurados. Ésto puede darle una idea de cómo la página aparecerá en los resultados de búsqueda.

Herramientas

Terminamos este artículo con una colección de herramientas que podrían resultar útil cuando usted está agregando datos estructurados a su sitio web.

  • Schema.org Creator, es una forma fácil para generar microdata. Escoja un tipo de contenido (persona, evento, revisión…) rellene los campos necesarios y con el clic de un botón usted conseguirá el código HTML correcto.
  • Si usted tiene un blog WordPress o un sitio web, usted puede usar éste útil plugin WordPress. El Schema Creator Plugin, desarrollado por Raven, hace verdaderamente fácil agregar datos estructurados a sus páginas web. Una de las ventajas de este plugin es que usa códigos cortos. De esta manera, usted no tiene que añadir microdata de forma manual.
  • Microformat tiene varios creadores para hCard, hCalenar y hReview. Use estas herramientas para generar microformatos rápidamente para su sitio web.
  • RDFa Play es, probablemente, la mejor herramienta si quiere implementar RFDa. Ésta le permite editar y depurar su código. ¡Incluso, viene con un visualizador de datos!

Conclusión

En el futuro veremos mucho más sobre datos estructurados. Permite a los motores de búsqueda interpretar el contenido de forma más eficiente y genera fragmentos enriquecidos. Todos estos resulta en una tasa de clics considerablemente mayor para las páginas donde los datos estructurados han sido implementados.

Déjenos conocer sus opiniones en la sección de comentarios, ¿sacará ventaja de los datos estructurados muy pronto? ¿Ya tiene experiencia haciendo eso?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.