目次
  1. "data-nosnippet" とは
  2. "data-nosnippet の用途
    1. 強調スニペット対策
    2. 普通のスニペットにも有効
  3. "data-nosnippet" が必要なケース
  4. 基本的な使い方
    1. "data-nosnippet" を記述する場所
    2. "data-nosnippet" の記述の仕方
    3. ＳＥＲＰでの見え方
    4. ＳＥＲＰでの見え方を意識する
  5. 使い方の実際
    1. 見出しで
    2. リストにも
    3. 広い範囲を隠す
    4. 見出し以外を隠す
  6. 応用テクニック
    1. スニペットをコントロールする
    2. 強調スニペットも狙う
  7. "data-nosnippet" が効かないケース
  8. "data-nosnippet" のＦＡＱ
    1. 検索順位に悪影響は？
    2. すでに強調スニペットに表示されていると？
    3. 「他の人はこちらも検索」への表示も防げる？
    4. 強調スニペットから外れた自分のサイトはどうなる？
    5. じゃあ、強調スニペットから外れても意味がないのでは？

1. "data-nosnippet" とは

"data-nosnippet" は、コンテンツ（ページ）の一部を Google の検索結果から隠すための html 属性です。

html のコードでページの一部を "data-nosnippet" で囲むと、囲まれた部分のテキスト（文章）が Google や Yahoo Japan の (1) スニペット (2) に決して現れません。

(1) "data-nosnippet" は Google 検索のみが理解するので、Google と Yahoo Japan（Google の検索エンジンを使っている）にしか効果がない

(2) 検索結果に表示されるコンテンツの文章。 Google が当該ページの検索キーワードの周辺のテキストを抽出して表示する。

2. "data-nosnippet" の用途

2.1. 強調スニペット対策

"data-nosnippet" の用途は主に強調スニペット対策です。

強調スニペットは、ユーザー（検索者）が求める「答え」をＳＥＲＰ(1) にズバリと表示してしまいます。

その結果、ユーザーはＳＥＲＰで検索行動を終了し、あなたのサイトへのリンクをクリックしてくれません(2)。

(1) ＳＥＲＰとは検索結果画面のこと。「ＳＥＲＰ」は "Search Engine Results Page" の略語。

(2) ユーザーがＳＥＲＰで満足して検索行動を完了する検索は「ゼロ・クリック・サーチ（zero click search）」と呼ばれます。

そこで、強調スニペットがユーザーのクリックを妨げないように、強調スニペットからコンテンツを「保護」する必要があります。

そのように「保護」する手段のうち、柔軟性と確実性の観点から最も効果的なのが "data-nosnippet" です。
他の手段はメタタグを用いて、①ページ全体をスニペットに利用させない（ＳＥＲＰにはページのタイトルだけが表示される）、②スニペットに表示される文字数を制限するといったもの。

2.2. 普通のスニペットにも効果

"data-nosnippet" は、強調スニペットではない通常のスニペットにも効果を発揮します。

通常のスニペットに表示される「答え」も、ゼロ・クリック・サーチの原因となり得ます。

Google は通常のスニペットでもゼロ・クリック・サーチを推進している節があります（以前に比べて、検索者の望む「答え」がズバリとスニペットに出るようになっている）。

なので、通常のスニペットでも「答え」の見え方を意識する必要が高まっています。

3. "data-nosnippet" が必要なケース

次に該当するページは、ゼロ・クリック・サーチが生じている恐れがあります。

  1. 肝心な情報(1) に関する部分の文字数が少なく（およそ２００文字未満）、肝心な情報のすべてが強調スニペットに表示されてしまう。
  2. Google のサーチ・コンソールで見て、表示回数のわりにクリック数が少ない。(2)
このようなページは、"data-nosnippet" によるコンテンツの保護を検討しましょう。

(1) 厳密には「ユーザー（検索者）が肝心と思う情報」。 あなたのサイトに強調スニペットには表示されない貴重な情報があっても、それを知らないユーザーは強調スニペットの情報で満足し検索行動を終了します。

(2) 記事のタイトルがつまらないせいのも一因かもしれません。 タイトルの変更も検討しましょう。

4. 基本的な使い方

4.1. "data-nosnippet" を記述する場所

"data-nosnippet" は html コード (＊) に記述します。
(＊) <h1> や <p> などの html タグやコンテンツの文章を記載するところ。

"data-nosnippet" を使える html 要素は次の３つ：

  • <span>
  • <div>
  • <section>

4.2. "data-nosnippet" の記述の仕方

スニペットから隠したい部分を "data-nosnippet" で囲みます。

4.2.1. 文の一部を隠したいとき

スニペットから隠したいのが文の一部だけなら <span data-nosnippet> </span> を使います。

<span data-nosnippet>文章</span>

4.2.2. 広範囲を隠したいなら

１つのパラグラフ全体や複数のセクションなど大きな部分なら <div data-nosnippet> </div> や <section data-nosnippet> </section> を使います。

<div data-nosnippet>文章</div>

"data-nosnippet" は <section> より <div> に用いると良いでしょう。 <div> は <section> と違ってそれ自体の意味を持たないので、多用してもＳＥＯに影響しません。

4.3. ＳＥＲＰでの見え方

"data-nosnippet" で囲まれた部分は、ＳＥＲＰからスッポリ抜け落ちます。

例えば次のように html を記載するとします：

「オードリー」は <span data-nosnippet>高貴な力 </span> という意味である

すると、ＳＥＲＰに表示されるのは次の通り：

「オードリー」はという意味である

「<section data-nosnippet> </section>」や「<div data-nosnippet> </div>」でも同様です。

4.4. ＳＥＲＰでの見え方を意識する

"data-nosnippet" で隠した部分はＳＥＲＰからスッポリ欠落します。 よって、ユーザーに次のように判断されかねません：

  • 文の一部を隠す場合 → 「誤字脱字だらけの質の悪いページだ」
  • コンテンツの大部分を隠す場合 →「このサイト壊れてるよ...」

こうした事態を完全に防ぐのは難しいですが、緩和策として次があります：

4.4.1. 括弧の利用

<span data-nosnippet> </span> をカッコ内に使うと、ＳＥＲＰで欠落して見えるのがカッコ内のテキストなので、ユーザーに「これは誤字脱字ではない。わざと隠している」と思ってもらいやすくなります。

例えば次のように使います。

「フリーマーケットを」英語に戻すと「<span data-nosnippet> flea market </span>」です。

4.4.2. 隠した部分を除いても意味が通るようにする

例えば次のように html コードに記載します。

質問：「モニカ」という人名の意味を教えて下さい。

回答：「モニカ」の語源については<span data-nosnippet>よく分かっていませんが</span>、いくつかの説があります。

すると、ＳＥＲＰで次のように見えます：

質問：「モニカ」という人名の意味を教えて下さい。

回答：「モニカ」の語源については、いくつかの説があります。

4.4.3. 広告を隠す

広告（アドセンス）を貼った部分が偶然ＳＥＲＰに表示されると、ＳＥＲＰに広告の存在が表示されます。 表示のされ方は失念しましたが、「Ads」や「広告」というテキストがＳＥＲＰに表示されます。

広告の存在がＳＥＲＰに表示されると、ユーザーに広告だらけのページと判断されＣＴＲ(＊) が下がる恐れがあります。 ゆえに、できれば「広告」の表示を隠したいところです。

"data-nosnippet" は広告の存在を示すテキストにも適用されるので、広告のタグを "data-nosnippet" で囲めばＳＥＲＰに広告が表示されるのを防げます。

(＊)「ＣＴＲ（Click Through Rate）」とは「クリック率」のこと。

5. 使い方の実際

5.1. 見出しで

<span data-nosnippet> </span> は見出し（<h2> や <h3> など）にも使えます。

ネタバレになるのでスニペットから隠したいが見出しに使いたい。 そんな言葉は<span data-nosnippet> </span> で囲ってしまいましょう。

例えば次のように html コードに記載します。

<h2>「フリーマーケット」を英語に戻すと？ </h2>

<h2> <span data-nosnippet> "flea market" の </span> 意味 </h2>

すると、ＳＥＲＰで次のように見えます：

<h2>「フリーマーケット」を英語に戻すと？ </h2>

<h2> 意味 </h2>

5.2. リストにも

リスト（<ol></ol> など）にも "data-nosnippet" は使えます。

  • <li></li> の中 → <span data-nosnippet></span>
  • リスト全体 → <div data-nosnippet></div> または <section data-nosnippet></section>

5.3. 広い範囲を隠す

<div data-nosnippet></div> や <section data-nosnippet></section> でセクションやパラグラフの全体を囲います。

<div> も <section> も複数のパラグラフにまたがって使えます。

<div data-nosnippet>
<p>パラグラフ１</p>
<p>パラグラフ２</p>
</div>

上記の例では、「パラグラフ１」と「パラグラフ２」の両方が全部スニペットから除外されます。
<div data-nosnippet> で囲う範囲内に広告のタグも含めましょう。 ＳＥＲＰでは、アドセンス（他の広告も？）を貼っている箇所が "Ad." と表示されます。 <div data-nosnippet> で大量のコンテンツを隠すとＳＥＲＰに "Ad." ばかりが表示され、検索者の目に広告だらけと映ります。

5.3.1. メリット

パラグラフ全体を隠すので、スニペットで「文章に不備がある」と誤解されることがありません。

5.3.2. デメリット

ユーザーの目的と関係が薄いテキストがスニペットに表示されがちです。
検索キーワードに最も深く関わるパラグラフがスニペットから除外されるので、そうなります。

5.4. 見出し以外を隠す

この手法では、ページ内に存在する見出し以外の全てを "data-nosnippet" で隠します。

この手法はページの目次をスニペットに表示するようなものです（スニペットに表示されるのが各セクションの見出しだけなので）。

この手法を用いるときは、次のように見出しに番号を振ると良いでしょう。

<h2> 1.「フリーマーケット」を英語に戻すと？ </h2>

<h2> 2. "flea market" の意味 </h2>

<h2> 3. "flea market" の由来 </h2>
そうすることでＳＥＲＰにおいて、見出しが見出しだと伝わりやすくなります。
その結果、ユーザーに「不良ページだ」と思われにくくなります。

目次がある場合

目次があるページで見出し以外を隠すなら、目次を除く全てのコンテンツを "data-nosnippet" で隠してしまいましょう。

メリットは次の通り：

  • 労力を省ける。 セクションごとに逐一 "data-nosnippet" で隠す必要がないので。
  • （目次に「目次」と銘打っておけば）スニペットに「目次」と表示されるので、スニペットに表示される文字の羅列が目次の内容だと分かってもらえる。

6. 応用テクニック

6.1. スニペットをコントロールする

確実にＳＥＲＰに出したい部分（例. 興味をそそる言葉やフレーズ）があるとき、その部分以外を "data-nosnippet" で囲みます。

すると、その部分が確実にＳＥＲＰに表示されます。 スニペットに表示されるテキストはコンテンツのテキストのうち表示可能な（"data-nosnippet" で囲われていない）部分から選ばれるからです。
"data-nosnippet" を、特定のコンテンツを隠すためではなく確実にスニペットに表示させるために用いるわけです。
ユーザーの興味をそそる言葉やフレーズをスニペットに表示させることで、ＣＴＲ の向上を見込めます。 言葉は悪いですが、興味をそそる言葉やフレーズを「釣り餌」として用いるわけです。

6.2. 強調スニペットも狙う

あなたの記事が「強調スニペットを狙いたい部分」と「ネタバレを防ぐため隠したい部分」に分かれているなら、「ネタバレを防ぐため隠したい部分」にだけ "data-nosnippet" を適用することで、ネタバレを阻止しつつ強調スニペットを狙える可能性があります。

7. "data-nosnippet" が効かないケース

まれに、"data-nosnippet" を適用した部分がＳＥＲＰに表示されていることがあります。 Google の側の不具合です。

"data-nosnippet" が効かないケースでは、"data-nosnippet" が効いていないページをインデックスし直す(*) と "data-nosnippet" が効くようになります。
(*) サーチコンソールからインデックス・リクエストを送る。

インデックスし直しても "data-nosnippet" が効かない場合は、"data-nosnippet" を外したり戻したりして何度かインデックスし直すと良いでしょう。

8. "data-nosnippet" のＦＡＱ

8.1. 検索順位に悪影響は？

Google は "data-nosnippet" を使用するコンテンツの検索順位を下げはしません。
ただし、"data-nosnippet" の使用がユーザーの行動を介して間接的に検索順位に影響する可能性はあります。

8.2. すでに強調スニペットに表示されていると？

すでに強調スニペットに表示されているコンテンツにおいて、強調スニペットに表示される箇所のテキストを "data-nosnippet" で囲むと、そのコンテンツは強調スニペットから外れます。
同一コンテンツ内の強調スニペットとは無関係の場所に "data-nosnippet" を適用してどうなるかは不明です。 Google が意地悪をしない限り強調スニペットから外れないはずですが...

8.3.「他の人はこちらも検索」への表示も防げる？

そのはずです。

わたし自身では未確認ですが、"data-nosnippet" はコンテンツが「他の人はこちらも検索（英語版では "People also ask"）」に表示されるのも防ぐはずです。

というのも、Google が公開する資料によると、「他の人はこちらも検索」は強調スニペットの一種だからです。
(＊) リンク先ページの次の部分に基づく： "You might find featured snippets on their own within overall search results, within the "People also ask" section, or along with Knowledge Graph information."

8.4. 強調スニペットから外れた自分のサイトはどうなる？

8.4.1. 当該の検索キーワードのＳＥＲＰ

多くのケースでは他のサイトが強調スニペットに表示されるでしょう。 強調スニペットが消滅するケースは少数でしょう。

8.4.2. あなたのサイトの行く末

強調スニペットから外れたあなたのサイトが何位にランキングされるかは不明です。 ですが１ページ目にとどまる可能性は高いです。 強調スニペットが検索順位１～１０位のサイトから選ばれるからです。

8.5. じゃあ、強調スニペットから外れても意味がないのでは？

そうとも限りません。

2017年の調査で、ＳＥＲＰにおいてクリックされる割合が強調スニペットでは平均８.６％、強調スニペットの下に表示される検索順位１位では平均１９.６％という結果です。

強調スニペットより検索順位１位のほうがクリックされやすいわけです。 強調スニペットを外れたのち自サイトが１位にランクインするなら、断然そっちのほうがお得です。

8.5.1. 強調スニペット以外でも

また、強調スニペットのことを別にしても "data-nosnippet" は次の２点においては使える技術です：

  1. 通常のスニペットにおいて秘匿したい「答え」を隠す。(1)
  2. スニペットに表示させたい部分を表示させる。(2)

(1) 例えば、あなたのコンテンツだけの虎の子の（とっておきの）情報。 そうした情報がうっかりスニペットに漏れるのを防いでくれます。 釣り餌（スニペットにさらし、興味をそそるキーワード）と組み合わせるといっそう効果的。

(2) セクション 6.1. で説明したテクニック。

1. も 2. もＣＴＲの向上に効果が期待できます。

8.5.2. "data-nosnippet" は必須の技術

トップクラスのＣＴＲを目指すなら、"data-nosnippet" の利用は避けて通れません。 平素より "data-nosnippet" に親しみ、技術の習熟を図りましょう。

＜トップに戻る＞

Copyright （c） 2022 "data-nosnippet" の使い方を教えて！
All Rights Reserved.