Breadcrumbs: O Que São e Como Implementá-los

O que são Breadcrumbs?

Breadcrumbs são um recurso cuja finalidade é melhorar a navegação do usuário e indicar claramente, tanto aos mecanismos de busca quanto aos usuários, a hierarquia das páginas. Dessa forma, o usuário pode visitar rapidamente tanto a página final quanto as categorias às quais essa página pertence.

Formas de implementar breadcrumbs

Em termos de implementação, atualmente temos duas opções: a opção visível para os usuários e a opção de código. Na realidade, ambas devem sempre ser implementadas juntas e não separadamente.

Visível

Na opção visível, o site implementa os breadcrumbs no topo de cada página para que o usuário que visita a página saiba exatamente onde está. Por exemplo, se estamos olhando a página de um produto de um e-commerce (um computador HP Envy), nos breadcrumbs veríamos o seguinte:

Início > Computadores > HP > Envy

Dessa forma, estamos dizendo ao usuário que o produto que está vendo está dentro da categoria de computadores e também pertence à família de computadores HP. Em termos de navegação, esse recurso é muito importante, porque, se o usuário quisesse ver mais modelos HP ou continuar navegando por computadores, estaria a apenas um clique de distância.

Sem esse recurso, a navegação se torna muito mais difícil e as chances de o usuário deixar o site são muito maiores.

Código

Enquanto a opção anterior nos permitia adicionar breadcrumbs para o usuário, esta opção dirá aos mecanismos de busca como nosso conteúdo está categorizado. É muito importante que essa implementação seja feita corretamente, pois o Google não entende breadcrumbs que são apenas visíveis.

Abaixo, você pode ver um exemplo de implementação de Breadcrumbs usando um fragmento de script JSON-LD.

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [{
"@type": "ListItem",
"position": 1,
"name": "Livros",
"item": "https://example.com/books"
},{
"@type": "ListItem",
"position": 2,
"name": "Autores",
"item": "https://example.com/books/authors"
},{
"@type": "ListItem",
"position": 3,
"name": "Ann Leckie",
"item": "https://example.com/books/authors/annleckie"
},{
"@type": "ListItem",
"position": 4,
"name": "Ancillary Justice",
"item": "https://example.com/books/authors/ancillaryjustice"
}]
}
</script>

O código acima nos diz que o livro "Ancillary Justice" foi escrito pela autora Ann Leckie e é um livro.

Livros > Autores > Ann Leckie > Ancillary Justice

Se construímos nosso site com desenvolvimento personalizado ou em algumas das principais linguagens, precisaremos realizar a implementação manualmente. No entanto, se usarmos WordPress, temos vários plugins disponíveis que nos ajudarão com essa implementação:

• ›Rank Math
• ›Yoast SEO

Validando a implementação

Uma vez feita a implementação, o mais importante será verificar que ela foi feita corretamente. Embora verificar a implementação "visível" seja muito simples, já que basta verificar se todos os elementos estão linkados corretamente e funcionam bem, para verificar a implementação por código vamos precisar de um pouco mais de esforço.

Mesmo assim, temos à nossa disposição uma ferramenta do Google e uma extensão do Chrome que vão facilitar muito nossa vida.

Ferramenta de Dados Estruturados do Google:

Usando a ferramenta do Google, podemos validar nossos dados estruturados via URL ou em nível de código, se inserirmos o fragmento diretamente.

Ferramenta de Dados Estruturados do Google

Se inserirmos uma URL, o Google retornará a análise com todos os dados estruturados que foram detectados.

Exemplo de uma análise de URL na ferramenta de dados estruturados do Google.

Se, por outro lado, queremos primeiro testar o código JSON-LD do Breadcrumb antes de implementá-lo, podemos usar a ferramenta de "fragmento de código", que nos dará o seguinte resultado:

Ferramenta de validação de fragmentos de código para dados estruturados.

Structured Data Testing Tool (extensão do Google Chrome)

Se, em vez de visitar a ferramenta do Google, queremos validar os dados estruturados de Breadcrumb (e outros) diretamente do navegador, podemos usar a extensão "Structured Data Testing Tool", que nos mostrará todos os dados estruturados detectados e também quaisquer erros.

Extensão do Chrome para validar Dados Estruturados com um exemplo de um artigo do SEOcrawl AI.

Monitorando breadcrumbs no Google Search Console

Por fim, uma vez feita a implementação e validação, só resta monitorar a atividade no Google Search Console, que nos permitirá acompanhá-la diariamente e detectar quaisquer anomalias.

Visualização do relatório de breadcrumbs no Search Console (lançado em setembro de 2019).

Para encerrar, gostaríamos de perguntar a você: quais foram os erros mais comuns que você encontrou ao implementá-los?

Gostaríamos de juntar uma coleção e publicá-la neste artigo para ajudar outros profissionais de SEO.

Muito obrigado e não se esqueça de compartilhar seus comentários!

Referências

• ›Documentação do Google sobre Breadcrumbs