web-dev-qa-db-ja.com

構造化データパンくずエラー：タイトルとURLがありません

テストを実行したところ、Googl Structured Data Toolテストのブレッドクラム（2）セクションのすべての製品ページで2つのエラーを受け取りました。

Breadcrumb 2にはタイトルとURLがありません。

エラーをクリックすると、次のコードに移動します

<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">;

生コードは次のように設定されます。

{% if settings.product_breadcrumb %}
      <div class="breadcrumb_text">
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><a href="{{ shop.url }}" title="{{ shop.name | escape }}" itemprop="url"><span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span></a></span> 
        &nbsp;<span class="icon-right-arrow"></span>
        <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          {% if collection %}
            <a href="{{ collection.url }}" title="{{ collection.title | escape }}">{{ collection.title }}</a>
          {% else %}
            <a href="/collections/all" title="{{ collections.all.title }}">{{ collections.all.title }}</a>     
          {% endif %}
        </span>

それは私の終わりにすべてよく見えますか？助言がありますか？

structured-databreadcrumbs
4
Lauren

あなたのコードはインラインmicrodataの正しいネスト構造を作成していません。 Reactまたは類似のJSフレームワークを使用しているようです。 JSON-LDスニペットをデータで埋めてみませんか？それは次のようになります

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "item": {
      "@id": "https://example.com/books",
      "name": "Books",
      "image": "http://example.com/images/icon-book.png"
    }
  },{
    "@type": "ListItem",
    "position": 2,
    "item": {
      "@id": "https://example.com/books/authors",
      "name": "Authors",
      "image": "http://example.com/images/icon-author.png"
    }
  }]
}
</script>

本体の下部に実装することができ、onLoadの後にデータを入力しても、Googleによって完全に認識されますが、遅すぎることはありません-最大。 5秒後。

1
Evgeniy

コードに入る前に、ブレッドクラムをマークアップするdata-vocabulary.orgの方法はおそらく時代遅れになっていると思います。過去には、Googleはパンくずリスト専用にdata-vocabulary.orgを好んでいたようですが、今日、Structured Data Breadcrumbの仕様を見ると、schema.orgやJSON-LDが好きだとわかります。 （詳細： https://developers.google.com/search/docs/data-types/breadcrumbs 。）

考慮すべきもう1つのことは、GoogleのSDTTも混乱していることです。コードでマクロを使用します。これからわか​​るように、それが部分的にエラーを投げています。このツールは優れたツールですが、コードで何か意味があり、正しいことがわかっている場合は、独自のコードを使用する必要があります。

OK、これがあなたのコードです。動作するように変更し、わかりやすくするためにインデントしました。

<div class="breadcrumb_text">
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
    <a href="http://www.example.com" title="{{ shop.name | escape }}" itemprop="url">
      <span itemprop="title">{{ 'general.breadcrumbs.home' | t }}</span>
    </a>
  </span>&nbsp;
  <span class="icon-right-arrow"></span>
  <span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
          {% if collection %}
    <a href="http://www.example.com" title="{{ collection.title | escape }}" itemprop="url">         
      <span itemprop="title">{{ collection.title }}</span>
    </a>
          {% else %}
    <a href="http://www.example.com" title="{{ collections.all.title }}" itemprop="url">
      <span itemprop="title">{{ collections.all.title }}</span>
    </a>     
          {% endif %}
  </span>
</div>

これは私がチェックアウトする唯一の方法です。

ちなみに、エラーをスローしていたため、最初の行{% if settings.product_breadcrumb %}のみを省略しました。そこにあると仮定しましょう。また、完全を期すために、</div>タグを閉じました。

テストツールのエラーにより、<span itemscope itemtype="http://data-vocabulary.org/Breadcrumb">の2つのインスタンスが表示されたのは、これらの行自体ではなく、これで始まる2つのブロックにエラーがあることが識別されたためです。

3つのインスタンスすべてで、URLマクロを実際の（偽/サンプル）URLに置き換えていることに注意してください- http://www.example.com 。これは、これらのエラーを取り除く唯一の方法です。マクロが実際のURLになることを考えると、うまくいけばうまくいくはずです。 （ページをライブに設定したら、コードではなくページのURLをバリデーターで実行して確認してください。）ポイントは、ツール自体が完全なURLのみを認識することです。

条件ステートメントでは、各ハイパーリンクにitemprop="url"がありませんでした。それが追加されると、バリデーターは名前の欠落について不平を言いました。そこで、最初のコードブロックにあるのと同じように、<span>タグにitemprop="title"タグを追加しました。

基本的に、パンくずリストを機能させるには、それぞれに次のものが必要です。

itemscope itemtype="http://data-vocabulary.org/Breadcrumb"
itemprop="url"
itemprop="title"

URLの状況は、テストを行う必要がある状況です。

1
Henry Visotski