Breadcrumb usando rich snippets do Schema.org

9

Estou tendo problemas para implementar os snippets ricos em trilhas de navegação do schema.org. Quando construo minha trilha de navegação usando a documentação e executo por meio da ferramenta de teste do Google Rich Snippet , a trilha de navegação é identificada, mas não mostrada na visualização.

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body itemscope itemtype="http://schema.org/WebPage">     
      <strong>You are here: </strong>
      <div itemprop="breadcrumb">
        <a title="Home" href="/">Home</a> >
        <a title="Test Pages" href="/Test-Pages/">Test Pages</a> >
      </div>
  </body>
</html>

Se eu mudar para usar os snippets do data-vocabulary.org, os rich snippets serão exibidos corretamente na visualização.

<!DOCTYPE html>
<html>
  <head>
    <title>My Test Page</title>
  </head>
  <body>
      <strong>You are here: </strong>
      <ol itemprop="breadcrumb">
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/" itemprop="url">
            <span itemprop="title">Home</span>
          </a>
        </li>
        <li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          <a href="/Test-Pages/" itemprop="url">
            <span itemprop="title">Test Pages</span>
          </a>
        </li>
      </ol>
  </body>
</html>

Quero que a trilha de navegação seja mostrada no resultado da pesquisa, e não no URL da página.

Como o Schema.org é a maneira recomendada de usar rich snippets, prefiro usá-lo, no entanto, como a trilha de navegação não aparece na visualização do resultado da pesquisa usando esse método, não estou convencido de que esteja funcionando corretamente.

Estou fazendo algo errado na marcação para o exemplo Schema.org?

— Adam Jenkin
fonte

O Google recomenda usar o formato de microdados em detrimento de outros. Migalhas de pão suportam microdados e RDFa support.google.com/webmasters/bin/… eu usaria o formato recomendado para que ele apareça nos resultados de pesquisa.

— Anagio

Relacionado: Schema.org ou Data-Vocabulary.org para migalhas de pão?

— Unor

3

Com esta implementação:

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
      <a href="http://www.example.com/dresses" itemprop="url">
    <span itemprop="title">Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/dresses/real" itemprop="url">
    <span itemprop="title">Real Dresses</span>
  </a> &gt;
</div>  
<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
  <a href="http://www.example.com/clothes/dresses/real/green" itemprop="url">
    <span itemprop="title">Real Green Dresses</span>
  </a>
</div>

Você terá a seguinte trilha de navegação no Google:

Dresses > Real Dresses > Real Green Dresses

— Ranaivo
fonte

11

Eu marcaria +1 com a referência de Barenaked Ladies, mas, infelizmente, acho que estaria abusando do sistema de votação :-) Então, marcará você com +1 por uma solução realmente funcional.

— Paul d'Aoust 28/02

1

Parece-me que o problema está na própria documentação do schema.org. Aqui estão alguns links educativos:

Eu os classifiquei como os mais úteis primeiro, essencialmente todos eles se vinculam eventualmente. A ação é válida no final deste mês, mas parece que o resultado será o mesmo do seu segundo exemplo.

É uma pena, porque o html acaba sendo mais complicado do que realmente precisa ser, mas lá estamos nós.

Espero que ajude!

— Stuart Burrows
fonte

1

Eu tenho feito algumas pesquisas sobre isso recentemente.

Como se vê, o que o Google recomenda para a trilha de navegação não funciona. Quando olhei algumas semanas atrás, seu próprio exemplo falhou na Rich Snippet Tool do Google. Parece que o Google está atrasado um pouco, mas ainda à frente dos outros.

Data-vocabulary.org é o padrão aceito e de fato, embora se diga que o Schema.org o substituiu por Data-vocabulary.org como depreciado. No entanto, a realidade não corresponde à retórica. A intenção era que o Schema.org substituísse o Data-vocabulary.org e pode ser que isso aconteça. Ainda assim, encontrei um trecho (trocadilho intencional) em algum lugar que mencionava que o Google ainda não havia modificado o código para reconhecer o Schema.org.

Dito isso, este é o exemplo que eu acho que funciona no Google e no Bing, embora o Bing tenha mudado um pouco ultimamente, portanto, tenha cuidado se o Bing for importante para você.

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/"><span itemprop="title">Home</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/marvel/"><span itemprop="title">Marvel Comics</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/"><span itemprop="title">Fantastic Four</span></a> &gt; </span>
<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a itemprop="url" href="http://www.example.com/fantastic-four/58/"><span itemprop="title">Fantastic Four #48: The Coming of Galactus</span></a></span>

Espero que isto ajude.

— closetnoc
fonte

1

(Deixando de lado o suporte ao consumidor.)

O vocabulário Schema.org oferece duas maneiras de fornecer trilhas de navegação para a WebPage(e seus subtipos):

breadcrumbpropriedade com um valor de texto
breadcrumbpropriedade com um BreadcrumbListvalor

O uso de texto é fácil, mas não estruturado (mais difícil de analisar para os consumidores).
O uso BreadcrumbListé mais complexo, mas permite especificar qualquer coisa necessária explicitamente (mais fácil de analisar para os consumidores).

Tomando seu exemplo, usar BreadcrumbListpoderia ser assim:

<body itemscope itemtype="http://schema.org/WebPage">     
  <strong>You are here: </strong>
  <div itemprop="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList">

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="1" />
      <a itemprop="item" href="/">
        <span itemprop="name">Home</span>
      </a>
    </span> 

    &gt;

    <span itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
      <meta itemprop="position" content="2" />
      <a itemprop="item" href="/Test-Pages/">
        <span itemprop="name">Test Pages</span>
      </a>
    </span>

  </div>
</body>

(Pode ser necessário mover elementos se houver espaço em branco.)

— unor
fonte