• Google構造化データマークアップ支援ツールはmicrodata付きHTMLのひな型を作る

Google構造化データマークアップ支援ツールはmicrodata付きHTMLのひな型を作る

公開日: 執筆:佐藤

Googleの構造化データマークアップ支援ツールは、ページ上の名前、価格、開催日時などをマウスで指定し、microdataを加えたサンプルHTMLを生成するツールです。生成されたHTMLは自動でサイトへ公開されません。元のHTMLやテンプレートへ必要な属性を組み込み、テストしてから公開します。

データハイライターとの違いは、構造化データを置く場所です。マークアップ支援ツールはサイトのHTMLへ追加するコードを作ります。データハイライターはHTMLを変えず、Googleウェブマスターツールの中でGoogleへ項目を伝えます。

最初にページの種類と画面上の情報を確認する

構造化データは、ページに書かれている情報の意味を機械へ伝えるために使います。ページにない価格や評価を、検索結果へ出したいという理由で加えるものではありません。

対象ページを選んだら、商品、地域のお店やサービス、記事、イベントなど、実際の内容に合う種類を一つ選びます。たとえば、通常の会社案内をイベントとして指定したり、一つのサービスを複数の商品に見せたりしてはいけません。

次に、利用者が画面で確認できる名称、説明、日付、価格などを書き出します。マークアップを先に作るのではなく、表示中の情報が正しく、更新担当者が決まっていることを確認します。価格が変わるたびにHTMLの属性だけが古く残るなら、構造化データと本文が食い違います。

URLまたはHTMLを読み込んで項目をタグ付けする

Googleの構造化データに関する案内では、構造化データマークアップ支援ツールへ、公開中のページURLまたはHTMLソースを指定できます。

ページが表示されたら、名前や価格などの文字を選択し、その情報に合う項目名を付けます。同じ文字列でも、ページの種類によって意味は変わります。店名、商品名、記事名を、見た目が大きいという理由だけで同じ項目として扱いません。

画面に表示されていない情報を無理に補うより、先にページ本文を直します。支援ツールが情報を作るのではなく、ページ内の情報と構造化データの項目を対応させるからです。

生成されたHTMLから必要なmicrodataを組み込む

タグ付けを終えると、支援ツールはmicrodataを加えたサンプルHTMLを生成します。microdataでは、itemscopeで一つの項目の範囲を示し、itemtypeで種類を、itempropで各情報の意味を示します。

商品名だけを示す架空例は、次のような形です。

<div itemscope itemtype="http://schema.org/Product">
  <span itemprop="name">架空商品A</span>
</div>

これは説明用の仮例です。すべての商品ページへ同じコードを貼るための完成品ではありません。実際には、対象ページに表示している情報、使っているテンプレート、選んだ種類に合わせます。

生成されたHTMLは、元のファイルと差分を見ながら組み込みます。支援ツールへ渡したHTMLを、そのままサイト全体へ上書きしません。共通テンプレートへ追加する場合は、一ページで確認してから、同じ項目を持つページへ広げます。

データハイライターとは保存場所と利用範囲が違う

二つのツールは、どちらも画面上の情報をマウスで指定します。しかし、作業後に残るものが違います。

比較する点 構造化データマークアップ支援ツール データハイライター
作るもの microdataを加えたサンプルHTML Googleへ公開するタグ付け設定
HTMLの変更 生成結果をサイト側で組み込む 変更しない
保存場所 サイトのHTMLまたはテンプレート Googleウェブマスターツール
確認責任 実装したHTMLと表示内容をサイト側で確認する Googleが読み取ったタグ付けを管理画面で確認する

HTMLを変更でき、制作担当者が継続して保守できるなら、サイト側へmicrodataを持たせる方法を選べます。Googleも、構造化された内容を広く利用できるようにするには、ウェブページへ直接マークアップする方法が望ましいと説明しています。

HTMLをすぐ変更できない場合は、データハイライターが候補になります。ただし、設定はサイトのソースに残りません。誰のGoogleウェブマスターツールで作業し、担当変更時に誰が設定を確認するかを決めます。

構造化データテストツールで公開前に確認する

HTMLへ組み込んだら、Googleの構造化データテストツールで、ページからどの種類と項目を抽出できるか確認します。

テスト結果では、HTMLが表示できることと、意図した構造化データを抽出できることを分けて見ます。商品名が画面に見えていても、itempropを別の要素へ付ければ、機械が読む値は意図とずれます。反対に、構造化データが抽出できても、利用者に見える本文が誤っていれば公開できません。

正しく抽出できることは、リッチスニペットの表示保証ではありません。microdataに関するGoogleの説明も、マークアップしただけで検索結果の拡張表示が保証されるわけではないとしています。順位や表示を先に約束せず、ページ内容とマークアップが一致することを公開条件にします。

一ページで差分と更新方法を確認してから広げる

最初は、情報がそろった代表ページを一つだけ使います。支援ツールへURLまたはHTMLを渡し、項目を指定して、生成前後のHTML差分を保存します。

実装後は、ブラウザー表示、リンク、フォームなど既存機能が変わっていないことを確認し、構造化データテストツールで抽出結果を見ます。さらに、価格や日付を一度変更し、本文とmicrodataが同時に更新されるか確認します。

作業記録には、対象の種類、必須として扱う項目、変更したテンプレート、テストしたURL、更新担当、元へ戻す担当を残します。制作会社へ実装を頼んでも、生成HTMLだけを納品物にせず、どの項目をどのデータから更新するかを受け取ります。

最初の一手はツールを開くことではありません。候補ページを一つ選び、利用者が画面で確認できる名称、日付、価格などを書き出してください。

戻る