O que é Breadcrumb?
É uma estrutura de navegação que auxilia o usuário a se localizar entre as páginas (níveis) do website. Para cada nível da estrutura, é criado um link da sessão correspondente. Assim, caso o usuário queira ir direto para a sessão de Eletrônicos, bastaria clicar no nível “Eletrônico”. Veja na prática:
Porque eu devo utilizar breadcrumb?
Primeiramente, é uma forma bem legal de demonstrar a organização do seu site, de mostrar ao usuário onde ele está e contextualizá-lo, melhorando a experiência desse visitante.
Outro fator é que o Google privilegia sites que o ajudam a melhorar suas pesquisas com informações de maior relevância. Assim é possível mostrar ao Google essa hierarquia que existe no seu site. Contribua com ele e ele irá contribuir com você!
Dados Estruturados e Rich Snippets
Dados estruturados são informações formatadas por um padrão comum aos mecanismos de Busca como Google, Bing eYahoo. Através deles o mecanismo refina a busca e obtém informações mais precisas e relevantes. O Google utiliza desse artifício para interpretar e criar rich snippets para o seu site. Veja a imagem:
Caso você queira dar uma lida sobre marcação de Dados Estruturados, aqui no Tableless tem um artigo bem bacana do Thiago Santos:
https://tableless.com.br/schema-marcacao-de-dados-estruturados/#.Ug0KEZIp-lU
Essa é a grande sacada para aumentar a relevância da página. A linkagem interna, uma estratégia de Link Building, é uma ótima prática para sua campanha de SEO, pois aumenta fortemente a navegação e o PageRank da página. Isso acontece quando linkamos outras páginas com alta relevância (Pagerank) na nossa página em questão.
O que você precisa fazer é montar uma boa arquitetura do projeto e escolher os nomes dos níveis de forma estratégica com palavras chave e termos relevantes (sem exageros aqui, por favor!) e criar os links de forma clara e objetiva.
Mas então, como fazemos o breadcrumb?
É bem simples! Esse é o código de um breadcrumb básico, sem a marcação de dados estruturados:
**1. Adicione o atriburo itemprop=”breadcrumb”: **
OBS: Repare que a página atual não possui link!
** 2. Deixe a tag body dessa forma:**
** 3. Pronto! Agora é só usar e aguardar a indexação do Google!**
Boas práticas para um bom breadcrumb
- Use no topo da página, de preferência, logo após o seu Header
- Não exagere! Utilize nomes estratégicos, mas que beneficiem a navegabilidade do usuário.
- Crie um design elegante e amigável, nada de extravagâncias aqui!
- Separe os níveis de forma clara e
- Destaque os links
- Defina com clareza a página atual
- A página atual (último item do breadcrumb) não deve ser link
- E lembrem-se: Breadcrumbs não substituem a navegação principal
Você também pode usar listas para fazer os breadcrumbs. Não há problema. Subjetivamente, um breadcrumb é uma lista de links, logo, usar listas ordenadas ou até mesmo não ordenadas é totalmente semântico.
Um exemplo usando listas seria assim:
Conclusão
Não deixe de implementar o Breadcrumb em seu site, pois são vários os benefícios. Com ele você melhora a experiência do usuário e potencializa as chances de aparecer bem nas buscas.
Como é simples de se fazer, torna-se um ótimo recurso para as suas estratégias de SEO e uma forma de mostrar um site mais organizado.