今までWebサイトにある情報はHTMLなどで作成されており、クローラーはその意味を理解しようと試行錯誤していました。しかしテキスト情報だけでなく、本来持つ情報を付加することにより、そのテキストが意味するものが理解できるようになります。これを「セマンティックWeb」といいます。

セマンティックなWebサイトを作成する際には「構造化マークアップ」が必要です。

今回は、構造化マークアップのメリットと簡単な実装方法について紹介します。

構造化マークアップとは

構造化マークアップとは、scheme.org が定める用語を使ってHTMLに情報を付加することを指します。わかりやすい例が以下です。

構造化マークアップとは

構造化マークアップ前のHTMLはシンプルですが、マークアップ後にはそれぞれに意味が付加されています。私たち人間はHTMLに書かれているテキストを見れば、何を意味するか理解できますが、クローラーには構造化マークアップをして意味を付加する必要があります。

構造化マークアップのメリット

構造化マークアップ自体に検索順位を上げる効果はありません。ただしリッチスニペットを検索結果に表示する効果があります。

構造化マークアップのメリット_リッチスニペット

上記がリッチスニペットの例です。通常の検索結果に比べ、評価が付いていたりイベント日が表示されているなど、リッチな検索結果になっているのがわかります。

検索結果が目立つので、より検索結果からトラフィックを獲得しやすくなるでしょう。

自社の魅力を「広く・深く」伝えるならferretの広告

ブランド認知広告を出稿した
効果を見てみる

構造化マークアップの実装方法3種

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

一番簡単な方法が「構造化データマークアップ支援ツール」を使う方法です。

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

構造化マークアップしたいページURLHTMLのソースコードを貼り付けて、「タグ付けを開始」を選択します。今回はURLを入力して進めます。

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

ページが読み込まれます。左画面がページを表示した部分。右画面がどの部分に構造化マークアップされているのか表示した部分です。

左画面で「2018年9月3日」がハイライトになっているのが分かります。左画面で選択した部分にどの構造化マークアップを当てるかを選択することで、右画面のマイデータアイテムに表示されます。

構造化マークアップしたい部分にタグ付けが終わったら、「HTMLの作成」を選択すると、HTMLに出力してくれます。上記例で出力してみました。

出力されたHTMLページHTMLソースのheadセクションに追加します。これで構造化マークアップができます。

データハイライターを使う

前述したページHTMLに書き込む方法はソースコードをアップロードする必要があり、それが難しい場合には、データハイライターを使います。

Googleアカウントを持っていれば利用でき、HTMLをいじることなく構造化データのタグ付けが可能です。

データ ハイライターはウェブマスター ツールの 1 つで、ウェブサイトの構造化データのパターンを Google に伝えるものです。データ ハイライターを使用すると、マウスで簡単にサイトのデータ フィールドをタグ付けできます。データをタグ付けすると、Google がそのデータをより効果的に、また新しい方法で、検索結果や Google ナレッジグラフなどの他の Google サービスに表示できるようになります。
https://support.google.com/webmasters/answer/2692911?hl=ja

データハイライターは、サーチコンソールから利用できます。

データハイライター1

データハイライターにタグ付けしたいページURLを入力し、ハイライト指定する情報のタイプを選択します。同じようなページにも適応したいのであれば、「このページタグ付けし、他のページも同様にタグ付けする」を選択し、このページだけでいいのであれば「このページだけをタグ付けする」を選択します。

データハイライター2

使い方は、構造化データマークアップ支援ツールとほぼ同じです。タグ付けが終わったら、画面右上の「公開」を選択します。準備ができたら、次にクローラーページにアクセスしたときに反映されます。

ちなみにタグ付けできるデータタイプは、

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

が対応中です。

直接マークアップする

一番スタンダードな実装方法が、ページHTMLに構造化マークアップをする方法です。
ソースコードを見ながら該当する構造化マークアップをしていくやり方です。

Google、Microsoft、Yahoo!の検索エンジン各社が、構造化データのマークアップ標準化を目指す団体「schema.org」を立ち上げています。直接マークアップするには、そのschema.orgが定めている用語を使って、構造化マークアップをする必要があります。

この方法は、次回の記事で解説します。

まとめ:積極的に構造化マークアップを取り入れよう

今回は構造化マークアップのメリットから、実装方法までを解説しました。
検索順位を上げるだけでなく、検索結果からクリックしてもらわなければWebサイトへのアクセスは増えません。構造化マークアップできるものは積極的に取り入れていくと良いでしょう。