Tableless

Busca Menu

Breadcrumb Navigation – Facilite a vida do seu cliente e aumente sua linkagem interna

Seja o primeiro a comentar por

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:

Exemplo de Breadcrumb aplicado ao website

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:

Exemplo direto na pesquisa do Google, utilizando dados estruturados.

Caso você queira dar uma lida sobre marcação de Dados Estruturados, aqui no Tableless tem um artigo bem bacana do Thiago Santos:

http://tableless.com.br/schema-marcacao-de-dados-estruturados/#.Ug0KEZIp-lU

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 class="hiddenSpellError" href="/eletronicos/">Eletrônicos</a> »

	<a class="hiddenSpellError" href="/eletronicos/televisores/">Televisores</a> »

	<a class="hiddenSpellError" href="/eletrônicos/televisores/tv-led">TV LED</a> »

	<a class="hiddenSpellError" href="/eletronicos/televisores/tv-led/samsung">Samsung</a> »

TV-Slim-LED-32-Full-HD-Samsung-32F5200

</div>

1. Adicione o atriburo itemprop=”breadcrumb”: 

<div itemprop="breadcrumb">

	<a class="hiddenSpellError" href="/eletronicos/">Eletrônicos</a> »

	<a class="hiddenSpellError" href="/eletronicos/televisores/">Televisores</a> »

	<a class="hiddenSpellError" href="/eletrônicos/televisores/tv-led">TV LED</a> »

	<a class="hiddenSpellError" href="/eletronicos/televisores/tv-led/samsung">Samsung</a>  »

TV-Slim-LED-32-Full-HD-Samsung-32F5200

</div>

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

 2. Deixe a tag body dessa forma:

<body itemscope itemtype="http://schema.org/WebPage">

 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:

<div itemprop="breadcrumb">
	<ul>
		<li><a class="hiddenSpellError" href="/eletronicos/">Eletrônicos</a> »</li>

		<li><a class="hiddenSpellError" href="/eletronicos/televisores/">Televisores</a> »</li>

		<li><a class="hiddenSpellError" href="/eletrônicos/televisores/tv-led">TV LED</a> »</li>

		<li><a class="hiddenSpellError" href="/eletronicos/televisores/tv-led/samsung">Samsung</a>  »</li>

	<li>TV-Slim-LED-32-Full-HD-Samsung-32F5200</li>
	</ul>
</div>

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.

Publicado no dia