Close
Image Alt

Schema.org: Optimiza el posicionamiento de tu página web

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:

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:

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.

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):

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:

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:

Como veis hay mucho que etiquetar aquí. Fijaros línea a línea cómo quedaría:

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):

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

Comments

  • me gusto es articulo y general todo tu blog

    29 June, 2011
    reply
  • Buen artículo, una pregunta, ¿ crees que mejorará el posicionamiento de una web si se introducen los schemas ?.

    saludos

    4 July, 2011
    reply
  • rosa

    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

    2 September, 2011
    reply
  • Pablo

    Genial artículo , muchas gracias por ayudarnos en mejorar el posicionamiento de nuestras páginas web :).

    4 September, 2011
    reply
  • una consulta, se usa solo con html5? si lo aplico en versiones anteriores no sirve?

    18 January, 2012
    reply
  • Alberto

    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

    29 February, 2012
    reply
      • Alberto

        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

        29 February, 2012
        reply
        • Alberto

          vale, no me deja poner código html. Te vuelvo a poner el ejemplo sin etiquetas

          29 February, 2012
          reply
  • Alberto

    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

    1 March, 2012
    reply
  • orochies

    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…

    14 April, 2012
    reply
  • orochies

    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.

    14 April, 2012
    reply
  • 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

    3 May, 2012
    reply
    • 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

      14 May, 2012
      reply
  • LM

    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.

    31 May, 2012
    reply
      • LM

        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.

        31 May, 2012
        reply
  • jose

    Excelente articulo… los descubri por casualidad, navegando en la web… Los seguire con gusto

    Saludos

    4 September, 2012
    reply
  • ¿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.

    14 September, 2012
    reply
  • excelente por fin entendí gracias por el aporte

    29 September, 2012
    reply
  • 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.

    8 November, 2012
    reply
  • 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 😉

    13 December, 2012
    reply
  • Muy interesante el artículo, lo aplicaré a mi página web.

    Muchas gracias, me ha sido de gran ayuda

    25 December, 2012
    reply
  • Pero no me queda claro en que parte del código pegar los microformatos, en el head? en el body??….

    24 April, 2013
    reply
  • Tony

    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!

    24 May, 2013
    reply
  • 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!

    😛

    10 June, 2013
    reply
  • Encontré la solución, poniendo el itemscope y el itemtype en el

    Un saludo!

    10 June, 2013
    reply
  • 10 June, 2013
    reply
  • Muy buen artículo, bien explicado… hay muy pocos ejemplos

    4 April, 2014
    reply
  • 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

    17 December, 2014
    reply
  • Excelente comentario y sobre todo ?til. Es lo que estaba buscando. Gracias

    19 December, 2014
    reply
  • Hola!! Genial el artículo, muy bien desarrollado, desde lo fácil a lo complicado. Gracias!!!!

    29 May, 2015
    reply
  • como anillo al dedo! muchas gracias por el aporte

    19 September, 2015
    reply
  • enric

    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

    17 November, 2015
    reply
  • Muy bien explicado 🙂

    Muchas gracias por compartirlo!

    23 February, 2016
    reply
  • Nos ponemos a ello!! 🙂

    5 May, 2016
    reply
  • Genial!! Muy buena info, Muchisimas gracias!!

    19 January, 2017
    reply

Post a Comment