Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Ruta de navegación

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.

La ruta de navegación que se muestra en una página web

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 ancillaryjustice.html puede mostrar los siguientes recorridos de una ruta de navegación según el contexto de la búsqueda.

Recorrido de ruta de navegación única

Una búsqueda que incluye un año y un premio basado un género literario, "Premio Nébula 2014 a la mejor novela", puede generar la siguiente 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. Algunas partes de la ruta de URL no ayudan a los usuarios a comprender cómo la página encaja en tu sitio web. Por ejemplo, si la URL es https://example.com/pages/books/catcher_in_the_rye.html, la ruta pages de la URL no agrega información, y tampoco lo hace el elemento de nivel superior example.com.

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 a fin de 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.

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.

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 utilizas:
    • 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.

Solución de problemas

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