スニペットなどSERPに表示される内容を制御したい!その方法とは?

SEO基礎
SEO対策
2019.10.30
SERPのスニペット

どのサイトを見るかを判断するために、検索結果ページ(SERP=Search Engine Result Pag)に表示されるスニペットの内容を確認するユーザーが多いことはご存じのことと思います。ページに書かれている内容がわかりやすく、かつユーザーの注意を引く魅力的なスニペットであれば、より多くのユーザーがそのページを見てみようという気持ちになるでしょう。ここでは、SERPに表示されるスニペットなどの内容を制御する方法と、仕組みについてご紹介します。

スニペットとは

「スニペット(snippet)」とは、SEOでは検索結果に表示されるWEBページの説明文を指し、「meta description」というマークアップを利用して表示しています。下の画像は「下北沢 カレー」でGoogle検索したSERPです。画像内赤枠で囲まれているのが、それぞれの記事のスニペットです。これらは「meta description」を利用した一般的なスニペットです。

検索エンジンにWebページの説明となる部分を適切に認識させることで、そのページが何をテーマに書かれている記事なのかを伝えることができるため、SEO対策において重要な施策となっています。ユーザーはSERPのタイトルとスニペットをみて、クリックするページを決めるため、適切なスニペットの設定は、クリック率改善の観点からも欠かせません。

なお、スニペットには「リッチリザルト(リッチスニペット)」や「強調スニペット」、「AMP」などいくつかの種類があります。スニペットとして表示されるのはテキストをはじめ、写真や動画などがあります。ここで紹介する方法によって、スニペットとして表示されるテキストの内容や写真のサイズ、動画の長さを制御することができます。

リッチリザルトとは?

「リッチリザルト」とは、通常の、タイトル、URL、スニペットで表示される検索結果とは異なり、結果を表示する位置や形式を様々に変化させたものです。以前は「リッチスニペット」とも呼ばれていました。リッチリザルトにはいくつかの種類がありますが、下の画像の赤枠内のように、検索結果として画像や動画が表示されるものもあります。

リッチリザルトの例

リッチリザルトは、構造化データのマークアップを利用することで設定可能です。なお、リッチリザルト(リッチスニペット)について詳しくは下記の記事を参考になさってください。

▼関連記事

強調スニペットとは?

「強調スニペット」とは、Google検索を行ったユーザーの疑問や悩みに、直接答えるコンテンツを表示する形式のことです。例えば「眼瞼下垂」で検索するとSERP上部に下のようなコンテンツが表示されます。他のスニペット同様に構造化データのマークアップを利用します。

強調スニペット

▼関連記事


AMPとは?

「AMP(Accelerated Mobile Pages)」は、スマートフォンでWEBページを高速で表示させるための仕組みで、ニュースメディアや情報サイトの中にAMPを利用しているサイトが多くあります。下の画像は「天皇即位」で検索した検索結果です。画像内に赤枠で囲まれているのが、AMPに対応したWEBページとなっています。

AMP

スニペットとは異なりますが、スニペット同様に構造化データマークアップを利用します。

▼関連記事

スニペットの2つの制御方法

これまでスニペットに関して制御できるのは、「スニペットの表示を許可するかどうか」だけでした。しかし、2019年10月以降、SERPに表示されるスニペットの文字数や動画のプレビュー時間、画像のサイズを制御することができるようになりました。

Googleが公表した2つの制御方法をご紹介します。

  • robotsメタタグで記述する方法
  • HTML属性で記述する方法

robotsメタタグで記述する場合

robotsメタタグは、HTMLページの <head> 要素内に追加するか、x-robots-tagのHTTPヘッダーで指定することで、ページレベルでスニペットを制御することができます。

以下、スニペットの制御に利用するrobotsメタタグを4つ紹介します。これらのrobotsメタタグは、お互いに併用して利用することができます。

nosnipet:説明文を表示しない

「nosnipet」は、以前から利用できたスニペットです。スニペットを表示したくない時に次のように記述して利用します。

<meta name=”robots” content=”nosnippet”>

max-snippet:[number]:説明文の文字数を設定

「max-snippet」は、新しく利用できるようになったrobotsメタタグです。スニペットとして表示する文字数を設定したい場合に、[number]の部分に任意の数値を設定して利用します。スニペットを200文字に設定するのであれば、以下のように記述します。

<meta name=”robots” content=”max-snippet:200″>

なお、マイナスの数値は設定できません。仮にマイナスの数値を設定してもその設定は無効となります。また、0を指定すると、「nosnipet」を利用した場合と同様、スニペットは表示されません。

また、この設定は強調スニペットにも影響します。強調スニペットとして表示されるためには最低限必要な文字数があるため、robotsメタタグの設定によりその最低文字数に満たない文字数に制限していた場合、強調スニペットとして表示されなくなります。

max-video-preview:[number]:動画の再生時間を設定

「max-video-preview」は、動画のプレビューがSERPに表示されるリッチリザルトで利用できます。SERPに表示される動画のプレビューの最長再生時間を設定します。たとえば下記のように記述すれば、SERPに表示される動画のプレビューは15秒間だけ再生されるように設定可能です。

<meta name=”robots” content=”max-video-preview:15″>

マイナスの値は無効で、最長再生時間を制限することはできません。0を記述すると動画のプレビューは再生されません。

max-image-preview:[setting]:画像のサイズを設定

「max-image-preview」は、SERPに表示される画像のサイズを設定するためのrobotsメタタグです。[settings]の部分に以下の3種類の値から選んで設定します。

なお、この設定はAMP(高速表示)化されたページや、Discoverフィード(各ユーザーが関心を持ちそうなコンテンツをGoogleが表示する機能)に掲載される画像にも影響を及ぼします。

  • none:この値を設定すると非表示となります。
  • standard:デフォルトの設定です。
  • large:この値を設定するとviewportの幅と同サイズになります。

“data-nosnippet” HTML 属性で記述する場合

“data-nosnippet” HTML 属性を利用することで、Webページのコンテンツのうちスニペットとして表示することを許可する部分を制限することが可能です。span、div または section 要素とともに用います。

ページ内のコンテンツではなく、meta descriptionをスニペットとして表示させたい場合には、ページ内のコンテンツを全て”data-nosnippet” HTML 属性で囲むことで可能となります。

構造化データとは?

スニペットなどSERPに表示される内容を制御するために、理解しておかなければならない概念が「構造化データ」です。構造化データとは、クローラーがWEBページの内容を理解するためにタグ付けすることで、SERPにリッチスニペットなど様々な要素を表示させるために利用されるものです。

ボキャブラリーを利用する

構造化データには「ボキャブラリー」を利用します。ボキャブラリーは、モノゴトが持つ意味を表現するために定義されたものです。多くの種類のボキャブラリーが存在しますが、代表的なのは、「schema.org」です。schema.orgでは、誕生日を表す時には[Date]という値を利用し、出生地を表す時には[Place]という値を利用するというように、マークアップするために利用する値が定義されています。

シンタックス「JSON-LD」の仕様に従う

ボキャブラリーはマークアップ時に利用する「値」を定義しただけのもののため、HTMLにマークアップする際には、どのようにマークアップするかの「仕様」が必要になり、その仕様が「シンタックス」です。シンタックスには3つの種類がありますが、Googleは、「JSON-LD」と呼ばれるシンタックスを推奨しています。

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

以上が「構造化データ」の概念です。それでは構造化データをマークアップする方法を簡単にご紹介します。

構造化データをHTML上で直接マークアップする場合

上述の「ボキャブラリー」と「シンタックス」により、構造化データをHTML上で直接マークアップすることが可能です。ウェブマスターツールには「構造化データ マークアップ支援ツール」があり、このツールを利用すれば簡単に構造化データをマークアップすることができて便利です。

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

こちらは構造化データ マークアップ支援ツールの利用画面です。

※使い方は、Google「構造化データ マークアップ支援ツール」を参照してください。

構造化データをデータハイライターを利用してマークアップする場合

WEBページの構造化データのパターンをGoogleに伝えるためのウェブマスターツールに、「データハイライター」があります。構造化データのマークアップを行いたいサイトのURLとページタイプを選択してタグ付けを行うことが可能です。例えば、名前や場所、日付などのデータフィールドを簡単にタグ付けでき、タグ付けしたデータは随時新しい形式でより魅力的に検索結果に表示することができます。

データハイライターを利用するには、まずはSearch Consoleのアカウントを作成し、サイトをプロパティに追加する必要があります。既にサイトがSearch Consoleに登録されている場合、下記のアドレスよりデータハイライターを開くことが可能です。

データハイライター:https://www.google.com/webmasters/tools/data-highlighter

※使い方は、「データハイライター」を参照してください。

schema.orgで構造化データをマークアップする

Googleは構造化データのマークアップにschema.orgを使用することを推奨しています。2020年4月6日以降、data-vocabulary.orgでマークアップしている場合は、GoogleのSERPのリッチスニペットには表示されなくなるなどの影響があるということですので、schema.orgへの変更をおすすめします。

schema.orgへの変更については次の記事を参考にしてください。

▼関連記事

まとめ

SERPに表示されるスニペット(リッチリザルト、強調スニペットを含む)やAMPなどの要素は、構造化データマークアップを利用し表示することができます。そしてrobotsメタタグもしくはHTML属性を利用することで制御することが可能です。このページで紹介しているrobotsメタタグを利用すれば、以前よりも簡単に制御することができます。

スニペットなどSERP(検索結果)に表示される内容は、最もユーザーの目に触れる場所です。スニペットなどが魅力的でなければ、上位表示できてもアクセス数を稼ぐことができないという事態になりかねません。このページで紹介した方法で、検索結果に表示される内容を制御し、ユーザーの興味を引き、クリック率の向上を図ることをおすすめします。

SEOやWEB制作に関する情報を検索する

コラム

最新コラム

人気コラム

過去の記事

ご質問やご相談などお気軽にお問い合わせください。