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:
[html]
Título
[/html]
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:
[html]
Avatar
Director: James Cameron (16 de agosto de 1954)
Science fiction
Enlace a la película
[/html]
Paso 1, identificando el contenido
Para ello, agregamos el elemento itemscope a la etiqueta HTML que encierra la información sobre el tema, así:
[html]
Avatar
Director: James Cameron (16 de agosto de 1954)
Science fiction
Enlace a la película
[/html]
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.
[html]
Avatar
Director: James Cameron (16 de agosto de 1954)
Science fiction
Enlace a la película
[/html]
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:
[html]
Avatar
Director: James Cameron(16 de agosto de 1954)
Science fiction
Enlace a la película
[/html]
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 [html][/html] 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.
[html]
Avatar
Director:James Cameron
(16 de agosto de 1954)
Science fiction
Enlace a la película
[/html]
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
- Creative works: CreativeWork, Book, Movie, MusicRecording, Recipe, TVSeries …
- Embedded non-text objects: AudioObject, ImageObject, VideoObject
- Event
- Organization
- Person
- Place, LocalBusiness, Restaurant …
- Product, Offer, AggregateOffer
- Review, AggregateRating
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):
[html]
[/html]
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
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?
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.
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.
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?
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
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.
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
Pues tienes que escribir HTML etiquetado con php, en este sitio puedes ver varias formas http://hacerpaginaswebconphp.com/category/lenguaje-php/uso-de-echo/
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
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.
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
Tiene pinta de ser un fallo relacionado con el propio marcado del theme
¡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.
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.
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.
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.
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?
Hola Luis, usa la herramienta de Google para ver que te falla: http://www.google.com/webmasters/tools/richsnippets?hl=es
Allí verás en rojo lo que tienes mal.
no se ven los cambios en los codigos cuando insertar el itemprop