目次を見る07

検索とAI概要の引用を部分制御|data-nosnippetの書き方

Wemiro編集部読了目安 13
スニペットAIによる概要技術SEOdata-nosnippet

「AIによる概要に、うちの価格表がそのまま引用されてしまった」「まだ確定していないキャンペーンの一文が、検索結果の説明文に抜き出されて表示された」——こうした場面で困るのは、ページ全体を検索から消したいわけではなく、ページの中の特定の一部分だけを抜き出されたくない、というケースです。ページごと隠す(noindex)と検索流入まで失いますが、そこまでする必要はありません。

Googleは、ページの一部分だけをスニペット(抜粋)から除外する仕組みとして data-nosnippet という属性を用意しています。この記事では、まず「なぜ検索とAIによる概要の両方を同じ仕組みで制御できるのか」を公式情報で押さえたうえで、data-nosnippetnosnippetmax-snippet の使い分けと、実際のHTMLへの書き方、そして書いた後に意図どおり効いているかを確認する手順を、実装担当者の目線でまとめます。

先に用語を整理します。「スニペット」は、検索結果でページのタイトルの下に表示される説明文(抜粋文)のことです。「AIによる概要(AI Overviews)」は、検索エンジンがAIを使って検索キーワードへの回答を生成し、検索結果の最上部に表示する機能を指します。「インデックス」は、GoogleのデータベースにWebページが登録されることです。

検索とAIによる概要は「同じスニペット制御」で管理できる

最初に押さえておきたいのは、AIによる概要のために特別な設定を足す必要はない、という点です。Googleの公式ドキュメント(AI機能とウェブサイト)は「specific optimization isn't required for AI Overviews and AI Mode(AIによる概要やAIモードのための特別な最適化は不要)」と述べ、既存のSEOの基本がそのまま有効だとしています。つまり、AIによる概要向けに新しい仕組みを覚える必要はありません。

そのうえで、表示される情報を絞りたいときにどうするかも、同じ公式ドキュメントに書かれています。「To limit the information shown from your pages in Search, use nosnippet, data-nosnippet, max-snippet, or noindex controls(検索であなたのページから表示される情報を制限するには、nosnippet、data-nosnippet、max-snippet、noindex を使う)」という一文です。ここが今回の判断の土台になります。AIによる概要のための専用タグがあるのではなく、通常の検索結果のスニペットを制御するのと同じ仕組みで、表示される情報を絞る、という設計になっているのです。

言い換えると、検索結果のスニペットに出したくない部分を制御すれば、その同じ制御で、AIによる概要に渡される情報も絞れる、ということです。逆に言えば、「AIによる概要だけ止めて、通常の検索結果には出す」といった細かい出し分けは、これらの標準的な制御の範囲では想定されていません。制御は「検索でそのページから見せる情報の量」に対して働く、と捉えておくのが安全です。

3つの制御の使い分け(部分・全体・長さ)

表示を絞る手段は一つではありません。何をしたいかで、使う道具が変わります。公式ドキュメント(スニペットを管理する)は、それぞれの役割を次のように説明しています。「use nosnippet to prevent them or max-snippet to set length. The data-nosnippet attribute blocks specific content(スニペットそのものを止めるなら nosnippet、長さを決めるなら max-snippet。data-nosnippet 属性は特定の内容をブロックする)」。この一文が使い分けの核心です。

やりたいこと使う制御効く範囲向いている場面
ページ内の一部分だけ抜き出されたくないdata-nosnippet 属性囲んだ要素の中だけ価格・在庫・キャンペーン文など、変動する/引用されたくない一部分
このページの説明文を一切出したくないnosnippet(robots メタタグ)ページ全体ページごと抜粋を出したくないが検索には載せたい
説明文の文字数に上限をつけたいmax-snippet(robots メタタグ)ページ全体長い抜粋を避け、表示の長さをそろえたい

ここで判断のポイントになるのは「範囲」です。今回のように、ページの中の特定の一箇所(例:ECの価格変動パーツ)だけを対象にしたいなら、data-nosnippet が唯一の選択肢になります。nosnippetmax-snippet はページ全体に効く robots メタタグなので、一部分だけ隠す用途には使えません。逆に、そのページの説明文を丸ごと出したくない(けれど検索結果には載せたい)なら、ページ全体に効く nosnippet を選びます。

つまずきやすいのは、「一部分を隠したい」のに、ページ全体に効く nosnippet を付けてしまうケースです。これをやると、狙った一箇所だけでなく、そのページ全体の説明文が検索結果から消えてしまい、クリックされにくくなることがあります。範囲を取り違えないことが、最初の分かれ道です。

data-nosnippet の正しい書き方

data-nosnippet は、2019年にGoogleが導入した属性です。公式ブログ(スニペットのより細かい制御)は「a new way to help limit which part of a page is eligible to be shown as a snippet is the data-nosnippet HTML attribute on span, div, and section elements(ページのどの部分がスニペットに出てよいかを制限する新しい方法が、span・div・section 要素に付ける data-nosnippet 属性)」と説明しています。ここで最も重要なのが、使える要素が spandivsection の3つに限られるという制約です。

公式仕様(robots メタタグ)は、この点を具体例で示しています。次のように、spandivsection 以外のタグに付けても効きません。

<p>この文はスニペットに表示される可能性があります。</p>
<div data-nosnippet>
  <p>この部分はスニペットに含まれません。</p>
  <ul>
    <li>この項目もスニペットに含まれません</li>
  </ul>
</div>
<mytag data-nosnippet>この書き方は無効です</mytag>

最後の <mytag> のように、独自のタグや pli などに直接付けても、公式の仕様上は有効な指定として扱われません。囲みたい範囲を、必ず spandivsection のいずれかで包んでから属性を付けます。

もう一つ、実装で事故が起きやすい落とし穴があります。公式仕様には「unclosed div will include all content afterwards(閉じられていない div は、それ以降のすべての内容を含めてしまう)」という注意書きがあります。つまり、<div data-nosnippet> を開いたまま閉じ忘れると、そのページのそれ以降の内容が丸ごとスニペットから除外される、ということです。一箇所だけ隠したつもりが、ページの後半すべてが説明文に出なくなる——テンプレートに data-nosnippet を差し込むときは、開始タグと終了タグが正しく対応しているかを必ず確認してください。

ワークスルー:ECの価格パーツだけを隠す

抽象論だけでは実装に落ちないので、具体的な場面で一度通してみます。想定するのは「商品ページの価格は頻繁に変わるので、AIによる概要や検索結果に古い価格を引用されたくない。ただし商品説明は今までどおり検索に出したい」というケースです。次の順で進めます。

  1. 隠したい範囲を特定する:ページのHTMLで、価格を表示している部分を探します。多くのテンプレートでは価格が独立した要素(例:<span class="price">)になっているので、その要素が候補です。商品説明や特徴は隠さないので、対象は価格まわりだけに絞ります。
  2. span・div・section で囲む:対象が span でなければ、価格部分を <span><div> で包み直します。ここで p や独自タグのままにしないのがポイントです。
  3. data-nosnippet を付ける:囲んだ要素に属性を付けます。例:<span class="price" data-nosnippet>¥12,800</span>。閉じタグ(</span>)が対応しているかをその場で確認します。
  4. 他の箇所を隠していないか見直す:閉じ忘れがないか、商品説明まで囲みに巻き込んでいないかを、実際のHTMLソースで目視します。ここで前節の「閉じ忘れ」の落とし穴を潰しておきます。
  5. 反映を確認する:公開後、Search Consoleの「URL検査」で対象ページをテストし、再クロールをリクエストします。実際の検索結果やAIによる概要への反映には時間がかかることがあるため、すぐに変わらなくても、まずは記述が正しいことを確認しておきます。

この5ステップの結論はシンプルです。商品説明は今までどおりスニペットに出しつつ、価格の一行だけを抜き出しの対象から外せます。ページ全体を noindex にする必要も、nosnippet で説明文ごと消す必要もありません。

やりすぎると逆効果になる(過度な制限の注意)

制御できるからといって、隠す範囲を広げすぎるのは考えものです。検索結果のスニペットは、ユーザーが「このページに答えがありそうか」を判断する材料でもあります。抜き出される部分を必要以上に削ると、検索結果でページの内容が伝わりにくくなり、かえってクリックされにくくなることがあります。

そのため、data-nosnippet で囲むのは「引用されると本当に困る部分」に絞るのが実務上の勘所です。たとえば、変動する価格・未確定のキャンペーン文・競合に真似されたくない独自データなど、対象を限定します。逆に、ページの価値を伝える説明文まで囲んでしまうと、隠すことのデメリットの方が大きくなりがちです。「何を隠すか」より「何を残すか」を先に決めると、削りすぎを避けやすくなります。

なお、data-nosnippet はあくまで「スニペットに出す/出さない」を制御するものです。ページをインデックスから消したり、クロールを止めたりする仕組みではありません。ページごと検索から外したいなら noindex、AIの学習・グラウンディングでの利用を絞りたいなら別の仕組み(Google-Extended)と、目的ごとに道具が分かれます。ここを混同すると、隠したい範囲と実際に効く範囲がずれてしまいます。

反映確認と自己点検表

書いたら、意図どおりに効いているかを次の観点で自己点検してください。特に上の2行は、間違えると「隠したい所が隠れない/隠したくない所まで隠れる」に直結します。

確認したいこと見る場所危険なサイン安全なサイン
属性を付けた要素の種類HTMLソースpli・独自タグに直接付けているspandivsection で囲んでいる
開始と終了タグの対応HTMLソースdiv などが閉じられていない開始・終了タグが正しく対応
隠す範囲の広さHTMLソース説明文や本文まで囲みに入っている価格など必要な一部分だけ
ページ全体を消していないかrobots メタタグ一部分を隠す目的で nosnippet を使っている一部分は data-nosnippet、全体制御と使い分け
反映の確認Search Console のURL検査公開しただけで確認していないURL検査で再クロールをリクエスト済み

反映には時間がかかることがあるため、検索結果の表示がすぐ変わらなくても、まずは記述の正しさ(要素の種類・タグの対応・囲む範囲)を先に確認するのが近道です。表示の変化は、記述が正しいことを確かめたうえで、数日以上の単位で見守ります。

まとめ

AIによる概要や検索結果に、ページの一部分だけを引用されたくないなら、ページごと隠す必要はありません。公式ドキュメントは、検索で表示される情報を絞る手段として nosnippetdata-nosnippetmax-snippetnoindex を挙げており、AIによる概要もこの同じスニペット制御で管理できます。一部分だけを対象にしたいときは data-nosnippet が唯一の選択肢で、使える要素は spandivsection の3つ、そしてタグの閉じ忘れが最大の落とし穴です。隠す範囲は「引用されると困る部分」に絞り、削りすぎないこと。この3点を押さえれば、検索流入を失わずに、見せたくない一部分だけを安全に制御できます。

AIまわりの制御では、学習・グラウンディングでの利用を絞る Google-Extended と混同しがちです。両者の役割の違いはAIへの提供だけ止めSEOは守る|Google-Extended設定で解説しています。「スニペットの見せ方」と「AIでの利用可否」は別の仕組みなので、目的に合った道具を選んでください。

出典

  1. Google 検索セントラル - Google 検索の AI 機能とウェブサイト
  2. Google 検索セントラル - 検索結果のスニペットを管理する
  3. Google 検索セントラル - robots メタタグ、X-Robots-Tag、data-nosnippet の仕様
  4. Google 検索セントラルブログ - 検索結果のスニペットをより細かく制御できるようになります

NEXT STEP

クライアントへの説明に使える実際の画面を見てみませんか

ご自身の目で、GA4・Search Consoleのデータがどう整理されるかを確認いただけます。

無料デモを見てみる