Schema.orgリッチスニペットを使用したパンくずリスト

9

schema.orgのブレッドクラムリッチスニペットの実装に問題があります。ドキュメントを使用してブレッドクラムを作成し、Googleリッチスニペットテストツールを使用して実行すると、ブレッドクラムは識別されますが、プレビューには表示されません。

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

data-vocabulary.orgのスニペットを使用するように変更すると、リッチスニペットがプレビューに正しく表示されます。

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

ページのURLではなく、ブレッドクラムを検索結果に表示します。

Schema.orgがリッチスニペットの使用に推奨される方法であることを考えると、これを使用する方がよいでしょう。ただし、この方法を使用した検索結果のプレビューにパンくずが表示されないため、これが正しく機能しているとは思いません。

Schema.orgの例のマークアップで何か問題がありますか？

— アダム・ジェンキン
ソース

Googleでは、microdata形式の使用を推奨しています。彼らがmicrodataとRDFaをサポートするブレッドクラムsupport.google.com/webmasters/bin/…検索結果に表示したい場合は、推奨フォーマットを使用します。

— Anagio 2012

関連：ブレッドクラムのSchema.orgまたはData-Vocabulary.org？

— 2015年

3

この実装では：

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

Googleには次のブレッドクラムがあります。

Dresses > Real Dresses > Real Green Dresses

— ラナイボ
ソース

1

私はあなたのBarenaked Ladiesリファレンスを+1しますが、悲しいことに私は投票システムを乱用していると思います:-) SOではなく、実際に機能しているソリューションを+1します。

— Paul d'Aoust 14

1

問題はschema.orgのドキュメント自体にあるようです。ここにいくつかの教育リンクがあります：

私はそれらを最も役立つものとして最初にランク付けしました、本質的にそれらはすべて最終的に相互にリンクします。これに対するアクションは今月末に予定されていますが、結果は2番目の例と同じになるようです。

htmlは実際に必要以上に複雑になるので残念ですが、それでも問題はありません。

お役に立てば幸いです。

— スチュアートバロウズ
ソース

1

私は最近これについていくつかの研究を行っています。

結局のところ、Googleがブレッドクラムに推奨するものは機能しません。数週間前に調べたところ、Googleのリッチスニペットツールでの独自の例は失敗しました。グーグルはやや遅れをとっているようですが、まだ他のものよりは進んでいます。

Data-vocabulary.orgは、認められた事実上の標準ですが、Schema.orgは、価値が下がったため、Data-vocabulary.orgに置き換えたと言われています。ただし、現実はレトリックと一致しません。その意図は、Schema.orgがData-vocabulary.orgを置き換えることであり、それが実現する可能性があります。それでも、GoogleがSchema.orgを認識するようにコードをまだ変更していないことを言及したスニペット（意図的な意図）を見つけました。

そうは言っても、これはGoogleとBingで機能することがわかった例ですが、Bingは最近変更されたものなので、Bingが重要である場合は注意が必要です。

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

お役に立てれば。

— クローゼット
ソース

1

（消費者サポートは別として。）

語彙Schema.orgは、WebPage（およびそのサブタイプ）のパンくずリストを提供する2つの方法を提供します。

breadcrumbテキスト値を持つプロパティ
breadcrumbプロパティとBreadcrumbList値

テキストの使用は簡単ですが、構造化されていません（消費者向けに解析するのは困難です）。
使用BreadcrumbListはより複雑ですが、必要なものを明示的に指定できます（消費者のために解析する方が簡単です）。

あなたの例をとると、使用BreadcrumbListは次のようになります：

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

（空白が問題になる場合は、要素を移動する必要がある場合があります。）

— unor
ソース