2 maneiras de como instalar Breadcrumb no tema do Blogger
A Trilha de Navegação é um elemento importante que deve ser instalado em todos os blogs ou sites, incluindo a plataforma Blogger (Blogspot). Veja como criar Trilha de Navegação (Breadcrumbs) no seu template sem usar plugin. Antes de discutir como instalá-lo, vamos primeiro conhecer esse "Breadcrumb".
Sumário
1. O que é um Breadcrumb?
Você já ouviu falar de um conto de fadas sobre uma criança em que o personagem principal é sequestrado e depois espalha as migalhas de pão para que outras pessoas encontrem seus rastros? SIM! Eis a história de João e Maria! Como significa literalmente (bread trail), Breadcrumbs servem como direções que permitem aos visitantes saber onde eles estão atualmente ao abrir um blog, site ou documento.
Os conteúdos são links que são estruturados hierarquicamente a partir da página principal, categorias e por fim, para a página atual. Um exemplo de implementação de trilha de navegação comum se parece com este:
Home › Blogger › Tutorial › Artigo Atual
Cada um desses textos é um link ativo (exceto o último) que serve como uma trilha para os visitantes, que quando clicado abre rapidamente a página anterior.
2. Porque o Breadcrumb é importante?
O Breadcrumb é importante porque está relacionado ao SEO e à estruturas de dados. Ele faz com que o blog tenha uma navegação clara e seja mais fácil de ler na página de busca do Google (SERP). Os visitantes podem ver facilmente os rótulos ou categorias que são os pais do artigo.
3. Verifique a localização atual no modelo
Depois de conhecermos o que é breadcrumb, agora é a hora de instalarmos a localização atual no modelo do Blogger. Observe que, neste momento, quase todos os modelos adicionaram uma trilha de navegação do fabricante. Eu mesmo sempre o insiro em todos os modelos do Blogger que faço, gratuitos e premium. Mesmo assim, você tem que estar atento, quem sabe se ainda não existe.
Para verificar, basta usar a ferramenta de teste de dados estruturados do Google que pode ser acessada através do seguinte endereço:
https://search.google.com/structured-data/testing-tool
- Digite o endereço do link da postagem do seu blog na coluna fornecida pelo buscador do Test Tool do Google. Lembre-se de que é o link da postagem, não o link da página inicial do seu blog. Logo após, clique em Realizar Teste.
- A estrutura de localização atual é denotada pelo nome BreadcrumbList. Se o Breadcrumb estiver instalado corretamente, o display mostrará 0 ERROS, 0 AVISOS.
- Clicar em BreadcrumbList mostrará mais informações sobre o itemListElement cujo número deve ser igual ao número de rótulos embutidos no artigo mais 1 URL da página inicial. Por exemplo, meu artigo tem 01 rótulos, a saber:
Blogger. Então, o número de itens deve ser 2, conforme mostrado abaixo.
Número de BreadcrumbList = Página Home + Número de rótulos.
4. Como instalar o breadcrumb no Blogger?
Seu modelo já tem uma localização atual e nenhum erro? Então, parabéns! Você não precisa se cansar de ler este tutorial. Pare e feche este artigo porque não há nada para consertar. Entretanto se ele ainda não existir, ou se houver, mas ainda mostrar uma mensagem de erro, leia e siga o tutorial sobre como instalar o breadcrum amigável para SEO no Blogspot até que ele desapareça. Os Breadcrumbs podem ser instalados através de 2 métodos diferentes, a saber:
- Microdados HTML
- JSON-LD
4.1 Microdados HTML
Este é o método mais popular usado pelos proprietários de blogs. Normalmente colocado acima do título do post.
- Primeiro adicione o seguinte código CSS ACIMA de
</style>ou]]></b:skin>.
/* Breadcrumb Blogger silvanaonline.blogspot.com*/ .breadcrumb { margin-bottom: 20px; } .breadcrumb, .breadcrumb a, .breadcrumb a:hover { font-size: 12px; /* Tamanho do texto */ color: #777; /* cor do texto */ } - Procure o seguinte código:
<h1 class='entry-title'>
Se não estiver lá, procure este código:
<h2 class='entry-title'>
Ainda não está aí? De qualquer forma, procure um elemento HTML que tenha um id ou classeentry-title
. - Adicione este código apenas ACIMA do código mencionado anteriormente.
<!-- Breadcrumb Blogger silvanaonline.blogspot.com --> <b:if cond='data:view.isPost'> <b:loop values='data:posts' var='post'> <div class='breadcrumb' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <a expr:href='data:blog.homepageUrl.canonical' title='Home' itemprop='item'> <meta content='1' itemprop='position'/> <span itemprop='name'>Home</span></a> </span> <b:if cond='data:post.labels'> <b:loop index='num' values='data:post.labels' var='label'> &nbsp;›&nbsp; <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <meta expr:content='data:num+2' itemprop='position'/> <a expr:href='data:label.url.canonical' expr:title='data:label.name' itemprop='item'> <span itemprop='name'><data:label.name/></span> </a> </span> </b:loop> <b:else/> &nbsp;›&nbsp; Sem categoria </b:if> </div> </b:loop> </b:if> - Salve todas as configurações e veja os resultados. Você também pode alterar sua localização, desde que ainda esteja dentro do escopo do artigo. A estrutura e o código de cada modelo são diferentes, dependendo do criador, por isso é difícil emulá-lo com uma classe ou id HTML específico.
No código acima, não exibo o título da postagem que está sendo aberta porque não é realmente necessário. Tudo o que o Google lê é uma lista de links da página inicial e dos rótulos.
Leia também: Menu de navegação lateral com Template Titus.PRÓ sobre estrutura Microdados HTML
- Serve como uma variação adicional que pode aprimorar a página.
- Os visitantes podem retornar imediatamente à página anterior rapidamente clicando no link.
CONTRA sobre estrutura Microdados HTML
- Para quem gosta de um design simples e minimalista, a existência de um link adicional acima deste título pode por vezes incomodar.
- Etapas mais longas ao instalar scripts.
4.2. JSON-LD
A segunda maneira não é feita por muitos proprietários de blog. De alguma forma, talvez porque esse método seja menos conhecido. Ao contrário do primeiro método, JSON-LD não aparecerá em exibição simples porque o script funciona apenas nos bastidores, sem exibir nenhum visual. Quer experimentar um método que não existe no mercado? Vamos lá, então! Por favor, siga o passo-a-passo abaixo sobre como instalar breadcrumb válido para HTML5.
- Procure este código primeiro:
<data:post.body/>
- Adicione o seguinte script ABAIXO do código mencionado anteriormente.
<!-- Breadcrumb Blogger silvanaonline.blogspot.com -->
<script type='application/ld+json'>{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "<data:blog.homepageUrl.canonical/>"
<b:if cond='!data:post.labels'>}<b:else/>},<b:loop index='i' values='data:post.labels' var='label'>
{
"@type": "ListItem",
"position": <b:with value='data:i + 2' var='num'><b:eval expr='data:num'/></b:with>,
"name": "<data:label.name/>",
"item": "<data:label.url.canonical/>"
<b:if cond='data:post.labels.size != data:i + 1'>},<b:else/>}</b:if></b:loop></b:if>
]
}</script>
PRÓ sobre estrutura JSON-LD
- Mais eficiente porque não há necessidade de exibir nenhum HTML na página do blog.
- Script mais curto e fácil de instalar.
CONTRA sobre estrutura JSON-LD
- Não há links ativos que os visitantes possam usar para retornar rapidamente à página anterior.
Ambos têm suas respectivas vantagens. É tão bom, você pode escolher qual você prefere porque os resultados são os mesmos aos olhos do Google. Desde que o método de instalação esteja correto e a estrutura de dados seja válida, então é SEO amigável.
Leia também: Criando navegação de página por número
Validação
Depois que a instalação for concluída, verifique novamente para ter certeza de que a localização atual está correta e válida. Volte a usar os dados estruturados do Google conforme mencionado na etapa 3 acima.
Depois disso, espere alguns dias e verifique no Google Search Console. Se a localização atual for válida, o relatório aparecerá lá, exatamente no menuMelhorias. Certifique-se de que não haja erros.
Como você entende todas as etapas para adicionar breadcrumb ao Blogger acima? Por favor, comente se algo não ficou claro. Pratique imediatamente em seu blog.
https://schema.org/BreadcrumbList
