Breadcrumb usando i rich snippet di Schema.org

9

Sto riscontrando problemi nell'implementazione dei rich snippet breadcrumb da schema.org. Quando costruisco il mio breadcrumb utilizzando la documentazione ed eseguo tramite lo strumento di test del rich snippet di Google , il breadcrumb viene identificato ma non mostrato nell'anteprima.

<!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 cambio a utilizzare i frammenti di data-vocabulary.org, i rich snippet vengono visualizzati correttamente nell'anteprima.

<!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>

Voglio che il breadcrumb sia mostrato nel risultato della ricerca piuttosto che nell'URL della pagina.

Dato che Schema.org è il modo consigliato di utilizzare rich snippet, preferirei utilizzarlo, tuttavia poiché il breadcrumb non viene visualizzato nell'anteprima dei risultati della ricerca utilizzando questo metodo, non sono convinto che funzioni correttamente.

Sto facendo qualcosa di sbagliato nel markup per l'esempio di Schema.org?

— Adam Jenkin
fonte

Google consiglia di utilizzare il formato di microdati rispetto ad altri. Pangrattato supportano microdati e RDFa support.google.com/webmasters/bin/… Vorrei utilizzare il loro formato consigliato se si desidera che venga visualizzato nei risultati di ricerca.

— Anagio

Correlati: Schema.org o Data-Vocabulary.org per il pangrattato?

— unor

3

Con questa implementazione:

<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>

Avrai il seguente pangrattato in Google:

Dresses > Real Dresses > Real Green Dresses

— Ranaivo
fonte

1

Vorrei fare +1 per il tuo riferimento a Barenaked Ladies, ma purtroppo penso che abuserei del sistema di voto :-) Quindi invece ti farò +1 per una soluzione effettivamente funzionante.

— Paul d'Aoust,

1

Mi sembra che il problema riguardi la stessa documentazione di schema.org. Ecco alcuni link educativi:

Ho classificato quelli come più utili per primi, essenzialmente alla fine tutti si collegano tra loro. L'azione su questo è prevista per la fine di questo mese, ma sembra che il risultato sarà lo stesso del secondo esempio.

È un peccato perché l'html finisce per essere più complicato di quanto non debba essere, ma ci siamo.

Spero che aiuti!

— Stuart Burrows
fonte

1

Ho fatto alcune ricerche su questo recentemente.

A quanto pare, ciò che Google consiglia per il pangrattato non funziona. Quando ho guardato un paio di settimane fa, il loro esempio non è riuscito nello strumento Rich Snippet di Google. Sembra che Google sia un po 'indietro ma ancora davanti agli altri.

Data-vocabulary.org è lo standard accettato e di fatto anche se si dice che Schema.org lo abbia sostituito con Data-vocabulary.org come deprezzato. Tuttavia, la realtà non corrisponde alla retorica. L'intento era che Schema.org avrebbe sostituito Data-vocabulary.org e potrebbe accadere. Tuttavia, ho trovato un frammento (gioco di parole) da qualche parte che menzionava che Google non ha ancora modificato il proprio codice per riconoscere Schema.org.

Detto questo, questo è l'esempio che ho trovato che funziona su Google e Bing, anche se Bing ha cambiato le cose un po 'di recente, quindi fai attenzione se Bing è importante per te.

<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>

Spero che sia di aiuto.

— closetnoc
fonte

1

(Lasciando da parte il supporto del consumatore.)

Il vocabolario Schema.org offre due modi per fornire il pangrattato per un WebPage(e i suoi sottotipi):

breadcrumbproprietà con un valore di testo
breadcrumbproprietà con un BreadcrumbListvalore

L'uso del testo è semplice, ma non strutturato (più difficile da analizzare per i consumatori).
L'uso BreadcrumbListè più complesso, ma consente di specificare esplicitamente tutto ciò che è necessario (più facile da analizzare per i consumatori).

Prendendo il tuo esempio, l'utilizzo BreadcrumbListpotrebbe apparire così:

<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>

(Potrebbe essere necessario spostare elementi se lo spazio bianco è un problema.)

— unor
fonte