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

近年SEOで注目されている構造化データ。
検索エンジン、ユーザー両方に対してSEO上有益なものでありますが、記述方法がわからないなど敷居の高さを感じている方もたくさんいらっしゃるのではないでしょうか。
今回は構造化データを簡単にマークアップできる構造化データマークアップ支援ツールの使い方をご紹介します。

構造化データとは

構造化データとは、htmlで書かれた情報が何を意味するのかを、検索エンジンやその他のクローラーに理解できるようタグ付けしたものです。

例えば、「サクラサクマーケティング株式会社」という文字列を人間が見た場合、会社名であるとの判断はできるでしょう。
しかしロボットがその判断を行うことはとても困難です。

そこで、単なる文字列としてロボットにテキストを認識させるのではなく、その文字の意味や、文脈、背景などまで理解させるために、あらかじめ決められたフォーマットをもとに文字データを構造化して記述したものが構造化データです。

構造化データは通常のHTMLコードとは別に専用のコードが必要になります。
適切にマークアップすることで、リッチリザルトとして表示できる可能性があり、この目的でマークアップされることが一般的です。

詳しくは以下の記事を参照してください。
https://www.sakurasaku-labo.jp/blogs/structured-data

構造化データのマークアップ方法

構造化データのマークアップ方法には、直接コードを入力する方法とGoogleの構造化データマークアップ支援ツールを使う方法の2種類があります。

以下、それぞれ具体的な例を見ていきましょう。

構造化データを直接マークアップする方法

直接コードを記述する場合は、Googleが公開しているドキュメントをもとに構造化データマークアップを行うと良いでしょう。

たとえばパンくずのマークアップを行う場合はドキュメントは以下にあります。
https://developers.google.com/search/docs/data-types/breadcrumb?hl=ja

上記ページにて、パンくずリストの構造化データのサンプルコードが公開されています。

パンくずリストはほぼ公式サンプルの形のまま利用可能ですので、
・position
・name
・item
こちら3つをマークアップしたいページにあわせて変更してください。

【パンくずリストのマークアップ例】
マークアップしたいパンくず：HOME > 家具・インテリア雑貨 > インテリア雑貨 > 時計

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [{
    "@type": "ListItem",
    "position": 1,
    "name": "HOME",
    "item": "https://○○○.com/"
  },{
    "@type": "ListItem",
    "position": 2,
    "name": "家具・インテリア雑貨",
    "item": "https://○○○.com/category/1"
  },{
    "@type": "ListItem",
    "position": 3,
    "name": "インテリア雑貨",
    "item": "https://○○○.com/category/2"
  },{
    "@type": "ListItem",
    "position": 4,
    "name": "時計",
    "item": "https://○○○.com/category/36"
  }]
}
</script>

Googleの構造化データマークアップ支援ツールを使う方法

サンプルがあったとしてもマークアップがわかりにくかったり、記述のミスをしてしまう場合もあります。
そんなときには構造化データマークアップ支援ツールを使用するのが便利です。

構造化データマークアップ支援ツールを使うためには、サーチコンソール登録が必要です。

STEP1：Googleにログインした状態で構造化データマークアップ支援ツールを開く

以下のURLからツールを開きます。
https://www.google.com/webmasters/markup-helper/

STEP2：、データタイプとマークアップしたいページを選択する

マークアップしたいデータのタイプと、URLを選択したら、「タグ付け開始」をクリック

ここでは「記事」のマークアップ例を示します。

STEP3：画面上でマークアップしたい箇所を選択する

読み込みが完了するとページのプレビューが左側に、構造化データのマークアップ内容が右側に表示されます。

右側に表示されているのは、選択した構造化データ（今回の場合は記事）に対応したタグ（プロパティ）です。
左側の画面内でテキストを選択すると割り当てられるタグが表示されるので適切なものを選択します。

この例の場合ではページのタイトル（大見出し）部分をドラッグし、「名前」を選択しています。

STEP4：コードを生成する

選択し終えたら、「htmlの作成」をクリックします。
すると、構造化データのコードが自動生成されて右側に表示されます。

STEP5：構造化データの確認を行う

生成したコードはWebページで公開する前にテストツールで必ず確認を行います。
マークアップに間違いがあれば、検索エンジンに正しく情報を伝えることができません。

また、リッチリザルトに表示させることが目的の場合、リッチリザルトに必要なデータがマークアップできているかどうかチェックする必要もあります。
構造化データマークアップ支援ツールに表示されるタグだけでは必要なデータが不足している場合もあり、この場合は手動で追加する必要があります。

構造化データテストツールはGoogleから提供されているツールで、簡単にマークアップの有効性や必要データがマークアップされているかどうかをテストすることが可能です。
構造化データテストツールにアクセス後、URLを入力してテストを実行をクリックするだけです。

構造化データテストツール
https://search.google.com/structured-data/testing-tool/?hl=ja

初心者でも簡単！構造化データテストツールの使い方
https://www.sakurasaku-labo.jp/blogs/structured-data-testing-tool

STEP6：構造化データを公開する

テストツールにてエラーがなくなった構造化データコードをWebページに貼り付けて公開すれば完了です。

サーチコンソールで確認する

構造化データを実装したページがインデックスされていると、Google Search Consoleで構造化データのステータスを確認することができます。

一覧でサイト内の構造化データを確認できますので問題が発生していないか定期的にチェックしておくことをおすすめします。

まとめ

Googleは構造化データに注力しており、新たな要素も続々と登場しています。
これから先、構造化データのマークアップが当たり前になってくると思います。
構造化データマークアップ支援ツールを使って構造化データに慣れていき、できるところからしっかりとマークアップを行うことによって、競合より1歩先、2歩先を行く対策をしていくことが重要です。