テストを実行したところ、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>
<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>
それは私の終わりにすべてよく見えますか?助言がありますか?
あなたのコードはインライン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秒後。
コードに入る前に、ブレッドクラムをマークアップする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>
<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の状況は、テストを行う必要がある状況です。