En los últimos años la estrategia a la hora de crear sites ha cambiado sustancialmente.
Si bien es cierto que la imagen, el diseño y la usabilidad es importante, se ha convertido en algo vital estar bien posicionado.
Puesto que el posicionamiento orgánico-natural (SEO) aporta visitas, y las visitas incentivan las ventas o el negocio.
Para ayudar a los web spiders como google a rastear nuestro contenido, existen infinidad de técnicas o estrategias. (ver SEOTIPS).
En esta entrada voy a centrarme en los microdatos, esa información no visible al ojo humano pero que existe dentro del HTML y que aporta valor añadido a los agentes de los buscadores que nos visitan. Los microdatos son propiedades del etiquetado que nos permiten definir el significado del contenido de cada una de las etiquetas, su carga semántica.
Mediante HTML5 podremos crear información sensible a los buscadores de forma eficaz.
Hace ya tiempo, para crear fragmentos enriquecidos HTML y añadir información semántica a la web válida para propositos SEO surgieron 3 estándares:
Microdatos (HTML5), Microformatos y RDFa
Cada buscador era compatible con alguno de estos tres, por ejemplo google con microdatos, yahoo con microformatos…
Los microformatos son porciones de código HTML (o XHTML) que permiten estructurar información aprovechando los atributos “id” o “class” empleadas por algunas etiquetas del HTML.
RDFa es en esencia una generalización de los atributos de los elementos meta y link de XHTML. La a minúscula que se añade a las siglas RDF es precisamente la inicial de la palabra “atributos”.
Los tres tipos tratan de resolver el mismo problema, pero de formas diferentes. ¿Cuales son esas Diferencias?
Pues parece evidente que el más cómodo y limpio es el microdato. De hecho, la posibilidad de agrupar todas las etiquetas “semánticas” permite diferenciarlas del resto (las del diseño), con lo que el trabajo es más intuitivo.
Otra ventaja es el hecho de contar con el respaldo de Schema.org. Esto nos permite, por un lado tener cierto nivel de normalización en el etiquetado. Por ende, una mayor flexibilidad en la descripción, ya que es posible combinar diferentes esquemas para lograr una descripción más precisa. Otra caracteristica es que a Google le gustan mucho mas los microdatos.
Hace tiempo solamente existía un único sitio donde estaban los vocabularios que se podían insertar en los microdatos que era: http://data-vocabulary.org,
Pero entonces llego shema.org que lo que hizo fue usar un único estándar para mostrar fragmentos enriquecidos, en este caso microdatos , con un vocabulario común para todos que es http://shema.org que es compatible por la inmensa mayoría.
En definitiva HTML5 usas microdatos pero con un vocabulario común para todos que es schema.org
Ejemplo del uso de Microdatos en HTML5
Los microdatos requieren un contenedor de datos (itemscope) , itemtype (propiedades), y los datos (itemprop)
Ejemplo de HTM5 y microdatos:
<html>
<head></head>
<body><header></header><nav></nav>
<article><section>
<div itemscope itemtype="https://schema.org/Person">
Mi nombre es <span itemprop="name">Oscar</span>
Mi pagina web es <span itemprop="url">www.palentino.es </span>
Esto es un <span itermprop="title"> Ejemplo de SEO con HTML5 </span>
</div></section>
</article>
</body>
</html>
Lista de propiedades de los microdatos
Un elemento del tipo http://schema.org/Person representa una persona.
Los siguientes elementos son los tipos de nombres de propiedad definidos:
| Propiedad | Descripción |
|---|---|
| name | Nombre |
| nickname | Nick (pseudónimo) |
| photo | Una imagen |
| title | El título de la persona (Por ejemplo: “FrontEnd Developer”) |
| role | El rol de la persona (Por ejemplo: “Team Lead”) |
| url | Enlace a la página web de la persona |
| affiliation | Nombre de la organización a la cual la persona está asociada (Por ejemplo: empresa donde trabajas) |
| friend | Identifica la relación entre una persona y otra. |
| contact | Identifica la relación entre la persona descrita y otra persona |
| acquaintance | Identifica la relación entre la persona descrita y otra persona |
| address | La localización de la persona. Puede tener subpropiedades como: calle, localidad, región, código postal, país y nombre. |
Posicionando una tienda online con la etiqueta Product
Cuando creamos tiendas online, se pueden etiquetar infinidad de cosas. Es bastante interesante para mejorar la información que damos sobre nuestros productos a los spiders. Para etiquetarlos contamos con la etiqueta product. Esta descripción nos la ofrece el schema.org.
Ejemplo de texto a insertar dentro de HTML5
Mi unidad de discp duro SSD
<img src=”discoduro-sd.jpg” />
Valoración 4.5/5 basado en la valoración de 14 clientes
75.00€
Disponible
Descripción del producto:
Disco duro SSD de alto rendimiento y tal …
Comentarios de los clientes:
estoy muy contento – por Oscar,1 de mayo de 2014
5/5 estrellas
Traducido a HTML5
<div itemscope itemtype="http://schema.org/Product">
<span itemprop="name">Mi unidad de discp duro SSD" </span>
<img src="discoduro-sd.jpg" />
<div itemprop="aggregateRating"
itemscope itemprop="http://schema.org/AggregateRating">
Valoración <span itemprop="ratingValue">4.5</span>/5
basado en la valoración de <span itemprop="reviewCount">14</span> clientes
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<span itemprop="price">75.00 €</span>
<link itemprop="availability" href="http://schema.org/InStock" />Disponible
</div>
Descripción del producto:
<span itemprop="description">Disco duro de alto rendimiento y tal.</span>
Comentarios de los clientes::
<div itemprop="reviews" itemscope itemtype="http://schema.org/Review">
<span itemprop="name">Estoy muy contento</span> -
por <span itemprop="author">OScar</span>,
<time itemprop="publishDate" datetime="2014-05-01">1 de Mayo de 2014</time>
<div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating">
<meta itemprop="worstRating" content = "1">
<span itemprop="ratingValue">1</span>/
<span itemprop="bestRating">5</span>estrellas
</div>
...
</div>
Google nos ofrece una herramienta para testear si hemos puesto bien nuestras etiquetas.
Se llama Rich Snippets testing tool (http://www.google.com/webmasters/tools/richsnippets).
Se introduce la URL de la página que has etiquetado e indica cómo saldrá en buscadores.
Para finalizar, aunque Google afirme que el hecho de tener microdatos con schema no llega a influir en el ranking de resultados naturales, es lógico pensar que esto cambie y que una página bien estructurada facilite el trabajo de interpretación de los contenidos, mejorando el posicionamiento del sitio.
Considero además que google en sus sucesivos algoritmos trate de dar peso a este aspecto, puesto que los SEOs facilitan a sus buscadores el trabajo a la hora de analizar el contenido.
El metadato para imagen es:
Saludos