SEO対策に有効な手法である構造化マークアップ。

オウンドメディアのアクセスを伸ばし、自社商品・サービスの販売につなげるために利用したい手法です。しかし、構造化マークアップが具体的にどのような手法か、詳しく知らない方も多いのではないでしょうか？

そこで今回は、構造化マークアップについて、設定方法からメリット・デメリットまで詳しく紹介します。構造化マークアップを利用し、自社のSEO対策を強化したい方は、ぜひ参考にしてみてください。

構造化マークアップとは？

構造化マークアップとは、Google検索エンジンのクローラーにサイトのコンテンツが何を示しているか理解させる記述方法のことです。

GoogleはWebサイトのコンテンツを収集し、ランキング化して検索結果に表示させます。しかし、Googleは人間と同様の形でコンテンツの中身を理解できません。そこで、Googleではメタデータを追加し検索エンジンにページ内のコンテンツを理解させる「セマンティック・ウェブ」という理論を導入しました。このセマンティック・ウェブにより、検索エンジンがさまざまな言葉の意味や文脈を理解できます。

その上で、通常のHTMLに構造化マークアップを記述することで、クローラーにコンテンツの中身を正しく認識させられます。例えば、「パンタグラフ」という言葉を通常のHTMLで記述した場合、ただの文字列として認識されてます。そこに構造化マークアップの記述を入れ、「パンタグラフ」という言葉に公式サイトを紐づければ、クローラーに社名であることを認識させることができます。

マークアップの記述例

ここでは「通常マークアップ」と「構造化マークアップ」の記述例を紹介します。

【通常マークアップの記述例】

<div>株式会社パンタグラフ</div>

上記のように通常マークアップで記述すると、クローラーは「株式会社パンタグラフ」という単語を単なる文字列として認識します。

【構造化マークアップの例】

<div itemscope itemtype=”http://schema.org/Corporation”>

<span itemprop=”name”>株式会社パンタグラフ</span>

</div>

上記のように構造化マークアップのタグを追加で記述することにより、「名前=株式会社パンタグラフ」という単語に意味を持ち、クローラーが正しく情報を認識します。

構造化マークアップすることで得られるメリットとデメリット

構造化マークアップは、メリットもあればデメリットもあります。

ここでは構造化マークのメリット・デメリットを詳しく解説します。

メリット

構造化マークアップのメリットは、以下の2点です。

• 検索エンジンが認識しやすくなる
• 検索結果にリッチリザルトとして表示される可能性がある

構造化マークアップすることで、検索エンジンのクローラーが正確に情報を認識しやすくなります。そのため、特定の検索キーワードに対して構造化マークアップしたサイトが優先表示されやすくなり、アクセス増加が期待できるでしょう。

また、検索結果にリッチリザルトとして表示される可能性があることもメリットです。リッチリザルトとは、以下のような視覚的機能を用いて表示される検索結果のことです。

上記のようにリッチリザルトとして表示されれば、自社コンテンツがユーザーの目に留まりやすくなり、アクセス数増加が期待できます。

デメリット

構造化マークアップによるデメリットは、以下の2点です。

• サイトやページに構造化マークアップの設定をする必要がある
• 構造化マークアップの知識が必要

構造化マークアップの設定には、構造化マークアップに関する知識の習得が必要で、設定にはある程度の工数もかかります。知識の習得や設定には多くの時間がかかり、特に初めて取り組む場合はなかなか作業が進まないケースも出てきます。自社Webサイトの目的を明確にして、かけたコストに対してメリットが上回るか慎重に検討しましょう。

構造化マークアップの設定方法を紹介

ここからは、構造化マークアップの設定方法を紹介しますが、まず「ボキャブラリー」と「シンタックス」について解説します。「ボキャブラリー」と「シンタックス」は、構造化マークアップ設定の際に必要となる知識で、それぞれ以下を意味します。

• キャブラリー：構造化データ設定の際、何の情報かを定義する規格
• シンタックス：ボキャブラリーをHTMLに記述する規格

ボキャブラリーには、テキストが何を意味するか検索エンジンに伝える役割があり、代表的なものとして「schema.org」があります。このボキャブラリーをHTMLに記述するルールを定めたのがシンタックスで、代表的なものは以下の3タイプです。

• JSON-LD
• Microdata
• RDFa

なお、GoogleではJSON-LDを推奨しています。

Microdata（マイクロデータ）で記述する

Microdataは、HTML5でのみマークアップ可能なシンタックスで、限定的な環境で使用できる特徴があります。記述する際は、HTML内の該当箇所付近に記述しましょう。

例えば、芥川龍之介著作の「蜘蛛の糸」を表示させるには、以下のように記述します。

<div itemscope itemtype=”https://schema.org/Book”>

    <h2 itemprop=”name”>蜘蛛の糸</h2>

    <p itemprop=”author”>芥川龍之介</p>

    <p itemporp=”genre”>中編小説</p>

    <p itemprop=”datePublished”>1918年</p>

</div>

なお、Microdataでは以下の3要素で構造を定義します。

• itemscope：タグの間にあるHTMLがMicrodataを含んだものであることを伝える
• itemtype：タイプを表すURLを指定する。上記では本を紹介しているため、schema.orgの「Book」を指定している。
• itemprop：プロパティのラベル付け。上記では「name（名前）」「author（著者）」「genre（分野）」「datePublished（刊行日）」を指定している。

Microdataは、HTMLタグやHRML属性を使い定義するので、構造化データとHTMLが一致しやすいメリットがあります。しかし、HTML属性が多くHTMLコードが煩雑になりやすいため、管理コストがかかる点がデメリットです。さらに現在、W3Cの勧告が2013年10月で止まっており、基本的にMicrodataの使用は推奨されておらず、利用されるケースも少なくなっています。

RDFa（アールディーエフエー）で記述する

RDFaは、HTML内の該当箇所の近くに記述するため、Microdataと近い形で記述可能です。一方で環境制限はなく、XMLでも使用できるなど幅広い言語でマークアップできます。

RDFaで記述した場合、以下のコード形式となります。

<div vocab=”http://schema.org/” typeof=”Corporation”>

<span property=”name”>株式会社パンタグラフ</span>

<span property=”address” typeof=”PostalAddress”>

<span itemprop=”postalCode”>150-0021</span>

<span property=”addressRegion”>東京都</span>

<span property=”addressLocality”>渋谷区</span>

<span itemprop=”streetAddress”>恵比寿西2丁目17-6代官山ウェスト1階</span></span>

</div>

なお、RDFaは以下3要素を用いて構造が定義されます。

• vocab：構造化マークアップの規格定義。
• typeof：RDFaのタイプ名を定義。上記では「Corporation（会社）」「PostalAddress（宛先）」を指定している。
• property：プロパティのラベル付け。上記では「name（会社名）」「address（会社名）」などを指定している。

RDFaは、機能的に優れているものの、Microdata同様HTMLコードが煩雑になり管理コストがかかる点がデメリットです。

JSON-LD（ジェイソン　エルディー）で記述する

JSON-LDは、他のシンタックスとは記述場所が異なり、HTML内であればどこにマークアップしても問題ありません。

JSON-LDは、具体的に以下の形式で記述します。

<script type=”application/ld+json”>

{

“@context”: “http://schema.org”,

“@type”: “Corporation”,

“name”: “株式会社パンタグラフ”,

“address”: {

“@type”: “PostalAddress”,

“postalCode”: “150-0021”,

“addressRegion”: “東京都”,

“addressLocality”: “渋谷区”,

“streetAddress”: “恵比寿西2丁目17-6代官山ウェスト1階”

},

}

</script>

なお、JSON-LDでは以下の3要素で構造を定義しています。

• context：構造化マークアップの規格定義。
• typeof：型名の定義。上記では「Corporation（会社）」「PostalAddress（宛先）」を指定している。
• propety：型のプロパティをラベル付けする。上記では「name（会社名）」「address（会社名）」などを指定している。

JSON-LDは、スタイルシート（CSS）の影響を受けることが少なく、既存のページに埋め込みやすい点がメリットです。また、各システムでデータの取得・分析がしやすく、マーケティングの施策改善などにも役立ちます。Google推奨でもあり、現在多くのユーザーに利用されている記述方法です。

一方で、外部ファイル化できないため、HTML内に直接記述する必要があります。

構造化データマークアップ支援ツールを使って設定

これまで紹介した方法以外でも支援ツールを使って構造化マークアップができます。

構造化データマークアップ支援ツールはGoogleが提供しており、Googleサーチコンソールと連携したWebサイトで利用可能です。画面上の操作だけでWebサイト（ページ）に合わせたマークアップができるため、非常に便利です。

設定手順は以下の通りとなります。

1. まず、ツールにアクセスすると下記画面が表示されます。
   
2. マークアップするデータタイプを選択し、マークアップするページのURLもしくはHTMLソースを貼り付け、「タグ付けを開始」を押します。
3. タグを追加したい箇所をクリックし、タグの種類を選択。
4. 右端に「ダウンロード」「完了」というボタンが表示される。
5. 「ダウンロード」を押すと構造化データのソースをダウンロードでき、「完了」を押すとページ内に構造化データが反映され、マークアップ完了となる。

データハイライター使って設定

データハイライターを使って構造化マークアップすることも可能です。

データハイライターもGoogleが提供しているツールであり、構造化データマークアップ支援ツールと同様にGoogleサーチコンソールとの連携が必要です。データハイライターは、HTMLの記述を変更する訳ではなく、構造化データの代わりにGoogleに情報を伝えるツールとなっています。

データハイライターの設定手順は以下の通りです。

1. サーチコンソール内「以前のツールとレポート」にある「詳細」をクリック
2. 「データハイライターツール」をクリック
3. 移遷先のページで設定したいサイトのプロパティを選択し、「ハイライト表示を開始」をクリック
4. タグ付けしたいページとハイライトする情報を選択
5. 移遷後のページでタグ付けしたいテキストを選択し、「完了」を押す

上記手順でデータハイライトによるタグ付けが完了し、Googleに設定した情報を伝えられます。

構造化マークアップで表示されるリッチリザルト例

構造化マークアップのタグを記述することで表示されるリッチリザルトの一例を紹介します。

・パンくずリスト

上記赤枠のように、サイトの階層を示すパンくずリストが表示されています。

パンくずリストが表示されれば、どんなページなのかユーザーに情報が伝わりやすく、ユーザーの利便性が向上します。

・イベント

「東京 イベント」で検索すると、赤枠のようにWebサイトのイベント枠が検索結果上に表示されます。

イベント関連を扱うサイトではユーザーにすぐ情報を伝えられるため、ユーザーの関心を惹きつけやすいと言えるでしょう。

・求人情報

Googleで「求人　京都」で検索すると、上記の形式で京都の求人情報が表示されます。

Webサイトを開くことなく求人情報を伝えられるため、ユーザーからクリックされる確率が高まります。

・レシピ

「オムライス」と検索すると、上記のようにレシピ情報がわかりやすく一覧で表示されます。

レシピを掲載しているWebサイトであれば、アクセス増加が見込めるでしょう。

・FAQ

「自動車　おすすめ」と検索すると、上記赤枠のようにWebサイト内の関連するよくある質問が表示されます。

ユーザーは疑問を持って検索をかけるため、その疑問を解決できる回答が上記の形式で表示されれば、Webサイトへのアクセス増加が見込めます。

・Product（製品）

「ダイソン空気清浄機」と検索すると、上記のように商品の詳細が検索結果上で表示されます。

ユーザーの欲しい情報をWebサイトを開くことなく把握できるため、ユーザーの興味を惹きつけアクセスを促せます。

構造化マークアップを検証する方法

構造化マークアップを検証する方法として、以下の3つが挙げられます。

• ・構造化データテストツールで確認
• ・サーチコンソールで確認
• ・リッチリザルトテストで確認

構造化マークアップが正しくできているか確認できるため、設定後は必ず検証しておきましょう。

構造化データテストツールで確認

schema.orgが提供する構造化データテストツールで構造化マークアップの検証ができます。

利用方法は以下の通りです。

1. 構造化データテストツールにアクセス
2. 該当するURLを入力し「テストを実行」をクリック

構造化マークアップが正しく反映されていれば「エラーなし」や「警告なし」と表示されます。一方、エラーが発生している場合は警告表示が出るため、該当箇所修正する必要があります。

サーチコンソールで確認

サーチコンソールから構造化マークアップの検証も可能です。

先ほどの構造化データテストツールは1つのURLしか検証できませんが、サーチコンソールはサイト内の構造データを一覧にして検証できます。

具体的な手順は以下の通りです。

1. サーチコンソールにアクセス
2. 「検索での見え方」より「構造化データ」を選択

上記の方法で、実際に記述した構造化マークアップが検索結果上で反映されているかが確認できます。

リッチリザルトテストで確認

Googleが提供するリッチリザルトテストでも確認できます。

リッチリザルトテストも構造化データテストツールと同様に、検証したいURLを入力して簡単に検証できるツールです。

具体的には以下の手順で利用します。

1. リッチリザルトテストにアクセス
2. 該当するURLを入力
3. 「テスト実行」をクリック

構造化マークアップが正しく反映されていれば、「このページはリッチリザルトの対象です」と表示されます。一方、正しく反映されていない場合やエラーがあった場合は、「このテストによって判明したリッチリザルトの対象外のページ」と表示され、テストの詳細が表示されます。

対象外ページと表示された場合は、テスト詳細を見てサイトを修正しましょう。

まとめ

構造化マークアップは、自社コンテンツがリッチリザルトとして表示されるなど、SEOにおいて大きなメリットがありますが、構造化マークアップは専門的な知識や作業の手間を要する点がデメリットです。

Googleが提供する構造化データマークアップ支援ツールやデータハイライターを使えば手軽に構造化マークアップできるため、積極的に利用しましょう。

もし、構造化マークアップの設定にお困りの場合は、ぜひパンタグラフにご相談ください。

パンタグラフでは、インターネット事業を中心とした戦略立案に向けて、課題抽出から企画提案まであらゆるサポートを実施しています。

相談は無料ですので、お気軽にお問い合わせください。

お問い合わせはこちら