web-dev-qa-db-ja.com

ブレッドクラムのmicrodataマークアップを修正する

Webページのブレッドクラムのmicrodataを実行する方法を調査したところ、いくつかの方法が見つかりましたが、どちらが正しいかわかりません。まず、HTMLの基本的なブレッドクラムは次のようになります。

<div>
  <a href="/">Root page</a>
  <a href="/category">Category page</a>
  <a href="/category/this-page">This page</a>
</div>

さて、私はそれをこのように構成しますか（私が SchemaOrgの例 で見たように：

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/" itemprop="item">
      <span itemprop="name">Root page</span>
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/category" itemprop="item">
      <span itemprop="name">Category page</span>
    </a>
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a href="/category/this-page" itemprop="item">
      <span itemprop="name">This page</span>
    </a>
  </li>
</ol>

または、Stackoverflowの回答で見たように、次のように構成しますか？

<div>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/" itemprop="url">
      <span itemprop="title">Root page</span>
    </a>
  </span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/category" itemprop="url">
      <span itemprop="title">Category page</span>
    </a>
  </span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="/category/this-page" itemprop="url">
      <span itemprop="title">This page</span>
    </a>
  </span>
</div>

または私がまだ知らない別の方法??

htmlseoschema.orgmicrodata
12
Coop

最新（2019）の正しいブレッドクラムMicrodataマークアップは以下のようになります。

また、ベストプラクティスに不満を言う場合は、最後のブレッドクラムアイテムをページ上のリンクとして作成しないでください。代わりに<span>を使用できます。 <a>そのような方法で：

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/" itemid="/">
      <span itemprop="name">Root page</span>
    </a>
    <meta itemprop="position" content="1" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="/category" itemid="/category">
      <span itemprop="name">Category page</span>
    </a>
    <meta itemprop="position" content="2" />
  </li>
  <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
    <span itemscope itemtype="http://schema.org/Thing" itemprop="item" itemid="/category/this-page">
      <span itemprop="name">This page</span>
    </span>
    <meta itemprop="position" content="3" />
  </li>
</ol>

このコードはBreadcrumbListに完全に準拠しており（アイテムのIDが必要であることも参照）、 https://search.google.com/structured-data/testing-tool でGoogleの検証に合格しています。優れた。

4
FlameStorm

私は次のようなことをします：

<div itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="#" itemprop="url"><span itemprop="title">Homepage</span></a>
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url"><span itemprop="title">Child-A</span></a>
    </div>
    <div itemprop="child" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
        <a href="#" itemprop="url"><span itemprop="title">Child-B</span></a>
    </div>
</div>

テスト済み：https://search.google.com/structured-data/testing-tool

enter image description here

4
l2aelba

data-vocabulary.orgが放棄されたため、Schema.orgを使用します。

アイデアが浮かんだとき、いくつかのマークアップがありました。しかしそれ以来、標準はSchema.orgとして登場しました。もちろん、Googleによってサポートされており、その例で示されています（1つは BreadCrumbs です）。

3
Claudiu

「タイトル」ではなく「名前」を使用する必要があります。ドキュメントですべてを読んでください： https://developers.google.com/search/docs/data-types/breadcrumbs

1
Max Barrass

主観的な判断かもしれません。 https://developers.google.com/structured-data/breadcrumbs に示すように、GoogleのMicrodataメソッドを使用します。これはol/liメソッドに従います。

Itemscope、itemptype、itempropについて適切に言及している限り、どの方法を使用するかはそれほど重要ではありません。

1
Moin Shaikh

2つ目はschema.orgの一部ではなく、data-vocabularyとは異なる語彙を使用しているため、機能するかどうかについてコメントすることはできません。 1つ目は、schema.orgを使用したmicrodataです。これは、 googleのパンくずリストの例 で指定されたタイプです。

Schema.orgリンクを含む構造化データのみがschema.orgを使用しますが、必要に応じて、Schema.orgで<div>および<span>を使用できます。構造化データはページの意味を示し、視覚的にどのように表示されるかにほとんど依存しない必要があります。つまり、ブレッドクラムに箇条書きを使用するか<div>sを使用するかは関係ありません。構造化データは、両方とも同じ方法で、同じ意味を持ちます。

1
Mousey
<ol itemscope itemtype="http://schema.org/BreadcrumbList">

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="https://exampe.com/">
<span itemprop="name">Root page</span></a>
<meta itemprop="position" content="1">
</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="https://exampe.com/category">
<span itemprop="name">Category page</span></a>
<meta itemprop="position" content="2">
</li>

<li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
<a itemtype="http://schema.org/Thing" itemprop="item" class="" href="https://exampe.com/category/this-page">
<span itemprop="name">This page</span></a>
<meta itemprop="position" content="3">
</li>

</ol>

フィールド「id」の欠落に関するGoogleSearch ConsoleのFixBreadcrumbsマークアップを修正するために、アンカーからプロパティitemscopeを削除しました。

から

<a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="..">link</a>

に

<a itemtype="http://schema.org/Thing" itemprop="item" href="..">

そしてそれはうまくいった。私はそのエラーが発生した2つのWebサイトでこれをテストして確認しました。

0
Iliyan