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.

  
  

    

      3
      Tú también puedes votar
    
    
Mi superproducto
    

      Por Manolo el del Bombo
      el 20 de abril de 2009
    
    

      
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quis purus a risus condimentum ullamcorper.
    
  
  

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.