Criando Breadcrumb Microdata Schema.org com o ícone SVG

Publicidade

Breadcrumb microdata schema.org com o ícone SVG - A navegação Breadcrumb serve para fornecer um link para cada página anterior pela qual o usuário passa e mostra a localização atual do usuário no site. Simplificando, o breadcrumb na página mostra a posição da página na hierarquia do site.

Nesse caso, a Pesquisa do Google também usa marcação de breadcrumb de uma página da web para categorizar informações de páginas nos resultados de pesquisa. Dessa forma, os usuários podem chegar a uma página e os usuários podem retornar à mesma página da Web com a mesma categoria da página anterior.

Atualmente, ainda existem muitos sites ou blogs que usam breadcrumbs com marcação data-vocabulary.org. Mas a marcação schema.org é a última marcação recomendada para breadcrumb.

Na verdade, não há necessidade de qualquer marcação para fazer a breadcrumb aparecer nos resultados da pesquisa, o importante é que haja uma navegação de página na forma de uma lista.

Mas seja o que for, devemos implementar algo recomendado por mecanismos de busca como o Google. Um deles faz um breadcrumb com a marcação schema.org.

Dessa vez, compartilharei como fazer migalhas para o Blogger usando microdados de marcação do schema.org, adicionando um ícone SVG como separador de cada rótulo.




Para fazer isso, por favor, siga os passos abaixo.

Por favor, copie o seguinte código.

<b:includable id='breadcrumb' var='posts'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<b:loop values='data:posts' var='post'>
<b:if cond='data:post.labels'>
<div class='breadcrumbs' itemscope='itemscope' itemtype='https://schema.org/BreadcrumbList'>
<svg viewBox='0 0 24 24'><path d='M10,20V14H14V20H19V12H22L12,3L2,12H5V20H10Z' fill='#000000'/></svg>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:blog.homepageUrl' title='Home' itemprop='item' itemtype='https://schema.org/Thing'>
<span itemprop='name'>Home</span></a>
<meta content='1' itemprop='position'/>
</span>
<svg viewBox='0 0 24 24'><path d='M5.5,9A1.5,1.5 0 0,0 7,7.5A1.5,1.5 0 0,0 5.5,6A1.5,1.5 0 0,0 4,7.5A1.5,1.5 0 0,0 5.5,9M17.41,11.58C17.77,11.94 18,12.44 18,13C18,13.55 17.78,14.05 17.41,14.41L12.41,19.41C12.05,19.77 11.55,20 11,20C10.45,20 9.95,19.78 9.58,19.41L2.59,12.42C2.22,12.05 2,11.55 2,11V6C2,4.89 2.89,4 4,4H9C9.55,4 10.05,4.22 10.41,4.58L17.41,11.58M13.54,5.71L14.54,4.71L21.41,11.58C21.78,11.94 22,12.45 22,13C22,13.55 21.78,14.05 21.42,14.41L16.04,19.79L15.04,18.79L20.75,13L13.54,5.71Z' fill='#000000'/></svg>
<b:loop index='num' values='data:post.labels' var='label'>
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>
<a expr:href='data:label.url + &quot;?&amp;max-results=16&quot;' expr:title='data:label.name' itemprop='item' itemtype='https://schema.org/Thing'>
<span itemprop='name'><data:label.name/></span>
</a>
<meta expr:content='data:num+2' itemprop='position'/>
</span>
<b:if cond='data:label.isLast != &quot;true&quot;'>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
</b:if>
</b:loop>
<svg viewBox='0 0 24 24'><path d='M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z' fill='#000000'/></svg>
<span><data:post.title/></span>
</div>
</b:if>
</b:loop>
</b:if>
</b:includable>


Por favor, salve o código acima <b:includable id='comment-form' var='post'>. Se anteriormente existe um código parecido ou similar, substitua-o pelo código acima.

Em seguida, adicione o seguinte estilo CSS para tornar a trilha de navegação simples.

/* Breadcrumb */
.breadcrumbs{background:#fff;line-height:1.2em;width:auto;overflow:hidden;margin:0;padding:10px 0;border-top:1px solid #dedede;border-bottom:1px solid #dedede;font-size:80%;color:#888;font-weight:400;text-overflow:ellipsis;-webkit-text-overflow:ellipsis;white-space:nowrap}
.breadcrumbs a{display:inline-block;text-decoration:none;transition:all .3s ease-in-out;color:#666;font-weight:400}
.breadcrumbs a:hover{color:#11589D}
.breadcrumbs svg{width:16px;height:16px;vertical-align:-4px}
.breadcrumbs svg path{fill:#666}


Finalmente, salve o seguinte código onde você deseja exibir o breadcrumb.

<b:include data='posts' name='breadcrumb'/>


Por exemplo, você pode salvá-lo sob o código <b:includable id='main' var='top'>e o breadcrumb aparecerá na parte superior da postagem.

Boa sorte e esperançosamente útil.
Tópicos: