Schema.org y microdatos mejorar el SEO con marcado semántico

Estamos continuamente intentando ofrecer contenido de calidad para obtener el mejor posicionamiento en buscadores, y por supuesto para ofrecer la mejor experiencia de uso a nuestros usuarios.

El maquetado estándar de HTML, nos ofrece una herramienta pensada para estructurar documentos con mayor o menor flexibilidad dependiendo de la versión de HTML elegida.

Usando atributos y etiquetas HTML como “title” o “alt”, podemos ayudar a los buscadores en la indexación de nuestros contenidos. Pero si especificamos la información semática podemos ofrecer una información adicional muy rica, que además los principales buscadores ya saben entender, así que adelante, comencemos a usar schemas semánticos en nuestras páginas web.

Schema.org

Por lo general, las etiquetas HTML  indican  al navegador cómo mostrar nuestros documentos, lo que conocemos por maquetación. Por ejemplo:

  1. <h1>Título</h1>

Indica al navegador que muestre la cadena de texto “Título” en formato título 1. Sin embargo, la etiqueta HTML no da ninguna información semántica sobre la cadena de texto en particular, y esto puede hacer que sea más difícil para los motores de búsqueda  mostrar de forma inteligente los resultados de búsqueda.

Primeros pasos con schema.org

A continuación os muestro una traducción de la documentación que viene en schema.org

Schema.org plantea una colección de vocabularios que los webmasters pueden utilizar en el marcado de sus páginas, de manera que los principales buscadores:  Google, Microsoft y Yahoo, pueden entender el significado de cada una de las partes del documento.

Marcar contenidos con Schema.org

Usaremos el vocabulario schema.org, junto con el formato de los microdatos, para añadir información a nuestros contenidos en HTML.

¿Por qué utilizar Schema.org?

Los motores de búsqueda tienen una comprensión limitada de lo que se sucede en los  contenidos (comentarios, actualizaciones, editores…). Los Microdatos, son un conjunto de etiquetas ( 1b. itemscope y ItemType) que añadidas dentro del código HTML  podrían decir cosas como: “Hey motor de búsqueda, en esta información se describe …”.

El nuevo marcado puede ayudar a los buscadores  a entender mejor su contenido,y mostrarlo de una manera útil y relevante.

Ejemplo de uso de microdatos

Comencemos con un ejemplo concreto. Imagina que tienes una página sobre la película Avatar, con un enlace al trailer, información sobre el director, y así sucesivamente.

El código HTML puede ser algo como esto:

  1. <div>
  2. <h1>Avatar</h1>
  3. Director: James Cameron (16 de agosto de 1954)
  4. Science fiction
  5. <a href="http://movies.es/avatar-theatrical-trailer.html">Enlace a la película</a>
  6.  
  7. </div>

Paso 1, identificando el contenido

Para ello, agregamos el elemento itemscope a la etiqueta HTML que encierra la información sobre el tema, así:

  1. <div>
  2. <h1>Avatar</h1>
  3. Director: James Cameron (16 de agosto de 1954)
  4. Science fiction
  5. <a href="http://movies.es/avatar-theatrical-trailer.html">Enlace a la película</a>
  6.  
  7. </div>

Mediante la adición de itemscope, se especifica que el código HTML contenido en el div.

Paso 2, identificando el tipo de elemento

Puede especificar el tipo de elemento con el atributo ItemType inmediatamente después de la etiqueta itemscope.

  1. <div>
  2. <h1>Avatar</h1>
  3. Director: James Cameron (16 de agosto de 1954)
  4. Science fiction
  5. <a href="http://movies.es/avatar-theatrical-trailer.html">Enlace a la película</a>
  6.  
  7. </div>

Esto especifica que el elemento contenido en el div es en realidad una película, tal como se define en la jerarquía de tipos schema.org.

Los tipos de elementos se proporcionan las direcciones URL, en este caso http://schema.org/Movie.

Información adicional en el schema

Las películas tienen propiedades interesantes, tales como actores, director, calificaciones. Para etiquetar propiedades de un elemento, utilizamos el atributo itemprop. Por ejemplo:

  1. <div>
  2. <h1>Avatar</h1>
  3. Director: James Cameron(16 de agosto de 1954)
  4. Science fiction
  5. <a href="http://movies.es/avatar-theatrical-trailer.html">Enlace a la película</a>
  6.  
  7. </div>

En schema.org, podemos encontrar para cada tipo de elemento que propiedades tiene definidas, por ejemplo en: http://schema.org/Movie  encontraremos las propiedades para las películas.

Hemos usado etiquetas para colocar los atributos, porque no cambian el aspecto de las páginas (salvo que este definido en el estilo), así que son un elemento muy práctico de HTML para utilizar con itemprop.

Propiedades anidadas

A veces, el valor de una propiedad  puede ser otro elemento con su propio conjunto de propiedades. Por ejemplo, podemos especificar que el director de la película es un elemento de tipo Persona y la persona tiene propiedades como por ejemplo la  fecha de nacimiento.

  1. <div>
  2. <h1>Avatar</h1>
  3. Director:James Cameron
  4.  
  5. (16 de agosto de 1954)
  6. Science fiction
  7. <a href="http://movies.es/avatar-theatrical-trailer.html">Enlace a la película</a>
  8.  
  9. </div>

Para especificar que el valor de una propiedad es otro elemento, se inicia un nuevo itemscope inmediatamente después de la itemprop correspondiente.

Vocabulario schema.org

schema.org tipos y propiedades

No todas las páginas web son de películas, schema.org describe una variedad de otros tipos de elementos y cada uno de ellos tiene su propio conjunto de propiedades, que se pueden utilizar para describir el elemento.

El tipo más amplio tiene cuatro propiedades: nombre, descripción, url, y la imagen. Otros tipos más específicos comparten propiedades con tipos más amplios. Por ejemplo, un lugar es un tipo más específico de la cosa y un LocalBusiness es un tipo más específico de lugar.
Los ítems heredan las propiedades de sus padres. (En realidad, un LocalBusiness es un tipo más específico de lugar y un tipo más específico de la Organización, por lo que hereda las propiedades de ambos padres.)
He aquí un conjunto de tipos de elementos de uso común:

Elementos de uso común

Algunas notas extras

Más es mejor, exceptuando el  texto oculto. En general, cuanto más contenido marcado, mejor. Sin embargo, no debemos marcar el contenido oculto de la página y por supuesto, debemos marcar de forma correcta, no podemos decir que una película es un coche.

Cuidado con la propiedad url. Para páginas con una colección de artículos (enlaces), deberemos marcar cada artículo por separado y añadir la propiedad url del enlace a la página correspondiente para cada elemento, así (ejemplo con enlaces a perfiles):

  1. <div><a href="alice.html">Alice Jones</a></div>
  2. <div><a href="bob.html">Bob Smith</a></div>

Con este último apartado vamos a dar por finalizada la entrada, pero en el sitio oficial todavía podemos ver algunas notas para un uso avanzado, lo puedes hacer aquí: http://schema.org/docs/gs.html


Conoce mis servicios SEO.



Servicios personalizados para profesionales, agencias y PYMES

18 comentarios en “Schema.org y microdatos mejorar el SEO con marcado semántico

  1. Hola.

    Lo he implementado en mi web (es bastante sencillito), pero al probarlo en http: //www. google .com/webmasters/tools/richsnippets?url=XXXXXX me da el siguiente mensaje:

    The following errors were found during preview generation:
    This page does not contain authorship or rich snippet markup.

    Con la autoría no he hecho nada, pero las etiquetas rich snippets parece estar correctas por el resultado que devuelve.

    ¿Cómo podría solucionarse?

  2. Para que aparezca tu foto en los resultados de búsquedas tienes que poner el perfil de Google plus enlazado, terminando ?rel=author y luego poner la página en tus paginas de colaborador en G plus.

  3. Un gran post. Recientemente he tenido que implementar el esquema de microdatos NewsArticle y aunque la mayor “complejidad” puede ser la anidación, es realmente sencillo.

  4. Saludos.
    Me ha parecido un artículo muy interesante.
    Llevo poco tiempo con esto y me gustaría empezar a implementarlo en mis trabajos, aunque después de estar ojeando los tipos no sabría exactamente como clasificar mi web personal (un portfolio con mis trabajos como diseñador freelance), he pensado “Person” o “Creativework” pero no termino de tenerlo claro. ¿Algún consejo al respecto?

  5. Hola, podria ser tan amable en ayudarme con esa duda que tengo pues llevo semanas tratando de añadir los microdatos en mi sitio y no he tenido respuesta.
    Lo que no entiendo es donde lleva
    Si es dentro del o junto con el contenido del sitio, porque si es dentro del “body” va afectar mi codigo CSS o no?!
    Saludos

  6. Es complicado de responder, desde luego al CSS no afecta para nada porque se pone en las etiquetas html.

    Este blog tiene puestos los básicos y yo diría que alguno más para un blog, haz ver código fuente y podrás ver como los he colocado.

  7. Entiendo que las etiquetas html se pueden estructurar bajo este metodo, pero mi pregunta es como se puede hacer si las etiquetas son php y especificamente Joomla 2.5
    Gracias

  8. Hola me ha gustado mucho el post pero tengo una dudita, tengo una web en la que necesito crear microdatos de productos y he probado Microdata for SEO by Optimum7.com y Schema Creator by Raven, el caso es que cuando creo un producto mediante alguno de estos dos plugins me sale un recuadro con el mismo, yo pensaba que solo me sadría ese producto que he creado mediante el plugins en la serp pero no es así, hay algún modo de que solo salga en las serp ya que yo ya tengo maquetado mi producto en la página correspondiente y no quiero que se duplique?, gracias

  9. Ese tipo de marcado se coloca en las etiquetas HTML, no son un meta dato que no es visible para los usuarios, es texto que debe ser visible,lo que debes hacer es colocar los atributos dentro de las etqiuetas html ya existentes.

  10. Muchas gracias por tu post. A mi me da el siguiente erro cuando compruebo los datos “At least one field must be set for HatomFeed.”

    ¿Donde tengo ese error?

    Gracias

  11. ¡Hola! mi web muestra un catálogo de cursos de formación, quiero etiquetar cada curso con los microdatos, pero no sé qué tipo utilizar. Pensé en el tipo “product”, pero en Schema.org dicen que sólo se puede utilizar ese tipo si se paga online en esa página. Si el pago es offline no se considera tipo product y no encuentro un tipo que encaje perfectamente.

  12. Hola Juan, sé que los textos ocultos no son buenos para el SEO, pero… ¿en el caso de los microdatos – schema tiene importancia?
    Básicamente en el blog al colocarlo, esta información queda visible y no me interesa que sea así. ¿Si lo oculto es malo, pierde su propósito? Gracias.

  13. schema.org no es un texto oculto, es un marcado semántico puesto para que los buscadores entienda mejor el significado de las páginas web. Como ves esto está muy lejos de ser texto oculto.

    Lo normal es que la info que se marca sea relevante y si interese mostrarla, me parece extraño que no quieras verla. Pero en todo caso la parte que tras ser marcada se ve es HTML visible y si lo ocultas si estarías poniendo texto oculto.

  14. Hola Juan Luis,

    En el articulo he encontrado que donde estas intentando mostrar el código html, por algun motivo no esta cogiendo las etiquetas y se muestra asi:

    <div> <h1> Avatar </h1> <span>

    Se va hasta el fondo.

    Saludos.

  15. Hola Juan Luis, muchas gracias por tu artículo. A ver si me puedes ayudar, utilizo la versión 1.6.0.11 de prestashop, en GWT, me sale aparecen 355 errores de marcado schema.org en los precios de los pruductos. Como podría solucionar esto?

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *