Dominio: gerenciandoblog.com.br
Chave: 00e39a4dc6309327334fa422703bddd1e83c509f
Hora do cache: 1487164464
Vida do cache: 1488460460
Status: 1
Mensagem: Licença válida
Chave do Pedido: 11808bbc6205bade68f0b70c302eaa74d4305945
Chave do Produto: PROKEY
Scroll Top

Hospedagem - 728 x 90

Blogger SEO

Como usar o breadcrumb no Blogger

Como usar o breadcrumb no BloggerO “breadcrumb” é um recurso importante de usabilidade e SEO, que permite que seus visitantes se localizem facilmente em seu blog.

Aprenda neste artigo como configurá-lo em seu blog do Blogger.


Introdução

Literalmente, “breadcrumb” significa “migalhas de pão”.

O termo vem da história de João e Maria: quando ambos estavam andando pela floresta, jogavam migalhas de pão pelo chão, para poderem encontrar o caminho de volta.

Mesmo a estratégia não tendo funcionado (pássaros comeram as migalhas e tudo terminou em tragédia), o termo “breadcrumb” é utilizado hoje para mostrar ao visitante onde ele está em determinado site.

Veja o exemplo do Gerenciando Blog:

 

Como usar o breadcrumb no Blogger

A ideia é que os visitantes saibam, ao ver essa estrutura, que estão lendo um artigo dentro da “categoria” chamada “Google”.

Se eles clicaram nessa palavra, verão todos os artigos dessa mesma “categoria”.

Quando o conceito do “breadcrumb” é utilizado de maneira correto, o resultado da busca por esse artigo no Google também será mostrado de forma diferente.

Veja o exemplo abaixo:

 

Como usar o breadcrumb no Blogger

A vantagem de uso é que isso dá destaque aos seus resultados e também permite que o usuário do Google possa ir direto a essa “categoria” de artigos em seu blog.

Nos próximos passos, você verá como implementar esse conceito em seu blog do Blogger.

Há categorias no Blogger?

No Blogger, não existe exatamente o conceito de categoria, por isso estou sempre usando essa palavra entre aspas.

Por esse motivo, também não existe o conceito de “breadcrumb” pronto nele.

Mas, isso pode ser facilmente contornado e simulado com o uso de Marcadores.

É bem possível que você já os conheça e use muito bem em seu blog.

Mas, vale a pena dar uma lida (ou relida) no artigo Utilizando corretamente Marcadores no Blogger.

Para todos os efeitos, um Marcador (quando bem utilizado, claro) representa uma Categoria em seu blog.

Por isso, se você utiliza 20 Marcadores em cada postagem que faz, e a maioria dos Marcadores está associada a apenas um artigo, sinto lhe dizer: você está fazendo uso errado deles.


Um bom Marcador é aquele que permite que seu visitante encontre outros artigos sobre o mesmo assunto.

Se isso não é possível, ele é inútil.

Mas, vamos assumir que você já os usa corretamente (ou sairá deste artigo com o compromisso de ajustá-los). Após fazer isso, você poderá prosseguir com este tutorial tranquilamente.

Como mostrar o “breadcrumb” no Blogger?

Fazendo um pesquisa rápida, encontrei diversos tutoriais ensinando como exibir em seu blog o “breadcrumb”.

No entanto, muitos fazem apenas sua exibição aos leitores, não tendo os códigos necessários para que o Google os entenda corretamente.

Este tutorial resolverá os dois problemas.

Para fazer com que o “breadcrumb” funcione, é necessária uma pequena alteração no HTML do seu template. Os passos abaixo mostram como fazer isso:

1. Antes de iniciar, faça um backup de seu template, para o caso de precisar voltá-lo. Veja como fazer isso no artigo Como Fazer Backup de seu Blog.

2. Localize em seu template a linha abaixo. Normalmente, você a encontrará em dois pontos do seu template. O trecho correto é o segundo que você encontrar.

<a expr:name=’data:post.id’/>

3. Abaixo desse trecho é necessário colocar um código adicional. Você pode escolher entre as duas opções abaixo:

a) Se você quiser que seja mostrado apenas um item de breadcrumb quando houver mais de um Marcador, use este código.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>

  <div id=’breadcrumb’>

    <span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’>

      <a expr:href=’data:blog.homepageUrl’ itemprop=’url’><span itemprop=’title’>Início</span></a>

    </span>

    <b:loop values=’data:post.labels’ var=’label’>

      <b:if cond=’data:label.isLast == &quot;true&quot;’>

        &gt;

        <span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’>

          <a expr:href=’data:label.url’ itemprop=’url’><span itemprop=’title’><data:label.name/></span></a>

        </span>

      </b:if>

    </b:loop>

  </div>

</b:if>

b) Se você quiser que sejam mostrados todos os itens de breadcrumb quando houver mais de um marcador, use este. Note que, se você tiver muitos Marcadores em um mesmo artigo, o resultado final pode ficar estranho.

<b:if cond=’data:blog.pageType == &quot;item&quot;’>
  <div id=’breadcrumb’>
    <span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’>
      <a expr:href=’data:blog.homepageUrl’ itemprop=’url’><span itemprop=’title’>Início</span></a>
    </span>
    <b:loop values=’data:post.labels’ var=’label’>
      &gt;
      <span itemscope=” itemtype=’http://data-vocabulary.org/Breadcrumb’>
        <a expr:href=’data:label.url’ itemprop=’url’><span itemprop=’title’><data:label.name/></span></a>
      </span>
    </b:loop>
  </div>
</b:if>

Como confirmar se tudo ficou correto?

O primeiro ponto que você deve confirmar é se o breadcrumb apareceu logo acima do título das postagens.

Note que ele só aparecerá na própria página da postagem, e não na inicial.

Veja um exemplo no artigo SEO, WordPress e Blogger:

Como usar o breadcrumb no Blogger

O segundo ponto que você deve confirmar é se o Google está entendendo corretamente o seu breadcrumb.

Para isso, acesse a página http://www.google.com/webmasters/tools/richsnippets, digite o endereço de uma postagem do seu blog (que contenha um Marcador) e clique em “Visualizar”.

O breadcrumb deve aparecer abaixo do título de sua postagem.

 

Como usar o breadcrumb no Blogger

IMPORTANTE: Pode demorará algum tempo (dias ou semanas) para que haja mudança nos resultados do Google para seu blog. Isso é normal. O importante é que o breadcrumb seja exibido corretamente nesta página de teste.

Conclusão

Esta é uma pequena alteração que pode lhe trazer bons resultados de SEO, por atrair mais cliques dos usuários do Google.

Além disso, ela pode ser útil para seus visitantes saberem onde estão em seu blog – o que também é bastante positivo para você.

E você, já conhecia o conceito do “breadcrumb”? Já o utiliza em seu blog? Compartilhe sua opinião ou dúvida em um comentário!

Imagem de João e Maria via Shutterstock

Classifique este post


De um play no vídeo abaixo e aprenda a Criar blogs Profissionais




Gostou deste artigo? Ajude nosso projeto.
Compartilhe em suas redes sociais nos botões abaixo:

Sobre o autor | Website

Especialista em Marketing Digital, presta Consultoria e auxilia diversos clientes. Amante por blogs, é responsável pela administração dos blogs Afiliados na web, Gerenciando Blog e Mundo Blogger.

42 Comentários

  1. Cristina Boldi disse:

    Oi Adelson, tudo bom?
    Eu fiz como ensinou no passo a passo, e coloquei abaixo do segundo código que eu encontrei conforme você ensinou, porém minhas postagens sumiram e só voltaram depois que eu retirei o código. O que será que deu errado?
    Obrigada!

    Beijos!

    • Adriano Luz disse:

      Olá, Cris!

      Havia um pequeno erro no código (que descobri graças ao comentário do Alexandre Rodriz), o que acredito que tenha causado esse problema em seu blog. Já corrigi o código e agora o breadcrumb está aparecendo corretamente em seu blog.

      Beijo!

    • Cristina Boldi disse:

      Olá Adelson!

      Acabei de verificar e está funcionando perfeitamente.
      Muito obrigada e parabéns pelo excelente trabalho!

      Beijos!

    • Adriano Luz disse:

      Oi, Cris!

      Que ótimo! Fico feliz que tenha dado certo. Já pesquisei seus resultados no Google e ele já está aparecendo corretamente lá também!

      Torço para que isso traga efeitos positivos ao seu blog!

      Beijo!

  2. Fabio Alves disse:

    Mais uma dica útil para a visibilidade do link na busca do google. obrigado

    • Adriano Luz disse:

      Olá, Fabio!

      Realmente, essa dica dá uma forcinha para chamar a atenção nos resultados do Google. Fico feliz que tenha gostado.

      Um abraço!

  3. Alexandre Rodriz disse:

    Boa Tarde Adelson =) Ainda não verifiquei onde está o erro… se é que existe algum erro, ou é algum lapso da minha parte. No meu blog de testes a 1ª opção não está a funcionar correto. Não mostra o post. A 2 ª opção está a 100%. Vou agora verificar se pela 2ª opção dá para verificar se ha algo de errado com a 1ª.

    • Alexandre Rodriz disse:

      Oki, ja vi que já colocou o > parseado =)
      Obrigado Adelson, Excelente!

    • Adriano Luz disse:

      Olá, Alexandre!

      Em seu comentário abaixo, você descobriu o problema! O código original havia sido alterado pelo Windows Live Writer, o que fez com que as aspas normais fossem substituídas pela inglesas, invalidando o código.

      Agora, o código está corrigido e funcionando corretamente.

      Obrigado pelo toque!

      Um abraço!

  4. Alexandre Rodriz disse:

    Julgo que a existir erro, está relacionado na condicional onde surge isLast.

  5. Paula Mello disse:

    Acabei de ler pelo feed e vim comentar: essa dica arrasou! A gente vê muitos tutoriais por aí mas nenhum deles explica os "bastidores" como o Gerenciando. Mais um artigo esplêndido!! Estou aprendendo a usar o google analitics e tem sido surpreendente! Obrigada!!

    • Adriano Luz disse:

      Olá, Paula!

      Que ótimo que tenha gostado! Eu faço mesmo questão de não apenas mostrar o código, mas também explicar o motivo de aplicá-lo. Assim, fica mais fácil para cada um decidir se deseja ou não ter isso em seu blog.

      Um abraço!

  6. Lady Sybylla disse:

    O breadcrumb é um dos recursos que eu mais curto. Uma pena ele não ser nativo. Ajudaria muito mais do que fazer tudo na unha. Mas o que é a vida sem uma aventura, não é mesmo?? :escort:

    Já com relação às categorias, seria interessante se esse recurso fosse como o do WordPress, onde existem as categorias e as tags. Isso deixaria o blog mais arrumado. Quem sabe o Blogger, com essa leva de melhorias, não faça isso também?

    Ótimo post!

    • Adriano Luz disse:

      Olá, Sybylla!

      Eu também gostaria demais se o Blogger permitisse esse recurso nativamente, sem termos que recorrer a hacks como esses.

      Mas, enquanto isso não acontece, quem faz essas adaptações destaca-se em relação aos demais blogs.

      Um abraço!

  7. G Lima disse:

    Muito bem explicado, fiz e deu tudo certo. Adelson continue sempre assim com esse trabalho maravilhosos que é o Gerenciando Blog. Parabéns.

  8. Anderson Filmes disse:

    Olá Adelson, No meu template nao funcionou, Dá uma olhada http://urafilmestorrent.blogspot.com.br/, o que devo fazer para corrigir ?

    • Adriano Luz disse:

      Olá, Anderson!

      Embora o breadcrumb não esteja sendo mostrado em sua tela, ele está configurado corretamente para o Google.

      Quanto a não ser exibido, é uma característica de seu template. Você pode tentar posicionar o código em outros locais, até encontrar um em que seja exibido corretamente.

      Um abraço!

  9. Almir Ferreira (Panorâmica Social) disse:

    Olá Adelson,

    Eu conhecia essa ferramenta e a utilizo há bastante tempo, desde uma vez que eu tive que instalá-lo seguindo um tutorial, até o template atual, que já veio com o breadcrumb instalado.
    Mas só agora eu descobri, fazendo o teste que você indicou, que as categorias não aparecem nas buscas do Google. Mas não acredito que isso seja motivo para muitas preocupações não é? Ou será que sim?

    Grande abraço!

    • Adriano Luz disse:

      Olá, Almir!

      A parte visual do breadcrumb é apenas um dos benefícios que ele pode trazer ao seu blog. O que procurei mostrar aqui é que você pode se beneficiar também dos resultados positivos em termos de SEO.

      Como o seu blog já tem esse recurso, você pode apenas adaptar o código do seu breadcrumb para mostrar os trechos faltantes.

      Um abraço!

  10. Romirys Cavalcante disse:

    Adelson no meu caso já uso corretamente os marcadores mas não fiz ainda com que o google entendesse isso. Se eu seguir esse tutorial a maneira como eu mostro os marcadores em meu site mudaria, ou ficaria da mesma maneira ? Sabe me dizer? Outra coisa tem como eu fazer apenas com que o google entenda de que marcador estou falando em um post sem ter que mexer na forma atual que exibo eles em meu blog ? Desde já agradeço se puder ajudar.

    P.S. meu blog é Vivendo entre Símbolos, aquele de matemática…. lembra?! rsrsrs

    Att. Romirys Cavalcante

    • Adriano Luz disse:

      Olá, Romirys!

      Sua situação é bastante parecida com a do Almir, que acabo de responder.

      Em seu caso, também seria interessante você adaptar seu código atual de breadcrumb, adicionando os códigos necessários para que o Google os entenda.

      Seus resultados ficarão bem mais interessantes no Google e chamarão a atenção dos usuários.

      Um abraço!

  11. Lu disse:

    Que legal, Adelson!
    Gostei de conhecer sobre o 'breadcrumb'. Vou colocar o código no meu blog 🙂
    Um grande abraço,
    Lu

    • Adriano Luz disse:

      Olá, Lu!

      Que ótimo saber que gostou! Este é mesmo um recurso bem interessante, mas que pouca gente explora. É uma ótima forma para sair na frente e se destacar!

      Um abraço!

  12. Asantix disse:

    Por vezes sinto suores por via de pânico ou por correr. Hoje suei por alegria,coisa estranha mas aconteceu e tudo graças a ti, Adelson Smania,por tão maravilhosa partilha. Obrigado por mais esta excelente dica.
    Um abraço Português.

  13. Joanir Rocha Pidorodeski disse:

    Muito boa essa dica. Já tinha visto sites que usavam esse recurso, mas não sabia exatamente para que serviam nem que isso facilitava a busca por categoria no Google.
    Muito obrigado mesmo pelo tutorial!! Abraço.

    • Adriano Luz disse:

      Olá, Joanir!

      Que ótimo saber que o artigo foi útil para você! Faço sempre questão de explicar para que servem as mudanças, para que cada um possa se decidir se irão ou não aplicar ao seu blog.

      Um abraço!

  14. Kallasweb disse:

    Olá Adelson!
    Gostaria de dizer que essa dica funcionou muito bem como foi indicado. Porém, só não aparece nas páginas estáticas do blog. Tem alguma ideia do motivo? Também ocorreu um efeito colateral que foi o seguinte: coloquei um estilo css, bem simples, apenas para mudar o fundo do div onde inseri o código da dica, porém, no lugar onde deveria aparecer o breadcrumb nas páginas estáticas é mostrado apenas um risco de um lado a outro da cor indicada no estilo que coloquei… Na página principal também aparece esse risco entre os artigos.

    Ser for possível, também gostaria de saber como remover esse efeito da página principal.

    Mais uma vez, obrigado! Parabéns pelo site. Tem ótimas dicas.
    Gilberto!

    • Adriano Luz disse:

      Olá, Gilberto!

      Fico feliz em saber que esteja gostando das dicas!

      Para que o breadcrumb apareça também nas Páginas, basta modificar a primeira linha do código

      b:if cond='data:blog.pageType == "item"'

      para

      b:if cond='data:blog.pageType =! "index"'

      Quanto ao problema visual, talvez seja necessário colocar uma condicional com um display:none para o tipo de páginas onde o breadcrumb não será exibido.

      Um abraço!

    • Kallasweb disse:

      Opa, legal! É isso mesmo. Deu certo aqui
      Valeu

      Gilberto!

  15. Marcos disse:

    Depois que fiz isso em meu site(usar breadcrumb) as visitas diminuiram, não sei se foi coincidência ou se foi pelo fato de ter usado o breadcrumb, por via das dúvidas removi-os

  16. Fabrício Gomes disse:

    Mas uma grande dica!
    Para fechar o balão das minhas modificações só falta mudar o padrão de dados estruturados do meu template. Por padrão do meu template os dados estão por exemplo: div class="hentry" entre outras marcações com class. O problema é que na ferramenta de dados estruturados do webmaster tools, minhas postagens estão com erro, e eu quero mudar a marcação para microdados ou scherma.org. Você tem alguma postagem falando sobre isso?

  17. Gustavo disse:

    Adelson, muitas vezes, ao fazer a pesquisa no Google, aparecem alguns links abaixo da descrição, que são links, que também estão dentro da página. Funcionam como se fossem atalhos do conteúdo da página que já aparecem no Google, por exemplo, quando vou comprar uma tv led casas bahia, a página de televisores na pesquisa do Google já aparece com os filtros de tv de led, smart tv, etc….isso também é programável? Como faz?

  18. Vaquinha Virtual disse:

    Não consigo fazer que o Google apresente dados estruturados. Por que?

  19. Click Games disse:

    Serviu muito para meus blogs de jogos na plataforma blogger, melhora muito em termos de SEO, essa migalhas servem como uma espécie de marcação de caminho, vlw!

  20. Jorge Luiz disse:

    Fiz o procedimento correto colando o segundo código, mais não houve alteração nenhuma em meu blog. Sabe me informar o problema? Obrigado !

  21. Jorge Luiz disse:

    Arrumei aqui, funcionou certinho, obrigado !

  22. Leandro Ultra Downloads disse:

    Boa noite Adelson Smania. Muito obrigado mesmo pelo tutorial. Realmente ficou muito bom no meu Site, funcionou muito bem mesmo. Você com seus tutoriais sempre bem explicativos nos atende de uma forma muito perfeita e simples de se entender. Sempre estou aqui para conferir as novidades em seu Site. Muito obrigado mais uma vez e continue sempre com esse seu ótimo trabalho. Um Grande Abraço.

  23. Video Foda Gay disse:

    Olá fiz todo procedimento, mas quando faço o teste no http://www.google.com/webmasters/tools/richsnippets ele aparece tudo em códigos, e não como você mostra, não sei o que fazer

  24. Fábio Fortinelli disse:

    Meu blog ficou aparecendo isto depois que instalei: http://3.bp.blogspot.com/-H2UKr7oIG-Y/Vq-SibvPtVI/AAAAAAAAI8U/gaKX5pnAKGM/s1600/erro%2Blink.png

    Alguns títulos foram indexados com a palavra "anterior" ou "next" antes do título. Como arrumo isso?

  25. Pedro Marcos disse:

    Muito boa a explicação.. consegui adicionar os breadcrumbs e deu tudo certo. parabéns!

Para enviar seu comentário, preencha os campos abaixo:

Por gentileza, se deseja alterar o arquivo do rodapé,
entre em contato com o suporte.
Quer aprender como R$173.571,73 como Afiliado em 4 meses?Quero Assistir o Vídeo!