FAQ/HOWTO(ハウツー)の構造化データ実装によるCTR改善結果について

はじめに

近年、構造化データマークアップ対応によるサイト情報のリッチリザルト表示が進んでいます。2019年5月8日にもGoogleが新しいリッチリザルトとして「FAQ」と「HowTo(ハウツー)」を公表しました。

この構造化データは、リッチリザルト表示により、検索結果画面の占有率を上げることができる反面、検索結果でユーザーの疑問を解決することができるため、サイトへの流入が減少するのではという懸念がありました。実際、SEOコンサルティングの現場でもこういった質問を受けることは多くありました。

そこで本記事では、「FAQ」と「HowTo」の構造化データ実装手順や実装によるメリットをご紹介するとともに、実データを公開し、リッチリザルト表示によってCTR(クリック率)にどんな変化が見られるのか、CTRを改善するためのポイントはあるのか解説してまいります。

構造化データとは

構造化データとは、HTMLで記述されているページの情報を、検索エンジンやクローラーが認識できる規格(ボキャブラリー)に従って、理解できる記述方法(シンタックス)でマークアップしたデータのことをいいます。

ボキャブラリ

検索エンジンやクローラーが認識できる規格をボキャブラリーといい、2020年6月現在Googleがサポートしているのは、schema.orgのみです。

data-vocabulary.orgというボキャブラリは、2020 年 4 月 6 日をもって、サポート終了となっております。

シンタックス

ボキャブラリを、クローラーが理解できるように記述する方法をシンタックスといい、Googleがサポートしている書き方は、

JSON-LD
microdata
RDFa

の3種類です。この中でもGoogleは、JSON-LDを使用することを推奨しております。

本記事では、ボキャブラリは「schema.org」シンタックスは「JSON-LD」を使用した場合の実装方法をご紹介します。

FAQとHOWTOの構造化データについて

2019年5月8日に公表されたFAQとHowToの構造化データが、それぞれどういったコンテンツに対してマークアップできるのか、それぞれのメリットについてご紹介します。
でしょうか。

FAQ

FAQの構造化データは、特定のトピックに関する質問と回答の一覧が掲載されているページにマークアップすることができます。サイト内のよくある質問ページなどが該当します。

最近では、特定のページに一部のコンテンツとして、よくある質問を用意し、FAQ構造化データをマークアップすることでリッチリザルト表示を狙うという手法も増えています。

HOWTO

HowToの構造化データは、なにかのタスクを順を追って説明しているようなハウツーコンテンツにマークアップすることができます。「〇〇方法」「〇〇手順」といったクエリで検索した場合にHowToの構造化データが実装されたページがリッチリザルトとして表示されています。

FAQ・HowToの構造化データを実装するメリット

FAQ・HowToの構造化データを実装するメリットは3点あります。

1. クローラーがページ情報を理解しやすくなる

他の構造化データ実装にもいえることですが、クローラーがサイトの内容を理解しやすくできるというメリットが挙げられます。

2. Googleアシスタントのアクションに対応できる

アプリやGoogleHomeといったスマートホームデバイスでGoogleアシスタントを活用する場合に、利用されることがあります。スマートホームデバイスのディスプレイにハウツーガイドが表示されるというメリットがあります。

3. リッチリザルトが表示される

構造化データをマークアップして得られるメリットとして、リッチリザルトが表示されることが挙げられます。FAQもHowToもリッチリザルト対象なので、実装すれば検索結果画面にリッチリザルトが表示される可能性があります。

▼FAQのリッチリザルト例

▼HowToのリッチリザルト例

今回はリッチリザルトが表示されることで、CTR(クリック率)にどんな影響がでるのか実データを用いてお伝えしていきます。

FAQとHOWTOの構造化データの実装方法

さて、ここからはFAQとHOWTOの構造化データ実装方法について、ご説明致します。
先程お話したように、ボキャブラリは「schema.org」シンタックスは「JSON-LD」での実装例をご紹介します。

FAQ

まず、FAQの構造化データです。マークアップできるページ対象に注意点があります。

それは、サイト運営者が作成し、ユーザーが他の回答を送信できないページに実装する必要があることです。複数のユーザーが質問と回答を送信できる掲示板のようなページにはマークアップできないのでご注意ください。

<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "サイト運営者が作成した質問項目をこちらに記載します。",
"acceptedAnswer":
{"@type": "Answer",
"text": "上記の質問の回答をこちらに記載します。"}
},
{"@type": "Question",
"name": "サイト運営者が作成した質問項目をこちらに記載します。",
"acceptedAnswer": {
"@type": "Answer",
"text": "上記の質問の回答をこちらに記載します。"}
},
{"@type": "Question",
"name": "サイト運営者が作成した質問項目をこちらに記載します。",
"acceptedAnswer": {
"@type": "Answer",
"text" : "上記の質問の回答をこちらに記載します。"}
}
]
}
</script>

質問に対する回答部分には、リンクやリストなど、HTML コンテンツを含めることもできます。

使用できるHTML タグは、<h1>～<h6>、<br>、<ol>、<ul>、<li>、<a>、<p>、<div>、<b>、<strong>、<i>、<em>です。

目立たせたい内容を太字にしたいなら <strong></strong> で囲ってください。
詳細説明のページへリンクを張りたいなら<a>タグでリンクを設置してください。

HOWTO

次に、HOWTOの構造化データです。下記は必須プロパティのみの最低限の実装となります。

推奨プロパティの中で、実装をおすすめしたいのは各手順の画像を併せて実装することです。

後ほどCTR変容についてご紹介致しますが、画像有り無しでCTRに大きな差が出てきます。
可能な限り、各手順の画像を実装することをご検討ください。

<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "HowTo",
"name": "ハウツーコンテンツのタイトル",
"description": "ハウツーの説明",
"step": [
{"@type": "HowToStep",
"text": "ステップ１の内容",
"image": "ステップ１画像のURL"
},
{"@type": "HowToStep",
"text": "ステップ２の内容",
"image": "ステップ２画像のURL"
},
{"@type": "HowToStep",
"text": "ステップ３の内容",
"image": "ステップ３画像のURL"
},
{"@type": "HowToStep",
"text": "ステップ４の内容",
"image": "ステップ４画像のURL"
},
{"@type": "HowToStep",
"text": "ステップ５の内容",
"image": "ステップ５画像のURL"
},
{"@type": "HowToStep",
"text": "ステップ６の内容",
"image": "ステップ６画像のURL"
}
]
}
</script>

HOWTOの構造化データを実装するにあたって注意すべきこととして、各ステップごとに連番を振って入力することです。

例えば、

"@type": "HowToStep",
"text": "１．必要な道具を揃える",

と記載すると

リッチリザルトとして表示される際に、「１．１．必要な道具を揃える」と番号が重複して表示されてしまうのでご注意ください。

また各手順の画像を実装する際にも注意点があります。

まず、画像のURLはクロールやインデックス登録できる必要があります。手順と関係ない画像をマークアップしてはいけません。そして、画像の形式は、.jpg、.png、.gif のいずれかである必要があります。