構造化マークアップのメリットを理解しよう

2018年09月12日

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

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

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

構造化マークアップとは

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

構造化マークアップとは

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

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

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

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

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

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

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

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

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

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

構造化マークアップしたいページのURLかHTMLのソースコードを貼り付けて、「タグ付けを開始」を選択します。今回は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