Dados estruturados de navegação estrutural (BreadcrumbList)

A navegação estrutural de uma página indica a posição dela na hierarquia do site e pode ajudar os usuários a entender e explorar o conteúdo on-line de maneira eficaz. O usuário pode percorrer todo o caminho na hierarquia, um nível por vez, desde a última localização na trilha de navegação estrutural.

Localização atual exibida em uma página da Web

Como adicionar dados estruturados

Os dados estruturados são um formato padronizado para fornecer informações sobre uma página e classificar o conteúdo dela. Caso você não saiba muito sobre o assunto, veja como os dados estruturados funcionam.

Esta é uma visão geral de como criar, testar e lançar dados estruturados.

  1. Adicione as propriedades obrigatórias. Com base no formato que você está usando, saiba onde inserir dados estruturados na página.
  2. Siga as diretrizes.
  3. Valide o código com o Teste de pesquisa aprimorada e corrija os erros críticos. Corrija também os problemas não críticos que possam ser sinalizados na ferramenta, porque eles podem melhorar a qualidade dos dados estruturados, mas isso não é necessário para se qualificar para pesquisas aprimoradas.
  4. Implante algumas páginas que incluam os dados estruturados e use a Ferramenta de inspeção de URL para testar como o Google vê a página. Verifique se a página está acessível ao Google e se não está bloqueada por um arquivo robots.txt, pela tag noindex ou por requisitos de login. Se estiver tudo certo, peça ao Google para rastrear novamente seus URLs.
  5. Para informar o Google sobre mudanças futuras, recomendamos que você envie um sitemap. É possível automatizar isso com a API Search Console Sitemap.

Exemplos

A Pesquisa Google usa a marcação de localização atual no corpo de uma página da Web para categorizar as informações da página nos resultados da pesquisa. Geralmente, conforme ilustrado nos casos de uso a seguir, os usuários podem chegar a uma página a partir de tipos muito diferentes de consultas de pesquisa. Embora cada pesquisa possa retornar a mesma página da Web, a navegação estrutural categoriza o conteúdo dentro do contexto da consulta da Pesquisa Google. A página ancillaryjustice.html pode exibir as seguintes trilhas de navegação estrutural, dependendo do contexto da pesquisa:

Trilha de navegação estrutural única

Uma consulta de pesquisa de um prêmio com base em ano e gênero, como "Prêmio Nebula de Melhor Romance 2014", pode gerar a seguinte navegação estrutural:

Livros › Ficção científica › Vencedores de prêmios

JSON-LD

Veja um exemplo em JSON-LD compatível com essa navegação estrutural:


<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

Veja um exemplo de RDFa compatível com essa navegação estrutural:


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

Microdados

Veja um exemplo em microdados compatível com essa navegação estrutural:


<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

Veja um exemplo de um bloco de navegação estrutural em HTML na página como parte do design 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>

Trilha de navegação estrutural múltipla

Se houver várias maneiras de navegar até uma página no site, especifique várias trilhas de navegação estrutural para uma única página. Veja um exemplo que leva a uma página de livros premiados:

Livros › Ficção científica › Vencedores de prêmios

Veja outra trilha de navegação estrutural que leva à mesma página:

Literatura › Vencedores de prêmios

JSON-LD

Veja um exemplo de JSON-LD compatível com várias trilhas de navegação estrutural:


<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

Veja um exemplo de RDFa compatível com várias trilhas de navegação estrutural:


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

Microdados

Veja um exemplo de microdados compatíveis com trilhas de navegação estrutural múltiplas:


<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

Veja um exemplo de um bloco de navegação estrutural em HTML na página como parte do design 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>

Diretrizes

Siga estas diretrizes e qualifique seu conteúdo para exibição com a localização atual na Pesquisa Google.

Recomendamos fornecer navegação estrutural que represente um caminho típico do usuário até uma página em vez de simplesmente espelhar a estrutura do URL. Algumas partes do caminho do URL não ajudam as pessoas a entender como a página se encaixa no site. Por exemplo, considerando o URL https://example.com/pages/books/catcher_in_the_rye.html, o caminho pages no URL não adiciona nenhuma informação, assim como o elemento de nível superior example.com.

Definições dos tipos de dados estruturados

Para especificar a navegação estrutural, defina um BreadcrumbList que contenha pelo menos dois ListItems. É necessário incluir as propriedades obrigatórias para que seu conteúdo esteja qualificado para exibição na navegação estrutural.

BreadcrumbList é o item de contêiner que tem todos os elementos da lista. A definição completa de BreadcrumbList está disponível em schema.org/BreadcrumbList (em inglês). Veja as propriedades aceitas pelo Google:

Propriedades obrigatórias
itemListElement

ListItem

É uma matriz de navegações estruturais listadas em uma ordem específica. Especifique cada navegação estrutural com um ListItem. Exemplo:

{
"@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 contém detalhes sobre um item individual na lista. A definição completa de ListItem está disponível em schema.org/ListItem (em inglês). Veja as propriedades aceitas pelo Google:

Propriedades obrigatórias
item

URL ou um subtipo de Thing

É o URL da página da Web que representa a localização atual. Há duas maneiras de especificar item:

  • URL: especifique o URL da página. Exemplo: 
    "item": "https://example.com/books"
  • Thing: use um código para especificar o URL com base no formato de marcação usado:
    • JSON-LD: use @id para especificar o URL.
    • Microdados: é possível usar href ou itemid para especificar o URL.
    • RDFa: é possível usar about, href ou resource para especificar o URL.

Se a localização atual é o último item na trilha, item não é obrigatório. Se item não for incluído no último item, o Google usará o URL da página que o contém.

name

Text

É o título da localização atual que aparece para o usuário. Se você usar Thing com name em vez de URL para especificar item, então name não é obrigatório.
position

Integer

É a posição da localização atual na trilha. A posição 1 é o começo da trilha.

Monitorar pesquisas aprimoradas com o Search Console

O Search Console é uma ferramenta que ajuda você a monitorar o desempenho das suas páginas na Pesquisa Google. Não é preciso se inscrever na plataforma para ser incluído nos resultados da Pesquisa Google, mas isso pode ajudar você a entender e melhorar como vemos seu site. Recomendamos verificar o Search Console nos seguintes casos:

  1. Depois de implantar os dados estruturados pela primeira vez
  2. Depois de lançar novos modelos ou atualizar o código
  3. Análise periódica do tráfego

Depois de implantar os dados estruturados pela primeira vez

Depois que o Google indexar as páginas, procure problemas com o relatório de status da pesquisa aprimorada relevante. Em condições ideais, vai haver um aumento de itens válidos e nenhum aumento de itens inválidos. Se você encontrar problemas nos dados estruturados, faça o seguinte:

  1. Corrija os itens inválidos.
  2. Inspecione um URL ativo para verificar se o problema persiste.
  3. Solicite a validação com o relatório de status.

Depois de lançar novos modelos ou atualizar o código

Ao fazer mudanças significativas no site, monitore aumentos nos itens inválidos de dados estruturados.
  • Caso você perceba um aumento nos itens inválidos, talvez tenha lançado um novo modelo que não funcione ou o site esteja interagindo com o modelo existente de uma maneira nova e incorreta.
  • Caso você veja uma diminuição nos itens válidos (não correspondidos por um aumento nos itens inválidos), talvez não esteja mais incorporando os dados estruturados às páginas. Use a Ferramenta de inspeção de URL para saber o que está causando o problema.

Análise periódica do tráfego

Analise o tráfego da Pesquisa Google com o Relatório de desempenho. Os dados vão mostrar com que frequência sua página aparece como aprimorada na Pesquisa, com que frequência os usuários clicam nela e qual é a posição média dela nos resultados. Também é possível extrair automaticamente esses resultados com a API Search Console.

Solução de problemas

Se você tiver problemas para implementar ou depurar dados estruturados, veja alguns recursos que podem ajudar.