Breadcrumb Navigation – linkagem interna e usabilidade

Utilizando dados estruturados é possível criar um Breadcrumb que auxilia o seu cliente na navegação, aparece nas pesquisas e aumenta sua linkagem interna.

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:

Linkagem interna

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:

<div>
 <a href="/eletronicos/">Eletrônicos</a> »
 <a href ="/eletronicos/televisores/">Televisores</a> »
 <a href ="/eletrônicos/televisores/tv-led">TV LED</a> »
 <a href ="/eletronicos/televisores/tv-led/samsung">Samsung</a> »
 TV-Slim-LED-32-Full-HD-Samsung-32F5200
 </div>

•  Adicione o atriburo itemprop=”breadcrumb”:

&lt;div<strong> itemprop="breadcrumb"</strong>&gt;
 &lt;a href="/eletronicos/"&gt;Eletrônicos&lt;/a&gt; »
 &lt;a href ="/eletronicos/televisores/"&gt;Televisores&lt;/a&gt; »
 &lt;a href ="/eletrônicos/televisores/tv-led"&gt;TV LED&lt;/a&gt; »
 &lt;a href ="/eletronicos/televisores/tv-led/samsung"&gt;Samsung&lt;/a&gt; »
 TV-Slim-LED-32-Full-HD-Samsung-32F5200
 &lt;/div&gt;

OBS: Repare que a página atual não possui link!

• Deixe a tag body dessa forma:

&lt;body <b>itemscope itemtype="http://schema.org/WebPage"</b>&gt;

• 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 preferencia, 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;
• 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.

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.