Twitter Flickr Pinterest LinkedIn YouTube Google Maps E-mail RSS
formats

SEO con HTML5. Conceptos y los Microdatos.

Publicado en 30 abril, 2014, por en SEO, SEOTips, Varios.

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 visitanLos 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.

http://schema.org/Product

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.

 

Etiquetas:, ,

Una respuesta

  1. Jose Carlos

    El metadato para imagen es:

    Saludos

Deja un comentario

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.

Home SEO SEO con HTML5. Conceptos y los Microdatos.
© www.palentino.es, desde el 2012 - Un Blog para compartir conocimientos ...

Uso de cookies en mi sitio palentino.es

Este sitio web utiliza cookies para que tengamos la mejor experiencia de usuario. Si continúas navegando estás dando tu consentimiento para la aceptación de las mencionadas cookies y la aceptación de la política de cookies

ACEPTAR
Aviso de cookies