ウェブ屋の備忘録

日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。

サーチコンソールの「構造化データ」を作成する ~通販サイトなどの商品ページ編~

構造化データを作成する〜通販サイトなどの商品ページ編〜

通販サイトの商品ページで構造化データを作ってみたいと思います。

構造化データとは何か

正直なところ、よく理解できていません。
Google検索エンジンに対して、「これが商品名です」「これが商品の画像です」「これが値段です」ということをお知らせするためのデータのようですはあるのですが。

検索結果に、画像のサムネイルや「価格:¥○○○○」というような表示がされるようになるのかな、と思っていたのですがそうでもないようです。

ただまあ、「これが商品名です」「これが商品の画像です」「これが値段です」という内容をGoogleに理解してもらうのには一役買ってくれているのではないか、と踏んでいます。

構造化データをつくる

Google Search Consoleの「構造化データ マークアップ支援ツール」を使います。

ページ上の要素をクリックして「これが商品名」「これが画像」と指示していき、サンプルのHTMLデータを作ります。

そしてそれをテンプレートを反映することで構造化データをつくります。

以下、手順です。

1. 構造化データ マークアップ支援ツールを開く

構造化データ マークアップ支援ツール

https://www.google.com/webmasters/markup-helper/u/0/より、構造化データ マークアップ支援ツールにアクセスします。
Google Search Consoleのアカウントでのログインが必要です。

2. データタイプの選択とURLの設定

「構造化データ マークアップ支援ツール」にアクセスできたら、データタイプを選びます。

データタイプは、

  • イベント
  • ソフトウェア アプリケーション
  • テレビ番組のエピソード
  • テレビ番組のエピソード(レーティングあり)
  • レストラン
  • 商品
  • 地域のお店やサービス
  • 映画
  • 書評
  • 記事

から選択できますが、今回は通販サイトの商品ページの構造化データをつくっていきますので「商品」を選択します。

構造化データ マークアップ支援ツール手順1

そして、商品ページのURLを貼り付けて、「タグ付けを開始」をクリック。

3. ページ上の要素をクリックし、タグ付け

構造化データ マークアップ支援ツール手順2

左側にページの見た目、左側にタグが表示されます。
ページの要素を選択して、タグ付けをしていきます。

f:構造化データ マークアップ支援ツール手順3

まずは商品名をドラッグで選択、するとポップアップで「名前」「画像」「説明」etcといったタグ名が表示されます。
これは商品名なので「名前」を選択します。

構造化データ マークアップ支援ツール手順4

つぎにメインの商品画像をクリック、タグは「画像」を選択。

商品説明文を「説明」とし、価格を選択を「販売情報」>「料金」としました。

その他タグ付けできる要素がページ上にあれば、やっておくと良いと思います。

4. HTMLを作成

構造化データ マークアップ支援ツール手順5

タグ付けが完了したら、「HTMLを作成」ボタンをクリックします。

構造化データ マークアップ支援ツール手順6

今回はHTMLでタグを指定していくので「JSON-LD」となっているところを、「microdata」に変更。

構造化データ マークアップ支援ツール手順7

すると、構造化データを作成するために追加された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件という感じで、だんだんと認識されていくようでした。


「豚の角煮」で検索をすると、こんな感じの検索結果。

「豚の角煮」Google検索結果

構造化データをつくることで、こんな風に商品のサムネイルが表示されることを期待していたのですが、そうはならないようです。


また次回は、ブログやウェブマガジンなどの「記事」の場合の構造化データのつくり方を書く予定です。

 

できる100の新法則 Google Search Console これからのSEOを変える 基本と実践 できる100の新法則シリーズ

できる100の新法則 Google Search Console これからのSEOを変える 基本と実践 できる100の新法則シリーズ