Implementar uma navegação de migalhas com marcação de esquema
Senior SEO-specialist
Os breadcrumbs proporcionam uma melhor experiência ao utilizador e ajudam os motores de busca a compreender a hierarquia do teu sítio Web. Ao enriquecê-las com dados estruturados (marcação de esquema), também aumentas as probabilidades de obter rich snippets nos resultados de pesquisa. Neste artigo: como implementar corretamente os breadcrumbs, tanto a nível visual como técnico, incluindo a marcação JSON-LD.
1. O que são migalhas de pão?
Breadcrumbs são trilhas de navegação que mostram ao usuário onde ele está dentro da estrutura de um site.
Exemplo:
kotlin
Home > SEO > Structured data > Breadcrumbs implementeren
Melhora:
- UX (navegação rápida)
- Estrutura das ligações internas (ligações internas adicionais)
- SEO (contexto e hierarquia)
2. Implementação visual (HTML/CSS)
O ideal é colocares os breadcrumbs no topo de uma página, abaixo do H1, com HTML estruturado.
Exemplo de HTML:
html
<nav aria-label="Breadcrumb">
<ol>
<li><a href="https://jouwdomein.nl">Home</a></li>
<li><a href="https://jouwdomein.nl/seo/">SEO</a></li>
<li>Breadcrumb navigatie</li>
</ol>
</nav>
Adiciona CSS para formatação visual (por exemplo, setas, espaçamento).
3. Adiciona dados estruturados através de JSON-LD
Os dados estruturados são necessários para tornar os breadcrumbs visíveis nos resultados da pesquisa.
Exemplo de JSON-LD:
html
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://jouwdomein.nl"
},
{
"@type": "ListItem",
"position": 2,
"name": "SEO",
"item": "https://jouwdomein.nl/seo/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumb navigatie",
"item": "https://jouwdomein.nl/seo/breadcrumb-navigatie/"
}
]
}
</script>
Coloca este script em ou na parte inferior do da página.
Aan de slag met SEO? Neem gerust contact op.
4. Implementação no WordPress
Utilizas o WordPress? Então há três formas de definir automaticamente o breadcrumb + schema:
Opção 1: Yoast SEO
- Ativa abaixo: SEO > Pesquisa Ver > Breadcrumbs
Adiciona o código PHP ao teu tema:
php
<?php
if (function_exists('yoast_breadcrumb')) {
yoast_breadcrumb('<p id="breadcrumbs">', '</p>');
}
?>
Opção 2: Classifica a Matemática
- Ativar as Pistas de navegação em Classificar Matemática > Geral > Pistas de navegação
- Integração automática de JSON-LD
Opção 3: Manual
- Utiliza o teu próprio HTML + marcação de esquema personalizada como acima
5. Testes e validação
Verifica se o Google reconhece corretamente os teus breadcrumbs.
Ferramentas:
- Teste de resultados avançados
- Validador de marcação de esquema
Verifica:
- Não há erros ou avisos
- Posições e URLs corretos
- A estrutura corresponde à navegação visual
6. Melhores práticas
| Diretiva | Notas |
| Mostrar breadcrumbs onde é relevante | Pensa em blogues, categorias, serviços, conteúdos de formato longo |
| Utiliza a hierarquia completa | Não há ‘breadcrumbs de atalho’, mostra sempre o caminho completo |
| Faz uma correspondência visual com JSON-LD | O Google espera que os breadcrumbs também apareçam na página |
| Atualização da reestruturação do sítio | Ajusta também a marcação se a estrutura do URL for alterada |
Em conclusão
Breadcrumbs com marcação schema melhoram a tua estrutura de ligações internas, SEO e a experiência do utilizador. Com algumas linhas de HTML e JSON-LD, torna-as utilizáveis e visíveis nos resultados de pesquisa. Simples, eficaz e indispensável para qualquer site bem estruturado.
