Crea un componente Breadcrumb optimizado para SEO con Vue

Para empezar: ¿Qué es un breadcrumb?

El término breadcrumb viene del inglés y hace referencia a un camino de migas que por ejemplo dejaron Hansel y Gretel al adentrarse en el bosque para saber cómo volver a casa.

Si lo aplicamos a nuestro sitio web y nuestros usuarios con Hansel y Gretel, queremos dejarles una buena guía para saber cómo moverse por nuestra web a medida que se adentren en ella, ya que una web grande con muchas páginas de contenido puede ser tan abrumadora como aquel bosque.

Por ello nuestro breadcrumb debe indicar de forma clara una serie de enlaces que indiquen la estructura de la web y a través de los cuales un usuario pueda navegar a otras secciones fácilmente.

Además si definimos una estructura acorde con el modelo de estructuras de https://schema.org/ también ayudamos a los robots de los buscadores a entender cómo funciona nuestra web.

Creando el componente

Ahora que sabemos un poco más de teoría, vamos a la práctica. Podemos empezar creando una estructura muy básica para la lógica del componente breadcrumb. Creamos el fichero Breadcrumb.vue y añadimos una estructura básica de enlaces.

export default {
  name: 'Breadcrumb',

  data() {
    return {
      list: [
        { href: 'https://www.example.com', text: 'Home' },
        { href: 'https://www.example.com/blog', text: 'Blog' },
        { href: 'https://www.example.com/blog/first-post', text: 'First Post' }
      ]
    }
  }
}

Y para pintar los datos vamos a agregar una template que pinte todos estos enlaces.

<template>
  <ol>
    <li v-for="(item, index) in list" :key="`breadcrumbItem${index}`">
      <a :href="item.href">
        {{ item.text }}
      </a>
    </li>
  </ol>
</template>

Normalmente los breadcrumbs se suelen colocar al inicio de la página por lo que puedes importar y usar el nuevo componente en cualquiera de tus páginas (En la página principal no es necesario).

Optimizando el breadcrumb para SEO

Existen diferentes tipos de estructuras de datos dentro del estándar, pero en este caso vamos a utilizar el de BreadcrumbList, que podemos encontrar documentado con todos sus atributos en https://schema.org/BreadcrumbList.

En este caso vamos a implementar la estructura con la notación RDFa (Resource Description Framework in Attributes), pero según tus preferencias o requerimientos puedes utilizar Microdata o JSON-LD.

Para indicar en nuestro HTML que vamos a utilizar un modelo es necesario indicarlo en la etiqueta HTML que va a englobar el contenido donde pueden encontrarse los datos del modelo. Una vez hecho esto podemos definir los atributos del modelo, por lo que vamos a modificar un poco el template de nuestro componente.

<template>
  <ol vocab="https://schema.org/" typeof="BreadcrumbList">
    <li
      v-for="(item, index) in list"
      :key="`breadcrumbItem${index}`"
      property="itemListElement"
      typeof="ListItem"
    >
      <meta property="position" :content="index + 1">
      <a
        :href="item.href"
        property="item"
        typeof="WebPage"
      >
        <span property="name">{{ item.text }}</span>
      </a>
    </li>
  </ol>
</template>

Podemos resumir los cambios en estos puntos:

• Definimos el modelo de estructura de datos en la etiqueta padre ol.
• Para cada li del listado indicamos que es un item del modelo con los atributos property y typeof.
• Indicamos la propiedad name (obligatoria) que será el texto asociado al enlace.
• Indicamos la propiedad position (obligatoria) que indicará la posición del elemento respecto al total de enlaces del breadcrumb, empezando por 1 (Aquí no se empieza por 0).

Validando nuestro modelo de datos

Una vez tengamos implementado nuestro componente podemos comprobar que la estructura de datos está bien implementada a través del validador de Google: https://search.google.com/test/rich-results. Podemos utilizar una url donde tengamos el código desplegado o directamente poner un fragmento de código HTML.

En caso que hubiera algún error, por ejemplo que hubiéramos olvidado definir la propiedad position, el validador nos mostraría algo como esto:

Pero si el modelo es validado correctamente, veremos un resultado como este:

También disponemos el validador de datos del mismo sitio web que proporciona el estándar: https://validator.schema.org/

Conclusiones

Al añadir un esquema de modelo de datos al breadcrumb vamos a mejorar los resultados en el posicionamiento de nuestras páginas en los buscadores. Además podemos identificar otros contenidos de nuestra web que queramos optimizar de cara a mejorar los resultados que ofrecen los buscadores al mostrar nuestras páginas.

También ayudaremos a un usuario que aterrice en nuestra web a encontrar a qué sección de nuestra web pertenece el contenido que está viendo.