日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。この広告は、90日以上更新していないブログに表示しています。サーチコンソール通販サイトの商品ページで構造化データを作ってみたいと思います。構造化データとは何か正直なところ、よく理解できていません。Googleの検索エンジンに対して、「これが商品名です」「これが商品の画像です」「これが値段です」ということをお知らせするためのデータのようですはあるのですが。検索結果に、画像のサムネイルや「価格:¥○○○○」というような表示がされるようになるのかな、と思っていたのですがそうでもないようです。「これが商品名です」「これが商品の画像です」「これが値段です」という内容をGoogleに理解してもらうのには一役買ってくれているのではないか、と踏んでいます。マークアップ支援ツール」を使います。ページ上の要素をクリックして「これが商品名」「これが画像」と指示していき、サンプルのHTMLデータを作ります。それをテンプレートを反映することで構造化データをつくります。マークアップ支援ツールにアクセスします。Consoleのアカウントでのログインが必要です。マークアップ支援ツール」にアクセスできたら、データタイプを選びます。記事から選択できますが、今回は通販サイトの商品ページの構造化データをつくっていきますので「商品」を選択します。商品ページのURLを貼り付けて、「タグ付けを開始」をクリック。ページ上の要素をクリックし、タグ付け左側にページの見た目、左側にタグが表示されます。ページの要素を選択して、タグ付けをしていきます。etcといったタグ名が表示されます。これは商品名なので「名前」を選択します。つぎにメインの商品画像をクリック、タグは「画像」を選択。商品説明文を「説明」とし、価格を選択を「販売情報」>「料金」としました。その他タグ付けできる要素がページ上にあれば、やっておくと良いと思います。HTMLを作成タグ付けが完了したら、「HTMLを作成」ボタンをクリックします。今回はHTMLでタグを指定していくので「JSON-LD」となっているところを、「microdata」に変更。すると、構造化データを作成するために追加されたHTMLタグのところがハイライトされます。ハイライトされた箇所を商品ページのテンプレートに反映していきます。(商品ページのテンプレートへの反映方法は割愛させていただきます!すみません)構造化データのチェック作成した構造化データをチェックするツールもあります。https://search.google.com/structured-data/testing-tool/u/0/チェックしたいページのURLを入力し、「テストを実行」をクリック。左側にhtml、右側にチェック結果が表示されます。私の場合「price」の項目にエラーが出ていました。「price」の項目には数字しか入れられないようなのです。タグ付けをした際「円(税抜)」という文字が入ってしまい、それがエラーになっていたようでした。3桁区切りのカンマとかも入れられないようです。shopでは値段を数字のみ出力することができないようだったので、構造化データの「price」の設定は削除しました。一度チェックツールにかけると、エラーは消えていました。マークアップ支援ツール」でのタグ付けの際、「price」は必須の項目でしたが、削除してもエラーにはならないようです。構造化データが、およそ5日くらいでGoogleへ認識されるかと思います。サーチコンソールにて確認します。「構造化データ」と進みます。認識されたページ数とエラーが表示されますが、チェックツールでエラーが出ていなければエラーはないと思います。300以上の商品があるサイトでしたが、5日後に約100件、その2日後にさらに50件という感じで、だんだんと認識されていくようでした。「豚の角煮」で検索をすると、こんな感じの検索結果。構造化データをつくることで、こんな風に商品のサムネイルが表示されることを期待していたのですが、そうはならないようです。次回は、ブログやウェブマガジンなどの「記事」の場合の構造化データのつくり方を書く予定です。~通販サイトなどの商品ページ編~Tweet広告を非表示にする関連記事2018-05-25入り口になっているページを調査・改善GoogleAnalyticsで、サイトの入り口になっているページを調査。...2018-05-24サーチコンソールでHTML改善サーチコンソールでHTMLの改善点を確認し、修正をします。一緒にWeb制作をしている仲間から、便利なツールを募りました。...2013-03-13Dreamweaverのデザインビューはかしこい。コーディング中は軽く吐き気を催すTです。»プロフィールid:webbibouroku日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。縦に長い画像を分割して印刷する方法(Windows)Web制作に便利なサービスやツール12選Gmailのバックアップが2GBごとに分割されない月別アーカイブ参加グループデザイン@bibouroku1986さんのツイートはてなブログをはじめよう!webbibourokuさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。