構造化マークアップ|商品・店舗ページで構造化マークアップする手順とメリット

f:id:ami-no-me:20191214191338j:plain

構造化マークアップとは、ウェブページの構造やコンテンツ内容をGoogleクローラーにより分かりやすく伝えるためにHTMLにマークアップする専用のコードのことです。

ウェブページの構造やコンテンツ内容は通常Googleクローラーが自然に取得してくれますが、構造化マークアップを行うことによりGoogle検索結果に運営者の意図する情報を正しく表示させることができます。

上位表示対策としては明確な相関はありませんが、Google検索結果に表示される情報が増えることで、クリック率の向上やGoogle商品検索やGoogleマイビジネス、Googleマップへの掲載も期待できますので、流入数を増やすために対象ページには必ず実装しておきましょう。

今回は過去運営に関わっていた商品レビュー・クチコミをコンテンツとして持つページを例にして構造化マークアップの手順をご紹介します。

 

構造化マークアップを行う前に

構造化マークアップを行うにあたってはGoogleが提供する構造化データに関するガイドラインを確認しましょう。

ガイドラインの下記載の通り、構造化マークアップによるスパム行為は、そのページやサイトで積み上げてきたものをゼロにしかねません。

 コンテンツのガイドラインに違反しているページやサイトは、ランクが下がったり、Google検索のリッチリザルトの対象外としてマークされたりすることがあり、ユーザーに高品質の検索エクスペリエンスを提供し続けることができなくなる場合があります。

構造化マークアップは、当たり前のことですがウェブページの情報を正しくGoogleに伝えることだけに止めましょう。

 

構造化マークアップで表示される情報

今回はレビュー点数を持つ「単一商品ページ」と、レビュー点数と拠点情報を持つ「店舗ページ」で構造化マークアップを行いました。

単一商品ページの構造化マークアップ後の検索結果表示はこちらです。

f:id:ami-no-me:20200104124536p:plain

単一商品ページ 構造化マークアップ

レビュー点数と件数、商品価格、在庫状況を検索結果に表示できました。

続いて、店舗ページの構造化マークアップ後の検索結果表示はこちらです。

f:id:ami-no-me:20200104124655p:plain

店舗ページ 構造化マークアップ

レビュー点数と件数が検索結果に表示できました。

合わせて、店舗の住所や緯度経度といった情報をマークアップすることで、Googleマイビジネス枠の「ウェブ上のレビュー」にリンクが掲載できました(画像 黄色枠参照)。

検索結果での順位より上位に表示されているのが分かります。

店舗ページをお持ちのサイトで検索結果の4~10位に表示されている場合に限りますが、上位表示の恩恵はあるようです。また通常の検索結果だけでなくGoogleマップ検索への掲載されますので、サイトリンクの掲載場所が増えるのは大きなメリットではないでしょうか。

 

商品ページの構造化マークアップ

単一商品ページの構造化マークアップリッチリザルト検索ギャラリーの「商品」にある「Product」から具体的な実装方法を確認できます。

f:id:ami-no-me:20200104125020p:plain

前述の検索結果への情報表示のために実装した項目は以下の通りです。

必須プロパティ
name 商品名
image 商品写真のURL
推奨プロパティ
offers.price 商品の単品料金
offers.priceCurrency 料金の単位
offers.itemCondition 商品の状態
offers.url 商品ページのURL
offers.availability 商品の在庫状況
description 商品の説明文
aggregateRating.ratingValue 商品の評点
aggregateRating.reviewCount 商品の評価投稿件数

※必須プロパティの項目は必ず記述が必要です。推奨プロパティの項目はこれからのGoogle検索で利用される場合もありますので、ページ内に情報を持っていたら入れておくようにしましょう

 

実際のHTMLの記述方法はこちらです。

<script type="application/ld+json">
{
	"@context" : "https://schema.org/",
	"@type" : "Product",
	"name" : "BRIDGESTONE NEXTRY 155/65R14 75S",
	"image" : "https://img.ima.car-frontier-apis.net/tire/BRIDGESTONE_NEXTRY_naname.jpg",
	"offers" : {
		"@type" : "Offer",
		"price" : 2585,
		"priceCurrency" : "JPY",
		"itemCondition" : "new",
		"url" : "http://tire-hood.com/tire/summer/detail?tirehoodCode=th1000004611",
		"availability" : "InStock"
	},
	"description" : "セダンから軽・コンパクトカーまで豊富なサイズラインアップを揃え、幅広い車種に対応する「ネクストリー」。
これがブリヂストンの低燃費ベーシックタイヤです。",
	"aggregateRating" : {
		"@type" : "AggregateRating",
		"ratingValue" : "4.22",
		"reviewCount" : "206"
	}
}
</script>

記述ができたら構造化データテストツールにて<script type="application/ld+json">~</script>までのコードを貼付け、正常に読み取れているか確認しておきましょう。

推奨項目が入力されていないと「警告」の件数が示されますが、「エラーなし」と表示されていれば無視しても問題ありません。

「price」や「availability」、「ratingValue」をはじめとした日々変化する情報について、動的に値が切り替わるよう配慮しておきましょう。

Googleに"正確な"情報を送るのが構造化マークアップですから、更新漏れで虚偽な情報が掲載されている場合などはペナルティの対象になる可能性もあります。

 

店舗ページの構造化マークアップ

店舗ページの構造化マークアップリッチリザルト検索ギャラリーの「ローカル ビジネス リスティング」から具体的な実装方法を確認できます。

f:id:ami-no-me:20200104132242p:plain

前述の検索結果への情報表示のために実装した項目は以下の通りです。

必須プロパティ
@id 店舗ページのURL
name 店舗名
推奨プロパティ
telephone 店舗の電話番号
address.streetAddress 店舗住所:番地など
address.addressLocality 店舗住所:市区町村
address.addressRegion 店舗住所:都道府県
address.postalCode 店舗の郵便番号
address.addressCountry 店舗がある国
geo.latitude 店舗住所:緯度
geo.longitude 店舗住所:経度
aggregateRating.ratingValue 店舗の評点
aggregateRating.reviewCount 店舗の評価投稿件数

実際のHTMLの記述方法はこちらです。

<script type="application/ld+json">
{
	"@context" : "http://schema.org",
	"@type" : "LocalBusiness",
	"@id" : "http://tire-hood.com/store/shopDetail?storeId=128",
	"name" : "早稲田SS / エム・シー・オイル(株)",
	"image" : "https://d3rr6qn2571boz.cloudfront.net/images/rally/1303000492-1426845320.jpg",
	"telephone" : "0332021069",
	"address" : {
		"@type" : "PostalAddress",
		"streetAddress" : "",
		"addressLocality" : "",
		"addressRegion" : "東京都",
		"postalCode" : "162-0051",
		"addressCountry" : "JPY"
	},
	"geo":{
		"@type":"GeoCoordinates",
		"latitude" : 35.706830976816,
		"longitude" : 139.7164312005
	},
	"aggregateRating" : {
		"@type" : "AggregateRating",
		"ratingValue" : "4.73",
		"ratingCount" : "11"
	}
}
</script>

前項同様ですが、記述ができたら構造化データテストツールで<script type="application/ld+json">~</script>までのコードを貼付け、正常に読み取れているか確認しておきましょう。
また「ratingValue」をはじめとした日々変化する情報について、動的に値が切り替わるよう配慮しておきましょう。

余談ですが本ページでは「streetAddress」と「addressLocality」を空白にしています。本来はマークアップすべきなのですが、サイト上でのデータの持ち方の問題で分割ができず断念しました。ただし、Googleマイビジネス枠には表示されていることからGoogleは「telephone」や「geo」など複数の情報を参照して店舗情報の突合を行っているように思います。

推奨項目でもデータ上どうしてもマークアップできない項目については、正確な情報をGoogleに送ることを優先し、無理なデータでのマークアップしないことをおすすめします。

 

まとめ

ウェブページの構造やコンテンツ内容は通常Googleクローラーが自然に取得してくれますが、構造化マークアップを行うことによりGoogle検索結果に運営者の意図する情報を正しく表示させることができます。

特に今回紹介した商品レビュー・クチコミをコンテンツとして持つページについては、Google検索結果に"目につく"情報を表示することができますので、流入数増加のため必ず実装しておきましょう。

SEO対策においては上位表示が重要視されがちですが、流入数を増やすという意味では、検索結果条でクリック率を増やすことや掲載される場所を増やすことも同じぐらい大切です。実装から結果が出るまでに時間がかかるのがSEO対策ですから、実装できるものは早めに実装しておきましょう。

 

検索順位が、見える。検索順位チェックツールGRC