Migas de pan semánticas (I): con microdatos de schema.org

[ratings]

La forma en que Google y otros buscadores presentan los resultados tienen cada vez más detalles interesantes para todos los que nos dedicamos al desarrollo de webs, su posicionamiento y su analítica. Para comenzar este artículo, vamos a estudiar con detalle los tres primeros resultados obtenidos de la siguiente consulta en google.es: alfonso ii asturias.

Resultados de la búsqueda en google.es de los términos alfonso ii asturias

A primera vista, los tres primeros resultados tienen una estructura similar: el enlace con el título de la página web en color azul oscuro; la dirección URL, en verde; y la descripción de la página web. Pero si lo investigamos más de cerca podemos descubrir algunos datos interesantes que nos ayudará a posicionar mejor nuestros sitios web.


Si nos fijamos en las URL, en los enlaces destino podemos comprobar que en el primer resultado obtenemos dos URL distintas aunque relacionadas:

En los otros dos resultados tanto el título como la URL en color verde apuntan al mismo sitio. Bien es cierto que el segundo resultado de Wikipedia aporta otros enlaces, pero son anclas dentro del mismo texto y por lo tanto apuntan a secciones de la misma página web. ¿Cómo se consigue esto? Veamos a continuación dos formas de marcar semánticamente las migas de pan.

Menú de miga de pan con marcado semántico

Utilizando menús en formato de miga de pan con marcado semántico. Un menú de miga de pan es aquel que nos indica el camino que hemos recorrido dentro de la estructura de una web y nos facilita retroceder a cualquier punto de dicho trayecto. En la web del primer resultado de nuestro ejemplo el menú de miga de pan es este:

Ejemplo de menú en forma de miga de pan

Una forma habitual de elaborar estos menús en HTML 5 es este código:

<nav>

<ul>

<li><a href="http://www.condadodecastilla.es">Inicio</a> &gt;</li>

<li><a href="http://www.condadodecastilla.es/personajes">Personajes</a> &gt;</li>

<li>Alfonso II, el Casto</li>

</ul>

</nav>

El nuevo elemento <nav> nos indica que es una sección de navegación y presentamos los elementos como una lista no ordenada con las etiquetas <ul> y <li>. Se podría haber hecho también con <div> o <p> anidados. A continuación añadiríamos los enlaces necesarios a cada elemento del menú.

Pero sólo por disponer de un menú de este tipo, los buscadores no son capaces de indexar la información semántica que puedan contener. Para ello es necesario marcar con información semántica a las migas de pan. Actualmente esto se puede realizar con dos tecnologías: con los microdatos de schema.org y con RDFa.

Migas de pan con microdatos de schema.org

Los microdatos son información que se añade al código HTML de una página web para que los buscadores tengan información adicional acerca de su contenido. Generalmente esta información adicional es de carácter semántico, es decir, sobre el significado y el ámbito del conocimiento del contenido que muestra la página web. Para que esta información sea correctamente interpretada es necesario que exista un vocabulario aceptado por la gran mayoría de motores de búsqueda y de navegadores. Uno de los vocabularios más extendidos es el ofrecido por schema.org. Surge en el año 2011 por iniciativa de Google, Bing y Yahoo! y posteriormente se asocian otros buscadores como Yandex. Su objetivo es estandarizar el uso de los microdatos, creando un vocabulario común y utilizando algunos formatos ya utilizados previamente como FOAF o los propuestos por Microformats.

Un microdato tiene siempre un par de valores: un ámbito de aplicación definido por itemscopeitemtype="valor" y una o varias propiedades con significado dentro de ese tipo de contenido definidas con itemprop. Precisamente schema.org nos ofrece un tipo de contenido adecuado denominado Breadcrumb (miga de pan en inglés) con las siguientes propiedades:

  • title, título de un elemento de la miga de pan
  • url, enlace de un elemento de la miga de pan
  • child, el siguiente elemento de la miga de pan en la jerarquía. Debe de ser también del tipo Breadcrumb.

Por lo tanto el código fuente anterior lo podemos modificar de esta forma:

<nav>

<ul>

<li itemscope itemtype="https://schema.org/Breadcrumb">

<a href="http://www.condadodecastilla.es" itemprop="url"><span itemprop="title">Inicio</span></a> &gt;

</li>

<li itemscope itemtype="https://schema.org/Breadcrumb">

<a href="http://www.condadodecastilla.es/personajes" itemprop="url"><span itemprop="title">Personajes</span></a> &gt;

</li>

<li>Alfonso II, el Casto</li>

</ul>

</nav>

De esta forma a cada elemento enlazado de la miga de pan le asignamos un significado de menú de miga de pan y le damos dos propiedades: un enlace, definido por itemprop="url" y un título, definido por itemprop="title". En este caso no es necesario definir quién es hijo de quien pues se asume que el primer elemento es padre del siguiente. Pero si hubiera casos de elementos de navegación complejos en los que puede haber varias rutas de navegación, será necesario especificar quién es el hijo de quien mediante la propiedad itemprop="child".

En un artículo posterior trataremos el marcado semántico con RDFa.

Más información:

Sobre nosotros Analizo Su Web

Servicios de auditoría técnica, analítica, consultoría y desarrollo web.

Deja un comentario

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

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.