Artículo de Juan Luis Mora, ingeniero informático y consultor SEO, SEM y AEO con más de 15 años de experiencia. Te puede interesar: proyectos SEO en los que trabajo.

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]

[/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]

[/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]

[/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]

[/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]

[/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

¿Necesitas ayuda con tu proyecto? Trabajo como consultor SEO, SEM y AEO freelance, sin agencia ni intermediarios, para pymes, tiendas online, multinacionales y empresas SaaS. Algunos de mis servicios: posicionamiento web para empresas, presupuesto SEO, consultoría de marketing online y consultoría AEO y SEO para IAs. Escríbeme y lo vemos.