web-dev-qa-db-ja.com

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

Schema.orgのブレッドクラムリッチスニペットの実装に問題があります。 documentation を使用してブレッドクラムを作成し、 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の例のマークアップで何か間違ったことをしていますか？

microdatarich-snippetsbreadcrumbsgoogle-rich-snippets-toolschema.org
9
Adam Jenkin

この実装では：

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

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

結局のところ、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
closetnoc

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

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

HTMLが実際に必要なものよりも複雑になるため、残念です。

お役に立てば幸いです！

1
Stuart Burrows

（消費者サポートはさておき）

語彙Schema.orgは、 WebPage （およびそのサブタイプ）にブレッドクラムを提供する2つの方法を提供します。

テキストの使用は簡単ですが、構造化されていません（消費者にとって解析が困難です）。
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>

（空白が懸念される場合は、要素を移動する必要があります。）

1
unor