Do not speak Spanish? Read this post in English.

Sábado, 03 d octubre d 2009.

revisiones de productos en microformatos xhtml

Este fin de semana me puse a maquetar una serie de fichas de un proyecto propio. Ya que tenía que volver a empezar las maquetas desde cero me propuse subir un grado la calidad, es decir, introducir microformatos. Cada vez parece que falta menos para que sean tenidos en cuenta por todos los buscadores y hay que empezar a tomarselos en serio.

Los microformatos son unas normas a seguir a la hora de realizar la maqueta de un tipo de contenido concreto. Básicamente se nos obliga a usar unos nombres de clases concretos para marcar ciertos datos y a incluir los contenidos dentro de contenedores también con clases concretas. Así si quiero incluir información sobre una persona deberé crear un contenedor "vcard" (tarjeta de visita) que puede ser cualquier elemento html y dentro ir detallando la información de esa persona (nombre, telefono, mail, etc...) usando clases especiales para que los buscadores puedan extraer precisamente esos datos.

En este caso me he puesto a maquetar la ficha de producto, la cual tiene una revisión hecha por los usuarios de la web. ¡Genial! existe un microformato especialmente diseñado para eso y que google ya entiende y así nos lo demuestra con su herramienta Rich Snippets Testing Tool.

Existe una documentación "oficial" sobre como hacer estas fichas en microformats.org, deberíamos leerla y tenerla en cuenta para hacer nuestra maqueta. Pero resulta que en la misma herramienta de google también viene una pequeña guia de como debemos hacer estas fichas, en realidad no es que se contradigan pero no contienen exactamente los mismos elementos con lo que yo particularmente prefiero adaptarme a mi amigo google, al igual que me preocupo más por que me indexe que de pasar el validador de W3C.

Creamos una maqueta sencilla de nuestro producto revisado siguiendo sus normas.

<div id="content">
  <!-- Microformat : hreview -->
  <div class="hreview">
    <p>
      <span class="rating average 5stars">3</span>
      <a href="#">Tú también puedes votar</a>
    </p>
    <h1 class="item">Mi superproducto</h1>
    <p class="reviewer vcard">
      Por <span class="fn">Manolo el del Bombo</span>
      el <abbr class="dtreviewed" title="2004-04-20T18:55:26TZD">20 de abril de 2009</abbr>
    </p>
    <div class="description">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis purus a risus condimentum ullamcorper.</p>
    </div>
  </div>
  <!-- /Microformat : hreview -->
</div>

Si, este tipo de maquetas no son aptas para aquellos que no dominen bien el CSS. Es lo que tiene adaptarse a estándares.

Ahora solo falta saber que realmente no hemos perdido el tiempo y que google está entendiendo perfectamente nuestra maqueta. Para ello vamos a la herramienta de google y escribimos la url donde hemos incluido el microformato... a ver que nos dice!

Yo he subido un ejemplo de como se interpreta la maqueta que os he dejado: miralo aquí

El resultado es muy descriptivo. Primero se nos muestra el resultado que provocariamos en google si a el le diese la gana (y es que a día de hoy casi nunca lo hace) mostrar nuestro microformato en la descripción de nuestra página. No hay ni que decir, que si lo consiguiesemos nuestro CTR debería verse incrementado.

Justo debajo aparece la estructura de microformatos que ha llegado a entender google, y si hubiese fallos nos indicaría cuales son. Esta segunda parte es una gran herramienta para aprender a maquetar de esta forma y de asegurarnos que cosas está y no está entendiendo google.

Temas Relacionados: maquetacion seo

Autor:

2 Comentarios para “revisiones de productos en microformatos xhtml”

  1. Iñaki:

    Este tema me parece super interesante, porque de cierta forma si los buscadores empiezan a enfocarse en la web semantica, casí será una obligación utilizar estos microformatos para que lo que este dentro de esas capas sea entendible bajo contexto.

    Saludos cordiales.

    • ikhuerta dice:

      Opino igual, yo creo que YA ha llegado el momento de ponerse las pilas y empezar a usar los incomprendidos microformatos en todas las partes que podamos. Si, nos van a obligar a crear algún div o span de más pero nuestras webs van a ser mucho mejor entendidas.

      Quiero hacer pruebas para ver si además algún buscador premia usarlos y te ayuda a subir en algún SERP, seguramente será que no, pero hay que probarlo. A ver cuando puedo hacerlo!...

Anímate y deja tu comentario

Esto son experimentos, no preguntes ;) prueba metadescription Prueba title