xhtml - パンくずリストに schema.org マークアップを実装するには?

Question

schema.org マークアップを使用したブレッドクラムの実装に関する情報はあまりありません。これまでのところ、2 つの公式文書を入手できました。1 つは次のことを示しています。

<div itemscope itemtype="http://schema.org/Property" itemid="http://schema.org/breadcrumb">
   <link itemprop="domain" href="http://schema.org/WebPage"/>
   <link itemprop="range" href="http://schema.org/Text"/>
</div>

そして、これを示す別のもの：

<body itemscope itemtype="http://schema.org/WebPage">
  <div itemprop="breadcrumb">
    <a href="category/books.html">Books</a> >
    <a href="category/books-literature.html">Literature & Fiction</a> >
    <a href="category/books-classics">Classics</a>
  </div>
</body>

2 つのマークアップはまったく異なります。それらはあなたにとって意味がありますか？もしそうなら、次のプレーンなパンくずコードをそのマークアップで囲むにはどうすればよいですか? - 正しい方法ですか?

<body>
  <span id="breadcrumbs">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

ありがとう！

score 24 · Accepted Answer

schema.org は、 schema.org v1.92 アップデート(2014 年 12 月 11 日リリース)で、ついに新しいブレッドクラムマークアップシステムをリリースしました。ItemList新しいブレッドクラムシステムは、という名前の拡張ですBreadcrumbList。それぞれBreadcrumbListに複数のListItem要素が含まれています。これにより、ページごとに複数のブレッドクラムトレイルが可能になり、個々のリンクが個別のとして分離されListItem、ブレッドクラム全体のラッパーが提供されます。これは、ほぼすべてのユースケースを満たすはずです。

schema.org の Microdata の例を次に示します。

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses">
    <span itemprop="name">Dresses</span></a>
    <meta itemprop="position" content="1" />
  </li>
› <li itemprop="itemListElement" itemscope
      itemtype="http://schema.org/ListItem">
    <a itemprop="item" href="https://example.com/dresses/real">
    <span itemprop="name">Real Dresses</span></a>
    <meta itemprop="position" content="2" />
  </li>
</ol>

最近再設計された Google の構造化データテストツールは、このマークアップを適切に解析します。ただし、ツールの再設計により検索プレビューが削除されたため、Google 検索結果でこのマークアップを使用してパンくずリストをどのように表示するか (または Google がこのデータを使用するかどうか) を言うのは困難です. linter.structured-data.orgもこの新しいマークアップを正しく解析していますが、そこで述べられているように、「このプレビューは、検索エンジンが表示する可能性のあるものの例としてのみ表示されています。決定するのは、各検索エンジンプロバイダーの裁量です。あなたのページが拡張検索結果として表示されるか、検索結果ページに表示されないか。」

最近、 Google ウェブマスターツールに、構造化データがどの程度インデックスに登録されているかを追跡する機能が追加されました。検索結果でどの構造化データが使用されているかは表示されませんが、どのページでどのデータがインデックス化されているかが表示され、構造化データのエラーも表示されます。

score 16 · Accepted Answer

最初のドキュメントは定義なので、気にしないでください。ブレッドクラムは WebPages のテキストプロパティであると言っているだけです。

http://schema.org/WebPageの例は、使用して理解したいものです。ブレッドクラムスニペットを、「書籍 > 文学とフィクション > クラシック」という単一のテキストフィールドに設定します。

次のようにします。

<body itemscope itemtype="http://schema.org/WebPage">
  <span id="breadcrumbs" itemprop="breadcrumb">
      <a rel="home" href="http://example.com">
          <span>Noob Archive</span>
      </a> » 
      <span>
          <a href="http://example.com/topic/html/">
              <span>HTML</span>
          </a> » 
          <strong>Best Practices: Markup for Setting up Breadcrumbs on Web Pages</strong>
      </span>
  </span>
</body>

結果は「Noob Archive » HTML » Best Practices: Markup for Setup Breadcrumbs on Web Pages」になります。

http://linter.structured-data.org/を使用してアイテムのプロパティがどのように解析されるかを確認し、http ://diveintohtml5.ep.io/extensibility.html を使用して解析ルールの詳細を確認できます。

score 11 · Accepted Answer

@somoriによる回答は正しくありませんが、それは、microdata / schema.org を使用してブレッドクラムを正しくマークアップするためのドキュメントが広く間違っているためです。

各ブレッドクラムは itemprop プロパティで宣言する必要があります。それらを含む div または span で itemprop="breadcrumb" でラップしてitemprop="child"、ネストされた div で使用することはできません。

詳細はこちら:

http://lists.w3.org/Archives/Public/public-vocabs/2012Jan/0016.html

ブレッドクラムをSERPに表示するには、次のようにします。

<div class="breadcrumb" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">

  <span class="breadcrumb-lead">YOU ARE HERE:</span><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Homepage</span></a>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category One</span></a></div>

  <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb" style="display: inline;"><a title="Go to %title%." href="%link%" class="%type%" itemprop="url"><span itemprop="title">Category Two</span></a></div>

</div>

次に、Google 構造化データテストツールでテストします。

http://www.google.com/webmasters/tools/richsnippets

score 7 · Accepted Answer

Google ウェブマスターセントラルヘルプフォーラムによると、当面は schema.org のパンくずマークアップを使用することは専門家によって推奨されておらず、「schema.org のパンくずリストの構造に何らかの不具合がある」ようです。代わりに、data-vocabulary.org のブレッドクラムマークアップを使用することをお勧めします。これは、Google や他の検索エンジンでも簡単に読み取ることができます。

data-vocabulary.org ブレッドクラムマークアップの例:

<div>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/" itemprop="url">
      <span itemprop="title">example</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/" itemprop="url">
      <span itemprop="title">Fashion</span>
    </a> >
  </span>  
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/" itemprop="url">
      <span itemprop="title">Women</span>
    </a> >
  </span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com/fashion/women/boots/" itemprop="url">
      <span itemprop="title">Boots</span>
    </a>
  </span>
</div>

score 4 · Accepted Answer

   itemscope itemtype="...">

xhtmlページでは無効です。

正しい構文は次のとおりです。

   itemscope="itemscope" itemtype="...">

score 2 · Accepted Answer

これは現在、Google の構造化データテストツールで検証されています

<nav role="navigation" class="breadcrumb" itemscope itemtype="http://schema.org/Breadcrumb">
    <ol itemscope itemtype="http://schema.org/BreadcrumbList">
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/"><span itemprop="name">Home</span></a>
        <meta itemprop="position" content="1" />
      </li>
      <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/about-us"><span itemprop="name">About Us</span></a>
        <meta itemprop="position" content="2" />
      </li>
    </ol>
</nav>

score 0 · Accepted Answer

ブレッドクラムスキーマを配置すると、検索からのサイトページのクリック率 (CTR) に大きな影響を与える可能性があります。

以下は、ページにブレッドクラムリストスキーマを実装する方法の例です。

1. HTML経由

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

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/services/"><span itemprop="name">Services</span></a>
        <meta itemprop="position" content="2" />
    </li>

    <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="https://organicdigital.co/services/structured-data.php"><span
                itemprop="name">Structured Data</span></a>
        <meta itemprop="position" content="3" />
    </li>
</ul>

2. JSON-LD 経由

また、実装されたスキーマにエラーがなく、Google 構造化データテストツールで正しいことを確認することもできます。

例: https://search.google.com/structured-data/testing-tool?utm_campaign=devsite&utm_medium=jsonld&utm_source=breadcrumb

<html>
<head>
<title>The title of the page</title>
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "Books",
    "item": "https://example.com/books"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "Authors",
    "item": "https://example.com/books/authors"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "Ann Leckie",
    "item": "https://example.com/books/authors/annleckie"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "Ancillary Justice",
    "item": "https://example.com/books/authors/ancillaryjustice"
  }]
}
</script>
</head>
<body>
</body>
</html>

xhtml - パンくずリストに schema.org マークアップを実装するには?

9 に答える 9

Related

Reference