En este artículo hago una larga introducción que creo necesaria, pero si quieres ir directo al concepto de Microformatos, clica aquí. Desde luego te garantizo que te va a quedar claro el concepto de Web Semántica, que no quiere decir necesariamente Web 3.0 Bueno empezamos con el artículo!

Hace ya unos años Tim Berners-Lee le dio por inventar esto de Internet, bueno técnicamente hablando Internet entendiéndose como un protocolo de comunicación entre computadoras o interconexión de redes, se inventó unos pocos años después de que este hombre naciera.

Este señor nació en 1955 y realmente se puede decir que es el padre de Internet. Creó el protocolo HTTP (Hyper Text Transfer Protocol) allá por el año 1989, el sistema de localización de objetos o documentos en internet, vamos la famosa URL (Uniform Resource Locator), lo que tecleas en la barra de direcciónes y también el mismo lenguaje HTML (Hyper Text Markup Language) o Lenguaje de Marcado de Etiquetas de Hipertexto, vamos que podemos afirmar que este señor es el padre del Internet que conocemos y así ha pasado a la historia con términos como Padre, Creador, Inventor,…, etc,.

Bueno ya que el HTML es un lenguaje de etiquetas, parece que surge la necesidad de etiquetarlo todo verdad? Pronto surgió el concento de “Web 1.0”, no porque sí, a los informáticos nos gusta bautizar las cosas con números de versión.  Básicamente con este termino nos referimos a las primeras webs cuya interacción con el usuario cabía calificarla de plena nulidad, esta es la clave del término, vamos nada de subir a una web tus propias opiniones por ejemplo.

En su momento, se empezarón a ofrecer servicios al usuario, este ya podía emitir opiniones, y por supuesto otros podían opinar sobre estas opiniones, surgieron los primeros foros, blogs, y las primeras redes sociales. A esto y para no asombrar le llamamos Web 2.0

Y ahora que? pues que desde hace ya unos años estamos en lo que se llama Web 3.0, la web de los datos, este término no debe confundirse con Web semántica, la Web 3.0 es mucho más, de hecho hay gente que asocia el inicio de este periodo con la aparición de tecnologías como AJAX por ejemplo. Pero es en este periodo cuando surgen diversos formatos y muy diferentes, XML, XML Schema, RDF, RDF Schema y OWL que podrían decirse son los principales componentes de lo que se ha dado en llamar Web semántica.

Del XML y el HTML surgió un nuevo lenguaje llamado XHTML  que es en la actualidad y con permiso de HTML5 que todavía está en desarrollo el que más se utiliza en la actualidad.

Tanto en HTML como XHTML pronto surgió la necesidad de poder expresar determinadas ideas o conceptos a través del lenguaje de marcado y para explicar esto me permito tomar un ejemplo de la wikipedia que lo explica muy bien, por ejemplo el concepto de coordenadas geográficas:

Las aves anidaron en
  <span class="geo">
    <span class="latitud">52.48</span>,
    <span class="longitud">-1.89</span>
  </span>

Es decir a través del atributo class, se determina una idea o concepto, en este caso el de coordenada geográfica que queda conformada por el par (latitud, longitud), en el ejemplo geo(52.48, -1.89). Tenemos así definido un microformato, el microformato geo que expresa la idea o concepto de  coordenada geográfica. Este es un ejemplo muy sencillo, veremos algunos más complejos a continuación.

Hay más atributos que pronto se introdujeron suceptibles de proporcionar contenido semántico. “rel”, “rev”. Por ejemplo allá por el año 2005 Google a través de Matt Cutts y otros introdujeron  rel=”nofollow” para luchar contra el indexado de páginas basura o Webspam.

Es esto todo, pues no,  este es un mero ejemplo de microformato, hay muchos, y de su uso están surgiendo muy interesantes aplicaciones webs. Pero hemos venido aquí a ver que microformatos podemos utilizar para el SEO y eso es lo que vamos a ver a partir de ahora.

Microformatos para el SEO de hoy

rel=”nofollow”

Este atributo se utiliza dentro de un enlace y como hemos dicho antes sirve para luchar contra el Webspam. Al añadir rel="nofollow" com atributo de un enlace se indica a los buscadores que no se se conceda peso adiconal o ranking a ese enlace. Pero aunque Google dice que no se haga, muchos seos lo utilizan para alterar el flujo del page rank. Cada página tiene una importancia de x, cada página enlazada a su página divide esta importancia por el número de páginas enlazadas, de modo que si la página principal enlaza a 5 páginas, cada una de estas 5 páginas tiene una importancia de x/5. Si por ejemplo alguna de estas páginas no es importante, por ejemplo una página de aviso legal o una página de contacto, puedes poner los enlaces hacias esas páginas como no follow, de manera que el resto de páginas ahora tendrán una impotancia de x/3 y no x/5. x/3 siempre será mayor que x/5 para todo X mayor que cero y positivo.

hAtom

Sirve para marcar feeds normalmente en xml  Un ejemplo tomado de http://atomenabled.org

<feed xmlns="http://www.w3.org/2005/Atom">

  <title>Example Feed</title>
  <link href="http://example.org/"/>
  <updated>2003-12-13T18:30:02Z</updated>
  <author>
    <name>John Doe</name>
  </author>
  <id>urn:uuid:60a76c80-d399-11d9-b93C-0003939e0af6</id>

  <entry>
    <title>Atom-Powered Robots Run Amok</title>
    <link href="http://example.org/2003/12/13/atom03"/>
    <id>urn:uuid:1225c695-cfb8-4ebb-aaaa-80da344efa6a</id>
    <updated>2003-12-13T18:30:02Z</updated>
    <summary>Some text.</summary>
  </entry>

</feed>

Pero a mí me suele interesar más el código fuente que solemos ver en una página web ya sea html o xhtml. Si observamos el código fuente de un blog de wordpress, tambien veremos algunos valores del atributo  class especificados por el microformato hAtom, entre otros destaco los siguientes (no especifico la funcionalidad porque creo que es obvia):

• entry-title
• entry-content
• entry-summary
• updated
• published
• author

Podemos decir que estos valores en el atributo class aportan valor semántico.

Por ejemplo unos de mis posts, tiene el atributo class con el siguiente valor: “post-426 post type-post status-publish format-standard hentry category-google category-seo tag-google tag-seo”. Fijaos que cantidad de información para buscadores y aplicaciones web que puedan interaccionar con el blog!!.

Esto no es todo, tambien es usual indicar enlaces permanentes mediante rel=”bookmark” o tags mediante rel=”tag”. A veces no necesariamente en wordpress encontramos rel=”directory” que sirve para especificar que el enlace está apuntando a un directorio.  El contenido es el rey, cuanta más información útil podamos ofrecer a buscadores y aplicaciones web, mejor.

XOXO

Sin abandonar WordPress, si examináis el código del sidebar o barra lateral, las listas ordenadas o desordenadas suelen notarse con la clase class=”xoxo”, que además de su significado en el lenguaje sms, es todo un microformato en si mismo, “xoxo” significa “eXtensible Open Xhtml Outlines” traducido al español sería: “Esquemas Abiertos Extensibles de XHTML. Si en tu código necesitas una lista, porque no usar el nombre de esta clase?

hCalendar

Muchas veces mostramos información sobre un evento determinado, es inevitable incluir fechas, descripción acerca del evento, localización de dicho evento, etc. Hay muchas maneras de hacer esto, pero la mejor forma es utilizar el microformato hCalendar, no voy aquí a copiar el contenido de la wikipedia pero te invito a que eches un vistazo a este enlace para aclarar este concepto. De esta manera estas mostrando la misma información pero además la estas haciendo comprensible a buscadores y aplicaciones web.

hCard

Al igual que hCalendar que normativiza la información de eventos, tenemos hCard que hace lo mismo con las personas, al hablar de una persona hay una serie de datos que suelen ser los mismos. Menciono aquí un sencillo ejemplo pero muy descriptivo tomado de la wikipedia.

<div class="vcard">
        <strong class="fn n">
                <span class="given-name">Guillermo</span>
 <span class="additional-name">García</span>
        </strong><br />
        <p class="adr">
                <span class="street-address">Calle falsa 1</span>
<br /><span class="locality">una ciudad</span>,
<span class="country-name">un país</span>
        </p>
        <p class="tel">989-99-99-99</p>
</div>

XFN

Otro microformato extremadamente interesante, puedes leer y saber más en el sitio original Este microformato se encarga de establecer las relaciones sociales de las personas a través de las redes sociales. No te preguntas a veces como se generan esos servicios webs tan “chulos” que por ejemplo en el caso de twitter te dibujan el grafo de los followers más influyentes de tu cuenta de twitter por ejemplo. Pues esta es la pista. Leyendo dicha página te puedo contar que XFN(Xhtml Friends Network) es una manera sencilla de representar las relaciones sociales usando enlaces.

Por ejemplo este microformato es muy utilizado en los blogs y en los blogrolls. Podéis encontrar por  ejemplo si observáis de nuevo el código de un blog de wordpress  algo como esto: rel=”profile” href=”http://loquesea.com” dentro de un tag link,  también es posible encontrar el atributo rel=profile directamente como atributo del tag <head>

Más microformatos?

La verdad es que hay unos cuantos microformatos, podéis aprender mucho visitando esta página. Si os dáis cuenta realmente se utilizan mucho los elementos <span>, <strong> y los atributos: class y rel entre otros. Básicamente si respetas estos microformatos vas a hacer la información más entendible a los buscadores y aplicaciones web que interaccionen con tu sitio, esto es SEO tambien, el contenido importa y mucho.  Usando microformatos seguramente obtendremos más conversiones, porque los búscadores lo tendrán más fácil para ofrecer al usuario lo que realmente necesita. Este año va a ser el año de los buenos contenidos, al menos esa es la meta de Google.

El SEO que viene

Nos guste o no, los microformatos han venido para quedarse, la Web Semántica es ya un hecho y como programadores (y SEOS) nos tenemos que poner las pilas con esto.  El HTML5 todavía se está desarrollando, seguramente surgirán muchos más microformatos. HTML5 impone de entrada la siguiente estructura:

Con semejante estructura, los contenidos tendrán más o menos importancia segun el lugar donde se encuentren. No tendrá el mismo valor un enlace en el “footer” que en “article”. Es decir necesariamente se va a establecer una jerarquía, esto unido a la inmensa posibilidad de los microformatos ya establecidos y los que todavía puede venir, van hacer del SEO un mundo apasionante. Creo sinceramente que el SEO que está por venir va a ser todavía más apasionante que el que ya tenemos.

Si despues de leer este artículo todavía no sabes que es la web semántica, hazte un favor, vuelve a nacer dentro de unos años.

(Añadido del 5 de Diciembre del 2011). Ya tienes a tu disposición un artículo que amplía muy mucho el tipo de microformatos o (mejor dicho microdatos) que podemos esperar en HTML. Dos meses despues de publicar este artículo Google anunció que utilizarían Schema, también adoptado por Bing y Yahoo. Te recomiendo pues la lectura de este artículo que he posteado el 3 de Diciembre del 2011.

Microdatos – schema RDFS – la última propuesta de Google, Yahoo y Bing paso a paso

Atentamente

Miguel Valero

Analista Seo y Desarrollador Web en Valencia

Entradas relacionadas:

Rich Snippets de Google con microformatos, microdata, html5 y herramientas. Google Panda: 25 opiniones Microdatos – schema RDFS – la última propuesta de Google, Yahoo y Bing paso a paso Seo-anatomía de un enlace. Seo en tus metatags, Dublincore, Open Graph Protocol, Social Graph … 10 consejos más (van 40) de Matt Cutts (Resp. calidad de Google)