Datos estructurados de ruta de navegación (BreadcrumbList)

Ruta de navegación en los resultados de la búsqueda

El recorrido de la ruta de navegación de una página indica su posición en la jerarquía de un sitio y puede ayudar a los usuarios a comprender y explorar un sitio de manera eficaz. Un usuario puede navegar hasta el nivel superior de la jerarquía del sitio, de a un nivel por vez, comenzando desde la última ruta de navegación del recorrido.

Disponibilidad de funciones

Esta función está disponible en computadoras de escritorio en todas las regiones y los idiomas en los que está disponible la Búsqueda de Google.

Cómo añadir datos estructurados

Los datos estructurados son un formato estandarizado con el que se puede proporcionar información sobre una página y clasificar su contenido. Consulta cómo funcionan los datos estructurados si aún no te has familiarizado con ellos.

A continuación se explica a grandes rasgos cómo crear, probar y publicar datos estructurados.

  1. Añade las propiedades obligatorias. Consulta más información sobre dónde insertar datos estructurados en una página en función del formato que estés utilizando.
  2. Sigue las directrices.
  3. Valida tu código con la prueba de resultados enriquecidos y corrige los errores críticos. Te recomendamos que también corrijas los problemas no críticos que puedan marcarse en la herramienta, ya que pueden ayudar a mejorar la calidad de los datos estructurados (sin embargo, esto no es necesario para que se muestren los resultados enriquecidos).
  4. Crea varias páginas que incluyan tus datos estructurados y comprueba cómo las ve Google con la herramienta de inspección de URLs. Asegúrate de que Google pueda acceder a tu página y de que no esté bloqueada por un archivo robots.txt, por la etiqueta noindex ni por requisitos de inicio de sesión. Si la página se ve bien, puedes solicitar que Google vuelva a rastrear tus URLs.
  5. Para que Google siempre tenga la versión actualizada de tus páginas, te recomendamos que envíes un sitemap. Puedes automatizar este envío con la API Sitemap de Search Console.

Ejemplos

La Búsqueda de Google usa lenguaje de marcado de ruta de navegación en el cuerpo de una página web para clasificar la información de la página en los resultados de la búsqueda. A menudo, como se muestra en los siguientes casos prácticos, los usuarios pueden llegar a una página desde tipos de búsquedas muy distintos. Si bien cada búsqueda puede mostrar la misma página web, la ruta de navegación clasifica el contenido dentro del contexto de la consulta de la Búsqueda de Google. La página de los ganadores de un premio por un libro de ficción podría usar los siguientes recorridos de ruta de navegación:

Recorrido de ruta de navegación única

Si solo hay un recorrido de ruta de navegación que puede dirigir a la página, esta podría especificar el siguiente recorrido de ruta de navegación:

Libros › Ciencia ficción › Galardonados

JSON-LD

Aquí tienes un ejemplo en JSON-LD que admite esa ruta de navegación:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    }
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Aquí tienes un ejemplo en RDFa que admite esa ruta de navegación:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="3">
      </li>
    </ol>
  </body>
</html>

Microdatos

Aquí tienes un ejemplo en microdatos que admite esa ruta de navegación:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award winners</span>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
  </body>
</html>

HTML

El siguiente es un ejemplo de un bloque de ruta de navegación de HTML en la página como parte del diseño visual.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Recorrido de ruta de navegación múltiple

Si hay varias maneras de navegar a una página de tu sitio, puedes especificar varios recorridos de ruta de navegación para una sola página. Este es un recorrido de ruta de navegación que dirige a una página de libros galardonados:

Libros › Ciencia ficción › Galardonados

Este es el otro recorrido de ruta de navegación que dirige a la misma página:

Literatura › Galardonados

JSON-LD

Este es el ejemplo de JSON-LD que admite varios recorridos de ruta de navegación:


<html>
  <head>
    <title>Award Winners</title>
    <script type="application/ld+json">
    [{
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Books",
        "item": "https://example.com/books"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Science Fiction",
        "item": "https://example.com/books/sciencefiction"
      },{
        "@type": "ListItem",
        "position": 3,
        "name": "Award Winners"
      }]
    },
    {
      "@context": "https://schema.org",
      "@type": "BreadcrumbList",
      "itemListElement": [{
        "@type": "ListItem",
        "position": 1,
        "name": "Literature",
        "item": "https://example.com/literature"
      },{
        "@type": "ListItem",
        "position": 2,
        "name": "Award Winners"
      }]
    }]
    </script>
  </head>
  <body>
  </body>
</html>

RDFa

Este es el RDF de ejemplo que admite varios recorridos de ruta de navegación:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books">
          <span property="name">Books</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction">
          <span property="name">Science Fiction</span></a>
        <meta property="position" content="2">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/books/sciencefiction/awardwinners">
          <span property="name">Award Winners</span></a>
        <meta property="position" content="3">
      </li>
    </ol>
    <ol vocab="https://schema.org/" typeof="BreadcrumbList">
      <li property="itemListElement" typeof="ListItem">
        <a property="item" typeof="WebPage"
            href="https://example.com/literature">
          <span property="name">Literature</span></a>
        <meta property="position" content="1">
      </li>
      ›
      <li property="itemListElement" typeof="ListItem">
        <span property="name">Award Winners</span>
        <meta property="position" content="2">
      </li>
    </ol>
  </body>
</html>

Microdatos

Estos son los microdatos de ejemplo que admiten varios recorridos de ruta de navegación:


<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books">
            <span itemprop="name">Books</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemscope itemtype="https://schema.org/WebPage"
           itemprop="item" itemid="https://example.com/books/sciencefiction"
           href="https://example.com/books/sciencefiction">
          <span itemprop="name">Science Fiction</span></a>
        <meta itemprop="position" content="2" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/books/sciencefiction/awardwinners">
          <span itemprop="name">Award Winners</span></a>
        <meta itemprop="position" content="3" />
      </li>
    </ol>
    <ol itemscope itemtype="https://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <a itemprop="item" href="https://example.com/literature">
          <span itemprop="name">Literature</span></a>
        <meta itemprop="position" content="1" />
      </li>
      ›
      <li itemprop="itemListElement" itemscope
          itemtype="https://schema.org/ListItem">
        <span itemprop="name">Award Winners</span>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
  </body>
</html>

HTML

El siguiente es un ejemplo de un bloque de ruta de navegación de HTML en la página como parte del diseño visual.

<html>
  <head>
    <title>Award Winners</title>
  </head>
  <body>
    <ol>
      <li>
        <a href="https://www.example.com/books">Books</a>
      </li>
      <li>
        <a href="https://www.example.com/books/sciencefiction">Science Fiction</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
    <ol>
      <li>
        <a href="https://www.example.com/literature">Literature</a>
      </li>
      <li>
        Award Winners
      </li>
    </ol>
  </body>
</html>

Lineamientos

Para que tu contenido aparezca en la ruta de navegación de la Búsqueda de Google, debes cumplir con los siguientes lineamientos.

Te recomendamos que proporciones rutas de navegación que representen una ruta de acceso típica del usuario a esa página, en lugar de duplicar la estructura de la URL. No es necesario incluir un código ListItem de ruta de navegación para la ruta de acceso de nivel superior (el dominio o nombre de host de tu sitio) ni para la página en sí.

Definiciones de tipos de datos estructurados

Para especificar las rutas de navegación, define un elemento BreadcrumbList que contenga al menos dos ListItems. Debes incluir las propiedades obligatorias para que tu contenido sea apto para aparecer en las rutas de navegación.

BreadcrumbList es el elemento contenedor que incluye todos los elementos de la lista. La definición completa de BreadcrumbList está disponible en schema.org/BreadcrumbList. Las propiedades compatibles con Google son las siguientes:

Propiedades obligatorias
itemListElement

ListItem

Un arreglo de rutas de navegación que aparece en un orden específico. Define cada ruta de navegación con un elemento ListItem. Por ejemplo:

{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  }]
}

ListItem

ListItem contiene detalles sobre un elemento individual de la lista. La definición completa de ListItem está disponible en schema.org/ListItem. Las propiedades compatibles con Google son las siguientes:

Propiedades obligatorias
item

URL o un subtipo de Thing

La URL de la página web que representa la ruta de navegación. Hay dos maneras de especificar item:

  • URL: Especifica la URL de la página. Por ejemplo: 
    "item": "https://example.com/books"
  • Thing: Usa un ID para especificar la URL según el formato de marcado que usas:
    • JSON-LD: Usa @id para especificar la URL.
    • Microdatos: Puedes usar href o itemid para especificar la URL.
    • RDFa: Puedes usar about, href o resource para especificar la URL.

Si la ruta de navegación es el último elemento del recorrido, item no es obligatorio. Si no se incluye item para el último elemento, Google usa la URL de la página que lo contiene.

name

Text

Es el título de la ruta de navegación que se muestra al usuario. Si usas un elemento Thing con name en lugar de URL para especificar item, entonces no se requiere el elemento name.
position

Integer

La posición de la ruta de navegación en el recorrido. La posición 1 representa el comienzo del recorrido.

Monitorizar resultados enriquecidos con Search Console

Search Console es una herramienta que te ayuda a monitorizar el rendimiento de tus páginas en la Búsqueda de Google. No hace falta que te registres en Search Console para que tu sitio web aparezca en los resultados de la Búsqueda de Google, pero, si lo haces, sabrás cómo lo ve Google y qué puedes hacer para mejorarlo. Te recomendamos que consultes Search Console en los siguientes casos:

  1. Después de implementar datos estructurados por primera vez
  2. Después de publicar plantillas nuevas o modificar el código
  3. Al hacer el análisis periódico del tráfico

Después de implementar datos estructurados por primera vez

Una vez que Google haya indexado tus páginas, puedes comprobar si hay algún problema en el informe de estado de resultados enriquecidos correspondiente. Lo ideal es que haya un aumento en el número de elementos válidos y que no lo haya en el número de elementos no válidos. Si detectas problemas en tus datos estructurados, haz lo siguiente:

  1. Corrige los elementos no válidos.
  2. Inspecciona la URL en tiempo real para ver si el problema continúa.
  3. Solicita que se valide la corrección desde el informe de estado.

Después de publicar plantillas nuevas o modificar el código

Cuando hagas cambios significativos en tu sitio web, observa si se incrementa la cantidad de elementos no válidos de datos estructurados.
  • Si notas que hay más elementos no válidos, quizá sea porque has implementado una plantilla que no funciona, o puede que tu sitio esté interactuando con la plantilla que utilizas de un modo diferente que no es adecuado.
  • Si notas que hay menos elementos válidos, pero no hay un incremento de elementos no válidos, es posible que hayas dejado de insertar datos estructurados en tus páginas. Para saber cuál es la causa del problema, utiliza la herramienta de inspección de URLs.

Al hacer el análisis periódico del tráfico

Consulta el informe de rendimiento para analizar el tráfico de tus páginas en la Búsqueda de Google. En él, verás con qué frecuencia aparece tu página como resultado enriquecido en la Búsqueda, cada cuánto hacen clic en ella los usuarios y cuál es la posición media que ocupa tu sitio web en los resultados de búsqueda. También puedes obtener automáticamente estos resultados con la API de Search Console.

Solución de problemas

Si tienes problemas para implementar o depurar datos estructurados, te brindamos algunos recursos que podrían resultarte útiles.