どの構造化データをWebサイトのどこに入れるのがいい? 5つの設計手順で大規模サイトでもOK!
グーグルの検索結果ページでリッチスニペットとして表示されればCTRが上がりトラフィックが増えるだろう。ではサイトに構造化データを付けていこう! でも、どんな構造化データをどのページにマークアップすればいいんだ?
そんなあなたに、5つのステップで進める全体設計のやり方を紹介する。
ウェブサイトに何千、何万もページがある大手クライアントと仕事をしていると、必要なマークアップを追加するのは大仕事だ。今回のホワイトボード・フライデーは、Distilledのサージ・ステフォグロ氏を迎えて、JSON-LDの推奨案を系統立ててシンプルに作成するための枠組みを紹介してもらった。
Mozファンのみなさんこんにちは。ホワイトボード・フライデーにようこそ。僕はサージ。Distilledのコンサルタントだ。今回はこれから10分弱、サイトにJSON-LDでどんな構造化データを入れるのがいいかの設計を作成する際の手順について話をしたい。
最初に言っておくが、われわれDistilledのクライアントは、ウェブサイトのページ数が数千~数万もあるような大手が多い。なので、ローカルビジネスやあまり大きくないサイトに関して仕事をしている人には、もしかするとこれから紹介する手順はちょっと過剰かもしれない。とはいえ、役に立つ部分もあるとは思う。
いま述べたように、Distilledはサイトのページ数が何百~何千とあるクライアントが多い。やってきた担当者に「うちのサイトはまったくマークアップされていない。すべてのページについてJSON-LDの推奨案を作成してもらえないだろうか」みたいに頼まれたらと、想像してほしい。
僕のような立場の人なら、少し震え上がってもおかしくないだろう。大変な案件だと。いわば空回りが始まり、多くの場合、生産性が多少は落ちることになる。なのでこれから紹介する手順が、空回りを抜け出して仕切り直す参考になることを願っている。
ステップ1:サイト内のテンプレート(ページ種別)をリストアップする
ステップ1は、要するにサイトのテンプレート(ページ種別)のリストアップだ。
Eコマースサイトのようなサイトを扱うとしよう。リストアップすることによって、問題を分解して俯瞰的にとらえられるようになる。
サイト全体の全ページに構造化データを付けなきゃ
となると大変だが、小さく分解していけば、
OK。サイト全体で進めるには、1セクションずつ取り組む必要がある。やらなければならないのは、サイトにどんなセクションがあるかを調べることだ。
となる。そうするほうがわたしはずっと段取りよく対処できし、実際、おおいに役立っている。
ここではサイトの構造をもとにテンプレートをリストアップするわけだ。具体的には、
- 製品画像
- 価格
- URL
- パンくずリスト
- レビュー
などを書き留めることになるだろう。とにかく上から下まで見て、簡潔なメモを作っていく。
初めての人はとにかくページを見ていこう。おすすめしたいのは、schema.orgやお手本となる類似サイトを見て回ってどうなっているのかを理解し、マークアップできると思うものを自分で書き出してメモしていくことだ。
以前にこうした設計をしたりJSON-LDなどを使った構造化データをマークアップしたりした経験があると、たくさんある標準全般に通じるようになるので、だんだんと慣れていく。2回目、3回目、10回目と経験を重ねると、製品ページにどんなマークアップを使い、カテゴリーページだとどんなマークアップになるのか、すぐにわかるようになっていく。
ステップ3:メモをJSON-LD化する
このメモをもとに、どんなJSON-LDデータを入れるかを設計していくのが次のステップだ。この段階でみんな少し不安になりがちなのだが、開発者でなくても少し学べばすぐにわかる作業だ。
この記事では取り組みの全体の流れを解説するのが目的なので、JSON-LDによる構造化データの個別マークアップに冠する具体的なやり方に立ち入ることはしない。もし詳しく知りたい場合は、次のような情報を参考にしてほしい。
- リアルライフのJSON-LD:構造化データの理解と実装
- SEOのための構造化データの初心者向けガイド:実装の方法
- 初心者向けJSON-LDガイド
- SEO担当者向けJSON-LD構造化データの書き方ガイド(超入門)
- 構造化データの仕組みについて
- Eコマースサイトの構造化データのための7つのヒント
とにかく、このステップでは、メモを実際のJSON-LDにしていく。これはかなり単純な作業なので、僕の好きなやり方を紹介しておこう。それは、作業時にブラウザで次のようなページを開いておくというやり方だ。
- 取り組むテンプレートの具体的なページ(そのページ種別の典型的なコンテンツが入っている代表的なページ)
- schema.orgのサイト(スキーマ情報の正式リソースのようなものだ)。
- 似ている競合相手のサイトをいくつか(取り組むのがEコマースのブランドなら幸運だ。よくできた実例がたくさん公開されているので、何をどうやっているか確認できる)
事前につくったメモをもとに、schema.orgや競合相手のサイト、以前に取り組んだサイトなどをよりどころにするのが僕のやり方だ。
たとえば、構造化データ化する対象のメモに「サービス利用価格」と書いてあれば、schema.orgで関係するデータを調べる。該当する構造化データのスキーマが「Offer」タイプだということがわかる。
出来上がったJSON-LDを構造化データ テストツールにコピーして検証することも忘れずに。問題なければ次に進もう。価格から手を付けたのなら、次はパンくずリストなどに移ればいい。
ステップ3を終えると、必要なJSON-LDと、次のステップをはじめるための大切な要素はすべてそろっているはずだ。
ステップ4:担当者/開発者と意見をすり合わせる
ステップ4では、いったん立ち止まり、サイト担当者や開発者といった関係者と意見をすり合わせる。というのも、大規模サイトに取り組んでいて、JSON-LDの作業が必要なテンプレートが10も15もある場合、最初のテンプレートに対する設計をした時点でこんな風に申し出ておくといい:
30分ほど一緒に確認してもらえないだろうか。
サイトに構造化データを含めていくための基本設計を、テンプレート1つぶんだけ完成させたんだ。
これで大丈夫なこと、そちらが満足できるフォーマットになっていることを確認したい。
すべてのテンプレートに対して設計を終えた時点ですり合わせにいって大きくひっくり返されたら、それまでの作業がかなりムダになる。あとあとの問題を避けるためにも、テンプレート1つぶんの設計を終わらせた段階で、すり合わせをしておこう。
フォーマットと言えば、制作会社の立場で個人的にオススメのやり方がある。これはGoogleドライブのようなリモートと共有できるフォルダを使うやり方だ。
案件用のフォルダの中に「JSON-LD」というフォルダを作り、クライアントがこのフォルダにアクセスできるようにする。
ここにテンプレートごとに1つのファイルを作っていく。製品ページのテンプレート用のファイルならば「Product JSON-LD」というドキュメントを作り、スキーマテストツールで検証したJSON-LDをすべてコピーし、このドキュメントにペーストするわけだ。
担当者や開発者と一緒に見ていくのはこのドキュメントだ。Googleドキュメントのような形式で置いておけば、コメントやフィードバックも受け付けやすい。
フィードバックはほぼすべて受け入れよう。フォーマットの変更を希望されたら、修正して再度話し合う。原則として、ゴーサインが出るまでほかのテンプレートには手を着けないようにする。
ステップ5:すべてのテンプレートについてステップ2~4を繰り返す
いよいよ本当に次のステップだ。ゴーサインが出て開発者も担当者も満足したら、同じことの繰り返しになる。ステップ2に戻り、別のテンプレートを選択する。
製品ページが終わったら、カテゴリーページのテンプレートについて同じことをやる。マークアップできるものを書き出す。競合相手のサイトや類似サイト、schema.org、構造化データの検証ツールを使ってJSON-LDにする。手順は同じだ。
ここまでくると作業はスムーズに進む。繰り返しになるが、本来ならかなりのストレスになるかもしれない作業(少なくとも僕はそうだ)なので、こういうやり方はすばらしい。作業を適切に小さく切り分ければ、1つひとつの作業に集中できる。
繰り返しになるが、このやり方は僕にとって非常にうまくいった。問題が大きい場合はこうした枠組みや取り組み方を考え、問題を分解してシンプルにすることがDistilledでは好まれる。そうすることでいちばん力を出せることがわかっているからだ。今回はそういったやり方の1つを紹介したにすぎない。
今回はここまで。見てくれてありがとう。質問やコメントがある人や、JSON-LDの実装やアドバイスの経験がある人がいれば、話を聞いてみたい。Twitterでもコメント欄でもいいので声をかけてほしい。見てくれて本当にありがとう。ではまた。
ソーシャルもやってます!