Gerador de schema e HTML de breadcrumb
Crie dados estruturados BreadcrumbList e HTML de breadcrumb acessível (nav, ol, aria-current) a partir de uma lista de nomes e URLs de páginas. JSON-LD pronto para copiar.
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://example.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Cold Brew Guide",
"item": "https://example.com/blog/cold-brew"
}
]
}
</script><nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav>O que é Gerador de breadcrumb?
Este gerador transforma uma lista de itens de breadcrumb (nome + URL, da página inicial até a página atual) em duas saídas: JSON-LD BreadcrumbList do schema.org para os buscadores e marcação HTML acessível para os visitantes.
Como usar Gerador de breadcrumb
- Edite os itens: uma linha por nível, com o nome e a URL absoluta.
- Adicione ou remova linhas; a última linha é a página atual e pode não ter URL.
- Defina o aria-label do elemento de navegação no idioma do seu site.
- Copie o bloco JSON-LD e o HTML para a sua página.
Exemplo
Home → Blog → Cold Brew Guide
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://example.com/">Home</a></li>
<li><a href="https://example.com/blog/">Blog</a></li>
<li aria-current="page">Cold Brew Guide</li>
</ol>
</nav> Quando usar Gerador de breadcrumb
Use em páginas que mostram uma trilha de breadcrumb, principalmente em estruturas profundas como lojas ou documentações. Os dados estruturados devem corresponder ao breadcrumb visível na página. Estilize os separadores com CSS em vez de acrescentar caracteres à marcação.
Como funciona Gerador de breadcrumb
Cada linha preenchida vira um ListItem com posição começando em 1, nome e URL do item (omitida quando vazia). O HTML é um <nav aria-label> contendo uma lista ordenada; os itens anteriores são links e o último recebe aria-current="page", seguindo o padrão de breadcrumb do WAI-ARIA. Nomes e URLs têm escape HTML; URLs relativas disparam um aviso, porque os dados estruturados devem usar URLs absolutas.
Casos de Uso Comuns
- Acrescentar resultados avançados de breadcrumb a páginas de categoria e de produto.
- Criar HTML de breadcrumb acessível para um site de documentação.
- Substituir um breadcrumb com separadores em texto simples por marcação semântica.
- Gerar a marcação para um site estático sem plugin de breadcrumb.
Perguntas Frequentes
O último item precisa de URL?
Não. O Google permite que a página atual omita o item; ele é incluído aqui se você informar um.
A marcação de breadcrumb garante um breadcrumb nos resultados de busca?
Não. Ela ajuda os buscadores a entender a estrutura do site e torna o resultado elegível para um caminho no estilo breadcrumb, mas o Google decide o que exibir.
Uma página pode ter várias trilhas de breadcrumb?
Sim, acrescente um BreadcrumbList por trilha se a página for acessível por vários caminhos.