Por una vez parece que los principales buscadores (Google, Bing, Yahoo!) se han puesto de acuerdo en algo y es en crear una serie de términos o etiquetas que podemos usar a la hora de marcar nuestro código HTML. Google lo ha anunciado este mismo mes de Junio (enlace al anuncio de Google sobre schema.org). Estas etiquetas permitirán a los buscadores entender mucho mejor el contenido marcado. Es lo que conocíamos como microformatos, aunque ahora ya estarán consensuados y recogidos en schema.org, donde se les llama “schemas” (esquemas). Es un paso hacia lo que algunos llaman la web semántica.
Estos términos o etiquetas que nos aporta schema.org se introducen en el código HTML utilizando el formato de microdata, introducido con HTML5.
¿Qué es HTML microdata?
Es una especificación estandar aún en desarrollo creada por la W3C dentro de HTML5 que permite a obtener información leíble y entendible por otras máquinas (por ejemplo, por los buscadores, en el caso que nos atañe con este artículo). El objetivo es que la información se etiquete en los documentos HTML de forma sencilla y no ambigua, siendo compatible con otros formatos como RDF and JSON. Podéis ver su sintaxis en este enlace. Schema.org está basado en este nuevo estandar. Vamos a verlo.
Cómo etiquetar tu contenido: Paso a paso
Si es la primera vez que ois hablar de schema.org vamos a empezar viendo un sencillo ejemplo, el que nos ofrece esa misma web, para ver cómo etiquetar un contenido. Veréis que es muy sencillo (lo malo es que todos los términos están en inglés, pero bueno, nos vamos acostumbrando, ¿no?).
Imaginaros que partimos de este código HTML, perteneciente a una página en la que se habla sobre la película Avatar:
|
1 2 3 4 5 6 |
<div> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div> |
Empezamos identificando de todo el código HTML de la página aquel que específicamente habla del objeto principal, el que contiene la información relevante sobre la película. Esta parte la envolvemos con la etiqueta itemscope, que le indicará a los buscadores que todo lo que se encuentre dentro hace referencia a un objeto en particular, en este caso la película Avatar:
|
1 2 3 4 5 6 |
<div itemscope> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954) </span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div> |
Una vez que hemos identificado que ahí dentro se habla de un “objeto” ahora habrá que decirle a los buscadores de qué objeto se trata. Para identificarlo se añade a continuación de itemscope la etiqueta itemtype. Las etiquetas en schema.org están jerarquizadas y este es el primer nivel de dicha jerarquía. En este enlace veréis todos los tipos existentes: http://schema.org/docs/schemas.html.
En nuestro ejemplo, al ser una película vemos que contamos con la etiqueta “Movie”. Como veréis en el código la etiqueta con la jerarquía superior, que se muestra sólo una por página, aparece en forma de URL.
|
1 2 3 4 5 6 |
<div itemscope itemtype="http://schema.org/Movie"> <h1>Avatar</h1> <span>Director: James Cameron (born August 16, 1954)</span> <span>Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html">Trailer</a> </div> |
Ahora los buscadores ya saben que de lo que se habla es de una película (Movie en inglés). Ahora ya podemos bajar en la jerarquía y etiquetar toda la información que damos sobre dicha películo: el nombre, el director, los actores, el género… Vamos a encontrar una etiqueta para cada apartado relevante. Las propiedades se etiquetan con el atributo itemprop (en el enlace anterior podéis ver todas las etiquetas que se pueden utilizar para cada elemento principal):
|
1 2 3 4 5 6 |
<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div> |
Como veis se han utilizado spans para etiquetar cada propiedad de tal manera que no tiene porqué alterar la visualización de cada contenido. Ahora los buscadores tienen mucho más claro de qué habla nuestra página web. Y lo que es mejor, lo saben todos los buscadores, no solo Google, tal y como os decía antes.
Aún podemos ir más allá, y es incluir alguno de los objetos principales (los que están más altos en la jerarquía y se etiquetan con itemtype) dentro de otro. En el ejemplo que nos aporta schema.org lo vemos muy claro. Por ejemplo, James Cameron no es solo un Director. Es también una persona, por lo que podemos utilizar las etiquetas disponibles para decirle a los buscadores que estamos hablando de una persona:
|
1 2 3 4 5 6 7 8 |
<div itemscope itemtype ="http://schema.org/Movie"> <h1 itemprop="name">Avatar</h1> <div itemprop="director" itemscope itemtype="http://schema.org/Person"> Director: <span itemprop="name">James Cameron</span> (born <span itemprop="birthDate">August 16, 1954)</span> </div> <span itemprop="genre">Science fiction</span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a> </div> |
Bueno, ahora que ya sabemos cómo funciona os recomiendo que veais todas las categorías existentes en schema.org. Vamos a ver otro ejemplo, esta vez suponiendo que tenemos una tienda online.
Optimizando el posicionamiento de nuestra tienda online: la etiqueta Product
En nuestra tienda online podemos etiquetar muchas cosas: la dirección física de nuestras tiendas (si las tuviéramos), los datos de nuestra empresa, los datos de cualquier persona que incluyamos en la información de la tienda, los artículos de nuestro blog si lo tuviéramos, etc.. Pero es muy importante a la hora de optimizar en buscadores nuestra tienda online mejorar la información que damos sobre nuestros productos. Por ello tendremos que etiquetarlos, para lo que contamos con la etiqueta Product. Básicamente se trata de hacer lo mismo que antes, sólo que en vez de una etiqueta “movie” tenemos una etiqueta “product“.
Además, si vemos la descripción que sobre la etiqueta “product” nos da schema.org, comprobaremos que esta tiene una serie de propiedades compartidas (descritas como Things) y otras específicas, muchas de las cuales tienen a su vez sus propias propiedades.
Vamos a ver los dos ejemplos que nos da schema.org. En el primero tenemos este código HTML previo, sin etiquetar:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
Microondas Kenmore White 17" <img src="kenmore-microwave-17in.jpg" /> Valoración 3.5/5 basado en la valoración de 11 clientes 55.00€ Disponible Descripción del producto: Microondas de 22 centímetros cúbicos. Tiene seis categorías de cocinado preestablecidas y utilidades muy convenientes como Añade-un-minuto y Cerrado para niños. Comentarios de los clientes: No estoy nada contento - por Ellie, Abril 1, 2011 1/5 estrellas La lámpara interior se quemó y tuve que reemplazarla. Buena compra - por Lucas, Marzo 25, 2011 4/5 estrellas Gran microondas y gran precio. Es pequeño y cabe en mi apartamento .... |
Como veis hay mucho que etiquetar aquí. Fijaros línea a línea cómo quedaría:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<div itemscope itemtype="http://schema.org/Product"> <span itemprop="name">Microondas Kenmore White 17" </span> <img src="kenmore-microwave-17in.jpg" /> <div itemprop="aggregateRating" itemscope itemprop="http://schema.org/AggregateRating"> Valoración <span itemprop="ratingValue">3.5</span>/5 basado en la valoración de <span itemprop="reviewCount">11</span> clientes </div> <div itemprop="offers" itemscope itemtype="http://schema.org/Offer"> <span itemprop="price">55.00 €</span> <link itemprop="availability" href="http://schema.org/InStock" />Disponible </div> Descripción del producto: <span itemprop="description">Microondas de 22 centímetros cúbicos. Tiene seis categorías de cocinado preestablecidas y utilidades muy convenientes como Añade-un-minuto y Cerrado para niños.</span> Comentarios de los clientes:: <div itemprop="reviews" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">No estoy nada contento</span> - por <span itemprop="author">Ellie</span>, <time itemprop="publishDate" datetime="2011-04-01">Abril 1, 2011</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> <span itemprop="description">La lámpara se quemó y tuve que reemplazarla. <div itemprop="reviews" itemscope itemtype="http://schema.org/Review"> <span itemprop="name">Buena compra</span> - by <span itemprop="author">Lucas</span>, <time itemprop="publishDate" datetime="2011-03-25">Marzo 25, 2011</time> <div itemprop="reviewRating" itemscope itemtype="http://schema.org/Rating"> <meta itemprop="worstRating" content = "1"/> <span itemprop="ratingValue">4</span>/ <span itemprop="bestRating">5</span>estrellas </div> <span itemprop="description">Gran microondas y gran precio. Es pequeño y cabe en mi apartamento.</span> </div> ... </div> |
Como véis, hemos supuesto también que el producto estaba en oferta, para lo cual hay una etiqueta disponible. Cada categoría principal (InStock, Offer, Rating, Review…) se etiqueta con itemtype y formato de URL, y dentro de cada una de ellas están sus propiedades etiquetadas con itemprop.
¿Cómo etiquetaríamos nuestros datos de contacto?
Los datos de contacto que tengamos en nuestra web sobre nuestra empresa los podríamos etiquetar así (podéis ver más ejemplos en schema.org):
|
1 2 3 4 5 6 7 8 9 10 |
<div itemscope itemtype="http://schema.org/LocalBusiness"> <h1><span itemprop="name">Emenia</span></h1> <span itemprop="description"> Diseño y desarrollo web - Marketing online.</span> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">General Perón 26</span> <span itemprop="addressLocality">Madrid</span>, <span itemprop="addressRegion">Madrid</span> </div> Phone: <span itemprop="telephone">636975083</span> </div> |
Etiquetar bien nuestros datos puede ser importante para optimizar las busquedas locales en Google y otros buscadores.
Cómo comprobar si he etiquetado bien mi código HTML.
Google nos ofrece una herramienta para testear si hemos puesto bien nuestras etiquetas. Está aún en beta. Se llama Rich Snippets testing tool (http://www.google.com/webmasters/tools/richsnippets). Se introduce la URL de la página que has etiquetado y te indica cómo saldrá en buscadores.
Resumiendo…
En resumen, veis que se ofrece la información perfectamente etiquetada para que buscadores y otras aplicaciones puedan saber perfectamente qué es cada pieza de información, de qué se está hablando. De esta manera los buscadores y otras aplicaciones que soporten este formato podrán tomar la información precisa con pleno conocimiento de qué tipo de información están obteniendo para poderla usar con posterioridad.
El inconveniente es que el código queda muy confuso con tanta etiqueta, pero bueno…. si es por una buena causa….
me gusto es articulo y general todo tu blog
Buen artículo, una pregunta, ¿ crees que mejorará el posicionamiento de una web si se introducen los schemas ?.
saludos
Gracias Angel,
Creo que ayuda a concretar más frente a los buscadores, para que estos tengan más claro de qué estamos hablando. Aún no he visto estudios sobre sus resultados, pero creo que ante búsquedas concretas y para búsquedas locales puede ayudar frente a quien no tenga tan definidos sus contenidos. Esto es como todo: una sola cosa a veces no se nota. Todas juntas si. Ya que lo han creado los propios buscadores para que les ayudemos a concretar las búsquedas y a ofrecer resultados más relevantes a los usuarios, ¿por que no hacerlo?
hola Juan
Yo tengo mi web pero en español crees que me ayuden los schema ?? ya que todas las categorìas se encuentran en inglès
Hola Rosa
Todo ayuda, ya sabes lo que dicen del SEO, que no es una cosa que hace el 100% sino 100 cosas a optimizar en las que cada una hace el 1%
Genial artículo , muchas gracias por ayudarnos en mejorar el posicionamiento de nuestras páginas web :).
Gracias Pablo
una consulta, se usa solo con html5? si lo aplico en versiones anteriores no sirve?
Hola Alejo,
Son etiquetas de HTML5, no lo he probado en versiones anteriores de HTML….
Hola Juan, he comenzado hace poco con html. Me parece interesante el artículo, pero tengo una duda de novato. ¿Cómo se aplica el css ahí?
Gracias
Hola Alberto!
Schema.org no está pensado para aplicar diseños utilizando sus etiquetas. En realidad su objetivo es otro, indicar a los buscadores de qué trata cada contenido.
Wooww, que rápido has contestado 😉
Ok, entiendo. Entonces si quiero aplicarlo a un div al que he dado un estilo la cosa quedaría así:
¿Recomiendas usar schema.org?
Un saludo y muchas gracias
vale, no me deja poner código html. Te vuelvo a poner el ejemplo sin etiquetas
Si lo recomiendo. Ensucia mucho el código y es una lata aplicarlo, pero ayuda a que los buscadores hagan mejor su trabajo.
Hola de nuevo Juan y perdona que te molesta con una última pregunta.
¿Se pueden utilizar schema.org (microdatos) y WAI-ARIA en un mismo elemento? ¿Puedes ponerme un ejemplo de como quedaría la sintaxis?
Gracias
hola que tal casi un año despues de que has publicado el articulo jejeje, espero contestes mis dudas.
Buscando informacion sobre la web semantica y SEO para aplicarlo a un sitio web doy con schema.org y como veo que esta todo en ingles busque acerca de ello y di con este blog.
Quisiera saber en que va el proyecto pues buscando info encuentro que la ultima actualizacion fue hace casi 5 meses.
Otra cosa es que veo que se usan mucos span para aplicar los atributos. Esto debe ser asi o se puede usar en los h1 o p por ejemplo asi. H1 itemscope itemtype… Gracias…
Hola orocheles,
Sigue activo y su usa mucho, aunque es verdad que mancha mucho el código por la gran cantidad de etiquetas y atributos que hay que introducir….
hola de nuevo y es cierto eres un rayo para contestar jejeje.
Solo me quedo con la duda aun disculpa, con lo de:
Es necesario u obligacion usar los span? Porque no usar el atributo itemprop en el elemento h1. Espero entiendas el code pues no puedo ponerlo bien. Gracias.
Puedes probar lo que hagas en http://www.google.com/webmasters/tools/richsnippets y ver si te lo acepta…
Hola, lo primero muchas gracias por tu artículo.
La página donde yo quiero implementar el schema.org es un buscador de vuelos online.
Me gustaría empezar con la página principal, pero no le veo mucho sentido, ya que para alguien que busque en google “buscador de vuelos” no le interesará mucho que tipo de sociedad somos o quien es el director ejecutivo.
A mi me interesaría más mostrar ofertas y precios.
que me aconsejas??
muchas gracias por tu ayuda
Hola Maria,
En schema.org veras como se puede etiquetar ofertas, precio, etc etc.
Yo voy a probar con la web de un negocio local a ver como le afecta a su posicionamiento, si noto alguna mejoría me comprometo a comentarlo por aquí.
Un saludo
Hola, buscando info sobre este tema llegue a tu post y como veo que eres un lince a las respuestas, allá voy con mi duda:
Estoy modificando la web de una empresa que desea posicionarse con unas palabras claves determinadas, que hacen referencia a una aplicación software que comercializan.
En la portada del sitio web, hacen una pequeña referencia a dicha aplicación, que enlaza a na pagina sobre esa apli, por lo que entiendo que debo aplicar los schema a dicha parte del código, pero… ¿debo añadir etiquetas schema al resto del sitio web o solo a esa parte?
Un saludo.
Hola,
Entiendo que las etiquetas de producto deben ir sólo en esa parte que describes el producto.
Gracias por tu rapidez en la respuesta, acabo de releer mi mensaje y no me he explicado bien, lo lamento.
Me refería a si en otras partes del código debo añadir alguna otra etiqueta (algún meta o similar) para que el buscador sepa que existen etiquetas schema en la pagina. O si por ejemplo, en el pie de pagina, donde esta la info de la empresa, también podría poner las etiquetas de tipo empresa sin que se “entrometan” en las de producto.
La verdad es que acabo de conocer estas etiquetas y ando un poco perdido porque es un poco complejo.
Y me gustaría aprovechar este mensaje para saber si sabemos que efecto tienen estas etiquetas en la visualización de los resultados en la búsqueda, es decir, si el buscador solo muestra el name, description,… de los schema o también muestra el title o el description de los meta de la pagina.
Un saludo y gracias de nuevo por las respuestas.
Excelente articulo… los descubri por casualidad, navegando en la web… Los seguire con gusto
Saludos
¿Hay alguna forma de poner los microformatos automáticamente? Porque si no vas a tardar muchísimo si tienes una web con 1000 páginas.
excelente por fin entendí gracias por el aporte
Hola Juan, me parece muy interesante tu explicacion, y queria preguntarte sobre mi proyecto, es una web de turismo rural y lo que quiero es conseguir que aparezca la foto de cada alojamiento en los snippet, por ahora me aparece en las alertas de google, pero no en todas, solo en las que tienen video.
He usado:
En la etiqueta html he añadido:
En el head:
he cambiado lt por comienzo de etiqueta y mt por fin de etiqueta…
Perdon por la repeticion, si puedes borra el primero.
en la etiqueta body he añadido
y cuando hay video:
Inicialmente solo tenia para video y me los reconocia, cuando meti todo lo de la etiqueta html y body, ademas de los metas me salian las fotos, pero solo de las paginas donde hay video.
Lo que quiero es que me salga la foto en todos los alojamientos, te agradeceria me comentaras si me he pasado con los esquemas, he confundido algun parametro….
Gracias por tu atencion.
Interesantísimo…
Aunque tengo un par de objeciones.
· De cara al SEO no conviene geolocalizar una web; si decimos que estamos en Madrid -aunque tengamos la capacidad logística para vender y distribuir nuestros productos en Barcelona o toda España- Google nos mostrará en Madrid solamente… Mala idea.
· Utilizar herramientas gratuitas para el e-commerce: creo que ninguna de ellas -PrestaShop, OpenCart, Magento- utiliza html5, y me parece que aún están muy lejos de usarlas…
Pero para sitios y/o proyectos personales, sumando Responsive y el SEO “tradicional” es genial utilizar microformatos 😉
Muy interesante el artículo, lo aplicaré a mi página web.
Muchas gracias, me ha sido de gran ayuda
Pero no me queda claro en que parte del código pegar los microformatos, en el head? en el body??….
Hola! Van en el body, dentro del propio código al que hacen relación en cada parte de la web.
Hola Juan
Enhorabuena por el articulo aun que ya lleve mas de 2 años!!
Una duda que me surge, si tengo una tienda online con varios productos, ¿tendria que aplicar el codigo a cada uno de ellos?, ¿o solo en la pagina principal?
En ambos casos en que archivo deberia de insertar el codigo?
Muchas Gracias!
Hola, muy bueno el artículo
Actualmente tengo problemas para que me validen en la W3C ciertos itemsprop en HTML 5 (no todos) empleando itemscopes especialmente más nuevos
y bajo otra propiedad:
Yo me imagino que la W3C no acepta aún todas estas cosillas y debemos limitarnos a usar los que validan de verdad. Sabes o cococes de alguna manera de resolverlo?
Por otro lado Google entiende la”imagen” pero para nada el “article body”.
Qué cosas!
😛
Encontré la solución, poniendo el itemscope y el itemtype en el
Un saludo!
Muy buen artículo, bien explicado… hay muy pocos ejemplos
Hola Juan.
Hay un comentario que schema tiene una gran influencia en el posicionamiento del 2014. Pero según MOZ, no lo veo en el ranking de este año. Quisiera que me diera su opinión de especialista. ¿Schema, es realmente un elemento a tener en cuenta hoy, para posicionar el sitio mañana o dentro de 3 o 6 meses o es algo factible a tiempo futuro? LA FAMOSA WEB SEMANTICA DEL FUTURO, LA CIENCIA FICCION Y BLA, BLA, BLA… Por favor, si fuera tan amable, quisiera su experiencia personal…
Saludos desde Cuba
Gracias por el blog…
Joel
Excelente comentario y sobre todo ?til. Es lo que estaba buscando. Gracias
Hola!! Genial el artículo, muy bien desarrollado, desde lo fácil a lo complicado. Gracias!!!!
como anillo al dedo! muchas gracias por el aporte
Una pregunta, la manera de como pones los schema con el span y el div cuando lo paso por el validador w3c validator me dice que no es correcto. ¿Es esta la manera de ponerlo bien? ¿Porqué me dice que esta manera no es correcta? gracias