サーチコンソールの「構造化データ」を作成する ~通販サイトなどの商品ページ編~
通販サイトの商品ページで構造化データを作ってみたいと思います。
構造化データとは何か
正直なところ、よく理解できていません。
Googleの検索エンジンに対して、「これが商品名です」「これが商品の画像です」「これが値段です」ということをお知らせするためのデータのようですはあるのですが。
検索結果に、画像のサムネイルや「価格:¥○○○○」というような表示がされるようになるのかな、と思っていたのですがそうでもないようです。
ただまあ、「これが商品名です」「これが商品の画像です」「これが値段です」という内容をGoogleに理解してもらうのには一役買ってくれているのではないか、と踏んでいます。
構造化データをつくる
Google Search Consoleの「構造化データ マークアップ支援ツール」を使います。
ページ上の要素をクリックして「これが商品名」「これが画像」と指示していき、サンプルのHTMLデータを作ります。
そしてそれをテンプレートを反映することで構造化データをつくります。
以下、手順です。
1. 構造化データ マークアップ支援ツールを開く
https://www.google.com/webmasters/markup-helper/u/0/より、構造化データ マークアップ支援ツールにアクセスします。
※ Google Search Consoleのアカウントでのログインが必要です。
2. データタイプの選択とURLの設定
「構造化データ マークアップ支援ツール」にアクセスできたら、データタイプを選びます。
データタイプは、
- イベント
- ソフトウェア アプリケーション
- テレビ番組のエピソード
- テレビ番組のエピソード(レーティングあり)
- レストラン
- 商品
- 地域のお店やサービス
- 映画
- 書評
- 記事
から選択できますが、今回は通販サイトの商品ページの構造化データをつくっていきますので「商品」を選択します。
そして、商品ページのURLを貼り付けて、「タグ付けを開始」をクリック。
3. ページ上の要素をクリックし、タグ付け
左側にページの見た目、左側にタグが表示されます。
ページの要素を選択して、タグ付けをしていきます。
まずは商品名をドラッグで選択、するとポップアップで「名前」「画像」「説明」etcといったタグ名が表示されます。
これは商品名なので「名前」を選択します。
つぎにメインの商品画像をクリック、タグは「画像」を選択。
商品説明文を「説明」とし、価格を選択を「販売情報」>「料金」としました。
その他タグ付けできる要素がページ上にあれば、やっておくと良いと思います。
4. HTMLを作成
タグ付けが完了したら、「HTMLを作成」ボタンをクリックします。
今回はHTMLでタグを指定していくので「JSON-LD」となっているところを、「microdata」に変更。
すると、構造化データを作成するために追加されたHTMLタグのところがハイライトされます。
ハイライトされた箇所を商品ページのテンプレートに反映していきます。
(商品ページのテンプレートへの反映方法は割愛させていただきます!すみません)
構造化データのチェック
作成した構造化データをチェックするツールもあります。
https://search.google.com/structured-data/testing-tool/u/0/
チェックしたいページのURLを入力し、「テストを実行」をクリック。
左側にhtml、右側にチェック結果が表示されます。
私の場合「price」の項目にエラーが出ていました。
どうやら、「price」の項目には数字しか入れられないようなのです。
タグ付けをした際「円(税抜)」という文字が入ってしまい、それがエラーになっていたようでした。
3桁区切りのカンマとかも入れられないようです。
Color me shopを利用した通販サイトだったのですが、Coloe me shopでは値段を数字のみ出力することができないようだったので、構造化データの「price」の設定は削除しました。
もう一度チェックツールにかけると、エラーは消えていました。
「構造化データ マークアップ支援ツール」でのタグ付けの際、「price」は必須の項目でしたが、削除してもエラーにはならないようです。
Googleへの反映
構造化データが、およそ5日くらいでGoogleへ認識されるかと思います。
サーチコンソールにて確認します。
「検索での見え方」 > 「構造化データ」
と進みます。
認識されたページ数とエラーが表示されますが、チェックツールでエラーが出ていなければエラーはないと思います。
300以上の商品があるサイトでしたが、5日後に約100件、その2日後にさらに50件という感じで、だんだんと認識されていくようでした。
「豚の角煮」で検索をすると、こんな感じの検索結果。
構造化データをつくることで、こんな風に商品のサムネイルが表示されることを期待していたのですが、そうはならないようです。
また次回は、ブログやウェブマガジンなどの「記事」の場合の構造化データのつくり方を書く予定です。
できる100の新法則 Google Search Console これからのSEOを変える 基本と実践 できる100の新法則シリーズ
- 作者: 村山佑介,井上達也,できるシリーズ編集部
- 出版社/メーカー: インプレス
- 発売日: 2015/09/18
- メディア: Kindle版
- この商品を含むブログを見る