Herramientas para webmasters de Google

Marcado de datos con microformatos

Los microformatos son sencillas convenciones (conocidas como entidades) que se usan en las páginas web para describir un tipo concreto de información (por ejemplo, una opinión, un evento, un producto, una empresa o una persona). Cada entidad tiene sus propias propiedades. Por ejemplo, una persona tiene las siguientes propiedades: nombre, dirección, cargo, empresa y dirección de correo electrónico.

En general, los microformatos hacen uso del atributo class en las etiquetas HTML (que suelen ser <span> o <div>) para asignar nombres breves y descriptivos a las entidades y a sus propiedades. A continuación mostramos un ejemplo de un bloque HTML breve con la información de contacto básica de Roberto Sánchez.

<div>
   <img src="www.example.com/robertosanchez.jpg" />
   
   <strong>Roberto Sánchez</strong>
   
   Editor principal de Ediciones ACME
   
   Calle Mayor 4
   
   Alcalá de Henares, Madrid 28801

</div>

A continuación se muestra el mismo HTML marcado con el microformato hCard (persona).

<div class="vcard">
   
   <img class="photo" src="www.example.com/robertosanchez.jpg" />
   
   <strong class="fn">Roberto Sánchez</strong>
   
   <span class="title">Editor principal</span> de <span class="org">Ediciones ACME</span>
   
   <span class="adr">
      <span class="street-address">Calle Mayor 4</span>
      
      <span class="locality">Alcalá de Henares</span>, <span class="region">Madrid</span>
      
      <span class="postal-code">28801</span>
   
   </span>
</div> 

A continuación se indica cómo funciona este ejemplo.

• En la primera línea, class="vcard" indica que el código HTML incluido en <div> describe a una persona (el microformato que sirve para describir a las personas se denomina hCard y su referencia en HTML es vcard, no se trata de un error ortográfico).
• En el ejemplo, se describen las propiedades del elemento de persona como, por ejemplo, una foto, el nombre, el cargo, la organización y la dirección. Para etiquetar las propiedades sobre la persona descrita por la vcard, se asigna un atributo class a cada elemento que contenga una de estas propiedades (por ejemplo, <span>, <img> o <title>). Así, fn describe el nombre de una persona y title, un cargo (en el artículo de Ayuda de cada tipo de información encontrarás una lista completa de las propiedades identificadas).
• Las propiedades pueden contener otras propiedades. En el ejemplo anterior, la propiedad adr describe la dirección de la persona e incluye las subpropiedades street-address, locality, region y postal-code.

Microformatos anidados

Es habitual que un microformato (por ejemplo, una opinión) contenga otro (por ejemplo, la información de contacto del autor de la opinión). La opinión de ejemplo que aparece a continuación incluye información sobre el cargo y la empresa de Roberto Sánchez.

<div>
   <strong>Opinión del videojuego Blast 'Em Up</strong>
   
   De Roberto Sánchez, editor principal de Ediciones ACME
   
   Puntuación: 4,5 de 5
   
   Es un juego increíble. Me encantó desde
   la primera pelea hasta el enfrentamiento final con los malvados alienígenas.
</div>

A continuación se indica el mismo código HTML marcado con los microformatos "hReview" (opinión) y "hCard" (persona). Para representar la información de la opinión de Roberto, el microformato hCard (persona) se anida en el microformato hReview (opinión).

<div class="hreview">
   <span class="item">
      
      <strong class="item"><span class="fn">Opinión del videojuego</span> Blast 'Em Up</strong>
   
   </span>
   <span class="reviewer vcard">
      
      De <span class="fn">Roberto Sánchez</span>, <span class="title">editor principal</span>
      
      at <span class="org">Ediciones ACME</span>
   
   </span>
   Puntuación: <span class="rating">4,5</span> de 5
   
   <span class="description">Es un juego increíble. Me encantó desde
   la primera pelea hasta el enfrentamiento final con los malvados alienígenas.</span>
</div>

A continuación se indica cómo funciona este ejemplo.

• Las opiniones se describen mediante el microformato hReview, escrito como class="hreview". Como se trata de una opinión, todo el bloque HTML se incluye en un div con el atributo class="hreview".
• Para identificar al autor de la opinión, puedes usar span class="reviewer". No obstante, en este caso queremos ofrecer más información sobre el autor de la opinión con el microformato vcard (persona). Para ello, puedes colocar reviewer y vcard en la misma línea separados por un espacio, así: <span class="reviewer vcard">. Las propiedades de vcard fn, title y org se corresponden con el nombre de Roberto, su cargo y la organización para la que trabaja.

Si quieres ver más ejemplos, consulta Entidades anidadas.

Contenido no visible

Generalmente, Google no muestra contenido no visible para los usuarios. Dicho de otro modo, no muestres contenido a los usuarios de un modo y a la vez uses texto oculto para marcar la información de forma independiente para los motores de búsqueda y para las aplicaciones web. Debes marcar el texto que se muestra realmente a los usuarios cuando estos acceden a tus páginas web.

Sin embargo, en algunas ocasiones puede resultar valioso proporcionar información más detallada a los motores de búsqueda, aunque no quieras que esa información esté disponible para los usuarios que visiten tu página. Por ejemplo, si proporcionas la latitud y longitud de un lugar, esto ayuda a Google a asegurarse de que aparece correctamente en los mapas y, de igual modo, si indicas la fecha de un evento con el formato de fecha ISO, estarás contribuyendo a que se muestre bien en los resultados de búsqueda. En este caso, puedes usar los microformatos value-class-pattern. Veamos el siguiente ejemplo:

<span class="dtstart">
   
   <span class="value-title" title="2009-10-15T19:00-08:00" />

15 de octubre, 7 p.m.

</span>

Al incluir <span class="value-title" title="2009-10-15T19:00-08:00" /> en el bloque etiquetado con class="dtstart", estarás indicando que el analizador de fragmentos enriquecidos debe utilizar el valor del atributo title para buscar la fecha de inicio del evento. La fecha del atributo title se puede representar mediante formato ISO sin que esto repercuta en la forma en la que la fecha se muestra a los usuarios.

Para ver ejemplos y vocabulario específico, consulta:

• Opiniones
• Personas
• Productos
• Empresas y organizaciones
• Recetas
• Eventos
• Vídeo (Ten en cuenta que, si bien Google admite el marcado de vídeo, actualmente lo utiliza solo para mejorar los resultados de búsqueda de vídeo).

Para comprobar el marcado, usa la herramienta de pruebas de datos estructurados.