gtagset=(1)です

パンくずを新しい構造化データに対応させる方法

  • 作成日:2020-8-19
あなたのブログのパンくずは古くなっていませんか? ここでは、新しい構造化データ、リッチリザルトに対応させる方法を伝授します。
rich_result-01.png photo
 

以前の構造化データは、サポート終了です。早く新しいリッチリザルトに切り替えましょう。

パンくずリストはもうおわかりですね。パンくずリストは各記事の上部にあるナビゲーションで、当サイトを例にとると以下のようなものです。

rich_result-04.png photo

当サイトでも、SEO対策のために結構前からこのパンくずリストをdata-vocabulary.orgを利用した構造化データに対応させていましたが、この古い構造化データはが2020年4月6日でサポート終了してしまいました。以後は、“schema.org”を利用した新しい記述に変えなければなりません。

自分のパンくずリストの対応状況を確認する

自分のパンくずリストの対応状況は、Google Search Console(通称:サチコ)から確認することができます。Google Search Consoleにログインし、左のメニューから拡張>パンくずリストとクリックし、以下のように

data-vocabulary.orgスキーマのサポートは終了します。

という警告が出ていないか確認します。

当サイトの場合は、7月17日あたりから警告が表示されるようになりました。

画像を拡大表示する
rich_result-03.png photo

新しいscheme.org形式に変更しなくても、直接に検索エンジンの掲載順序に影響することはありませんが、検索エンジンにリッチリザルトが表示されなくなり、ユーザビリティーが低下するため、ユーザー離れの原因やせっかく検索エンジンに表示されても他のサイトにいってしまい、少なからず検索結果にも影響を及ぼすことになるでしょう。もしこの記事に目が止まったら、この機会にパンくずを新しくしましょう。

さて、これからどのようにして新しいschema.orgに対応させるかを記述していきます。

構造化データの記述形式は3つ

構造化データの記述形式は、JSON+LD形式microdata形式RDFa形式の3つがあります。googleが推奨しているのは、JSON+LD形式の方になります。microdata形式はRDFa形式は、パンくずのコーディングと構造化データのコーディングは一体化しており、コーディングしやすい。JSON+LD形式は、パンくずのコーディングとは別に構造化データは、scriptで記述するようになります。どちらもコーディング量的にはそんなに違いはありませんが、googleが推奨するJSON+LD形式の方が若干コーディングしにくいかも知れません。

以下にRDFa形式とJSON+LD形式をコーディング例を参考までに掲載しておきます。パンくずのイメージは上記に例示したパンくずで、再度画像を掲載しなおします。

画像を拡大表示する
rich_result-04.png photo

RDFa形式によるコーディング例

<div id="breadcrumb" class="articlepost">
	<ol vocab="https://scheme.org/" typeof="BreadcrumbList">
		<li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="https://blogpot.ok55.net"><span property="name">HOME</span></a><meta property="position" content="1"></li>
		<li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="https://blogpot.ok55.net/category/tips"><span property="name">Tips</span></a><meta property="position" content="2"></li>
		<li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="https://blogpot.ok55.net/category/tips/trables"><span property="name">トラブルシューティング</span></a><meta property="position" content="3"></li>
		<li property="itemListElement" typeof="ListItem"><a property="item" typeof="WebPage" href="https://blogpot.ok55.net/category/tips/trables/wp_troubles"><span property="name">Wordpressの問題</span></a><meta property="position" content="4"></li>
	</ol>
</div>

※ちなみに一番外側のdivは必要ありません。

JSON+LD形式によるコーディング例

<!-- パンくずのコーディング -->
<ul id="breadcrumb" class="articlepost">
	<li><a href="https://blogpot.ok55.net/wp" target="_self">HOME</a></li>
	<li><a href="https://blogpot.ok55.net/category/tips" target="_self">Tips</a></li>
	<li><a href="https://blogpot.ok55.net/category/tips/trables" target="_self">トラブルシューティング</a></li>
	<li><a href="https://blogpot.ok55.net/category/tips/trables/wp_troubles" target="_self">Wordpressの問題</a></li>
</ul>
<!-- 構造化データ -->
<script type="application/ld+json">
{
	"@context": "https://schema.org",
	"@type":"BreadcrumbList",
	"itemListElement":
	[		 
		{
			"@type": "ListItem",
			"position":1,
			"item": {
				"@id":"https://blogpot.ok55.net/wp",
		 		"name":"HOME"
			}
		} ,
		{
			"@type": "ListItem",
			"position":2,
			"item": {
				"@id":"https://blogpot.ok55.net/category/tips",
		 		"name":"Tips"
			}
		} ,
		{
			"@type": "ListItem",
			"position":3,
			"item": {
				"@id":"https://blogpot.ok55.net/category/tips/trables",
		 		"name":"トラブルシューティング"
			}
		} ,
		{
			"@type": "ListItem",
			"position":4,
			"item": {
				"@id":"https://blogpot.ok55.net/category/tips/trables/wp_troubles",
		 		"name":"Wordpressの問題"
			}
		}
	]
}
</script>

JSON-LD形式へ切り替えの詳細を解説

上記に例示したRDFa形式によるコーディングは、特に難しいことはないので解説を省きます。ここではJSON+LD形式によるコーディングのわかりにくいなぁと思ったところを解説します。

全体的な構造は以下のとおり、パンくず用のコーディングA部分と構造化データ用のコーディングBの2つより構成されます。

rich_result-05.png photo

パンくずを表示するコーディングA部

もう既にパンくずを実装していれば、<ol>や<ul>でパンくずをコーディングしていると思いますが、構造化データに対応する場合は、それらのタグに

  • vocab=”https://scheme.org/”
  • typeof=”BreadcrumbList”

などの要素を記述している構造化データに対応していると思います。例えば

<ol vocab=”https://scheme.org/” typeof=”BreadcrumbList”>

さらに、ひとつひとつの要素の<li>にも

<li property=”itemListElement” typeof=”ListItem”>

JSON+LDの場合は、これらの構造化データのためのvocabもtypeofもpropertyも記述しません。必要なのは表示のためのcssまたはクラス定義のみです。

構造化データのためのコーディングB部(重要)

ここで一番重要なのは、上記コーディングA部の直後あたり<script>としてコーディングすることです。

<script type=”application/ld+json”>
(構造化データのコーディング)
</script>

次は、schema.orgの定義で、個々のパンくず要素itemListElementを囲みます。ここは下記に示したようにコーディング(赤字部分)すればOKです。鍵括弧で挟むことも忘れずに

<script type=”application/ld+json”>
{
“@context”: “https://schema.org”,
“@type”:”BreadcrumbList”,
“itemListElement”:
[
(パンくず要素を定義する)
]
}
</script>

itemListElementの定義は、パンくずの要素を数だけこのitemListElementを定義します。itemListElementを定義するには、それぞれのパンくずのタイトルとそのリンクで、positionを連番(赤字部分)で記述するだけです。

{
“@type”: “ListItem”,
“position”:1,
“item”: {
“@id”:”https://blogpot.ok55.net/wp”,
“name”:”HOME”
}
} ,

リッチリザルトテストツールの利用

上記のとおりコーディングが完了したら、リッチリザルトテストツールで確かめることができます。リッチリザルトテストツールは、以前の構造化データツールとは違って見た目をそのままビジュアルに表示することは出来ませんが、エラーが表示されなければOK!です。

このリッチリザルトテストツールを起動するには、以下のボタンをご利用ください。

リッチリザルトテストツール(サイト)
画像を拡大表示する
rich_result-06.png photo

以上、新しい構造化データに対応する方法でした。

スポンサーリンク

googleカスタム検索

ランキング

インデックス

※右側の記事と連動したインデックスです。見たいインデックスをクリックしてください。
ページ上部へ戻る