AIツールギャラリー

Google優先ソースとは?設定方法とサイトへの公式ボタン設置手順

AIツールギャラリー編集部更新: 2026年9月17日
Google優先ソースとは?設定方法とサイトへの公式ボタン設置手順

Google検索の「優先ソース」は、読者が自分の検索結果で特定のサイトを優先表示できる機能です。サイト側は公式のボタンを設置するだけで対応できます。

設置自体はHTML2行で無料です。ただしCSP(Content Security Policy。外部の読み込み先をサイト側が宣言して制限する仕組み)を設定しているサイトは、frame-srcという設定への追加が別途必要になります。

この記事では、公式ボタンの設置手順とCSP設定サイトの注意点、設置後の動作確認までを順番に整理します。

CSPを設定しているサイトは、見た目だけでは気づけない落とし穴があるので特に読んでみてください!

この記事の監修者

山原 慎也
山原 慎也

AIリスキル株式会社 代表取締役

AIツールギャラリーを運営するAIリスキル株式会社の代表取締役。企業・自治体向けの生成AI研修とAI導入支援を手がけています。

実績: 大阪・関西万博 公式プログラム「AI HEROES COLLECTION」司会進行 / 神戸市デジタル人材育成エコシステム構築事業の運営 / MBS「せやねん!」「よんチャンTV」に生成AIの専門家として出演 / Felo日本初コアアンバサダー / Genspark第1期公式アンバサダー / Skywork公式アンバサダー / AKOOL公式パートナー など

Google「優先ソース」とは、押した読者の検索結果を変える仕組み

優先ソースは、検索ユーザーが「この情報源を自分の検索で優先したい」とGoogleアカウントへ登録する機能です。登録すると、その人の検索結果でそのサイトが優先的に表示されやすくなります。

英語の公式名はPreferred Sources、日本語の公式ドキュメントと検索ヘルプでの表記は「優先するニュース提供元」です。「優先ソース」は英語名を直訳した通称で、Googleの正式な日本語名ではありません。

検索して調べる際は、正式名と通称のどちらで探しても同じ機能にたどり着けます。この記事では読みやすさを優先し、通称の「優先ソース」で統一します。

ここで誤解しやすい点を先に正しておきます。優先ソースは、サイト全体の検索順位を押し上げる機能ではありません。

変わるのは、登録した本人の検索結果だけです。ほかの検索ユーザーの画面には何も影響しません。

検索順位が上がる施策だと考えて導入すると、期待していた効果と実際の動きがずれてしまいます。まず「個人向けの機能」だと理解しておくと、このあとの説明ともつながります。

表示される場面にも違いがあります。トップニュース(Top Stories)は全言語で対応していますが、AIモードとAIによる概要(AI Overviews)は対応しているロケールに限られます。

登録できる単位は、ドメインまたはサブドメインだけです。example.com/blogのようなサブディレクトリ単位では登録できません。

提供範囲はグローバルです。日本のアカウントとサイトでも、登録が完了するところまで当サイトで確認済みです。

以上は、サイト側の実装ではなく、検索エンジン側の仕様です。実装に進む前に押さえておいてください。

読者がボタンを押してから優先表示されるまでの流れ

サイトに埋め込める公式ボタンは、2026年8月20日にGoogleが公開しました。

ここまでが検索エンジン側の仕様です。次に、検索ユーザーとして優先ソースを設定する場合の流れを見ておきます。

検索ユーザーとして優先ソースを設定したい場合

ここからは、優先ソースを検索ユーザー側として使う場合の操作を簡単に整理します。サイトへの設置手順は、このあと別の見出しで扱います。

自分がすでに登録した優先ソースを確認・管理したい場合は、Googleの設定ページから一覧を見られます(URLは記事末の出典に記載しています)。

設定ページでは、登録済みの優先ソースを一覧で確認できます。不要になったものは、チェックを外せば優先表示の対象から外れます。

サイト側に設置された公式ボタンを押すと、Googleの登録ダイアログが開きます。登録が完了すると、読んでいたページの元の位置へそのまま戻ります。

検索結果のトップニュース枠からも、同じように優先ソースへ登録できます。この記事では設置側の実装を中心に扱うため、トップニュース側の操作手順は深追いしません。

表示されている見出しや優先マーク自体は、サイト運営者が編集できるものではなく、Google側の仕様です。

読者としてすぐ試したい場合は、まずGoogleの設定ページを開いて、自分のアカウントの登録状況を確認してみてください。

優先ソースの効果と限界、正直な期待値

優先ソースは検索順位に関わる指標ではないため、効果測定の視点を切り替えておく必要があります。

優先ソースを設置しても、検索順位が直接上がるわけではありません。順位計測ツールの数値にも変化は出ません。

順位が変わらない理由は、この機能が個人のアカウントに紐づくパーソナライズだからです。冒頭で見た仕組みのとおり、全体の検索結果には影響しません。

見るべき指標は、順位ではなく行動の変化です。ボタンのクリック数と、中長期での再訪や指名検索の推移を追うのが現実的です。

クリック数を追うには、ボタンのクリックをアクセス解析ツールのイベントとして計測する設定が必要です。具体的な実装方法は、後述するクリック計測の項目で扱います。

指名検索とは、サイト名やブランド名で検索される回数のことです。優先ソースがきっかけで増えるとすれば、まずこの指標に表れると考えられます。

順位に直接効かない機能ですが、再訪や指名検索は中長期で見ると集客に関係する指標です。効果を判断するときは、この時間軸を前提に置いてください。

当サイト(AIツールギャラリー)も2026年9月に設置したばかりで、効果を示せる実測値はまだありません。数字が取れた段階で、あらためてお伝えします。

優先ソースボタンの設置手順

ここからは実際の設置手順です。公式ボタンの最小構成、CSP設定サイトの注意点、SPAでの再初期化、クリック計測の順に進めます。

公式ボタンの最小設置(HTML2行)

ボタンを出したい場所に、次のコードをそのまま貼るだけで設置できます。

<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
<div google-add-preferred-source-btn></div>

スクリプトはasync属性で読み込まれるため、ページの表示速度への影響を抑えた作りになっています。

表示は属性で調整できます。data-theme="dark"で背景色に合わせ、data-langで表示言語を固定できます(既定は自動翻訳で、日本語環境では「優先するニュース提供元に追加」と表示されます)。

data-themeとdata-langは、指定しなければ既定の見た目と自動翻訳の文言で表示されます。まずは属性なしで試して、必要な部分だけ上書きすれば十分です。

登録対象のドメインは、ボタン側が表示中のページから自動で判定します。サイト側からドメインを指定する設定はありません。

ボタンを設置する場所に決まりはありません。記事の末尾やフッターなど、読者の目に留まりやすい位置に置くのが基本です。

JavaScriptを使わないディープリンクも用意されています。google.com/preferences/source?q=ドメイン という形のURLへ直接リンクする方法で、メール本文などHTML制約がある場所でも使えます。

ディープリンクは、スクリプトを読み込めない環境向けの代替手段です。通常のWebページでは、まず公式ボタンの設置を検討してください。

独自デザインのバッジを使う実装も、Googleに公式に許可されています。バッジを使う場合も、addPreferredSource()というAPIを公式スクリプトの読み込み後に呼び出す形になります。

独自バッジを使う場合は、Googleが配布している翻訳済みのグラフィックアセット(ZIP形式)を利用できます。デザインをゼロから作る必要はありません。

CSPを設定しているサイトの注意点(frame-srcの罠)

CSP(Content Security Policy。外部から読み込んでよいスクリプトやiframeの範囲を、サイト側が宣言する設定)は、安全性を高める一方で、許可が足りないと正規の機能まで止めてしまうことがあります。

優先ソースボタンは、この「正規の機能を止めてしまう」パターンにあたります。使っている場合は、script-srcとframe-srcの両方にnews.google.comへの許可が必要です。

script-srcはボタンの描画に使われます。frame-srcは、ボタンをクリックした後に開く登録ダイアログのために必要になります。

クリック後の登録フローは、news.google.com/swg/ui/v1/serviceiframe というURLをiframe(ページの中に別ページを埋め込む仕組み)としてページ内に開く作りです。

frame-srcが必要になるのは、ボタン本体ではなく、クリックした後の登録処理のためです。ここを見落とすと、原因がボタン自体の不具合だと誤解しやすくなります。

frame-srcの許可が抜けていると、このiframeの読み込みだけが失敗します。厄介なのは、ボタンの表示自体は正常なままで、見た目には何も異常が出ない点です。

CSP設定によるクリック後の挙動の違い

当サイトの実測(Next.js製サイトでCSPをHTTPヘッダーで配信、2026年9月に1件確認)では、frame-srcを追加するまでクリックしても登録ダイアログが開きませんでした。

開発者ツールでフレームの読み込み状況を確認し、原因にたどり着きました。

CSPを設定していないサイトでは、この問題自体が起きません。

CSPの有無を確認したい場合は、サイトのレスポンスヘッダーか、CDN・ホスティング側の設定を確認してください。

このframe-srcの要件は、2026年9月時点の公式ドキュメントには記載がありません。実装前に、最新のドキュメントを確認しておくことをおすすめします。

SPA(Next.js等)でのボタン再初期化

通常のHTMLサイトであれば、ここまでの設置で完了です。SPAの場合は、ページ遷移の仕組みが影響するため、もう一手間かかります。

SPA(Single Page Application。画面遷移のたびにページ全体を読み込み直さず、JavaScriptで表示を切り替えるサイト)では、スクリプトの読み込み時に存在したボタン枠しか描画されません。

クライアント遷移で別のページへ移動すると、新しいボタン枠は空のままになります。当サイトでも2026年9月の実装時に同じ挙動を確認しました。

対処には、公式が用意しているコールバックキューを使います。ボタン枠を表示するコンポーネントのマウント時に、初期化を積み直します。

useEffect(() => {
  (window.PREFERRED_SOURCE = window.PREFERRED_SOURCE || []).push(
    (api) => api.init()
  );
}, []);

init()は未初期化のボタン枠だけを対象にするため、遷移のたびに積んでも二重に描画されません(2026年9月時点の配布スクリプトでの当サイト実測)。

この仕組みにより、ページ遷移のたびに同じ処理を呼び出しても、既存のボタンを壊したり重複させたりする心配はありません。

data-themeは初期化時の値で固定され、あとからサイト側でテーマを切り替えても追従しません。ダーク/ライトを切り替えるサイトは、両テーマ分のボタンを描画し、CSSで表示・非表示を出し分けます。

テーマの固定は、初期化した時点のdata-theme属性が、そのままボタンの見た目として焼き込まれるために起きます。

ボタンの描画高さは、当サイトの実測で40pxでした。ボタン枠にmin-heightを設定しておくと、描画時のCLS(Cumulative Layout Shift。読み込み中に表示位置がずれる現象)をゼロにできます。

描画高さをあらかじめ確保しておく工夫は、読み込みの遅い回線でも表示を安定させます。

クリック計測を足す場合

ボタンはiframeではなく、ページの中に直接描画されます(shadow DOM。ページの要素の内部に、外からは見えにくい形で組み込む仕組み)。

クリックイベントは、ボタンを囲むコンテナ要素までバブル(伝播)します。onClickCaptureなどでコンテナ側から拾えば、計測ツールへイベントを送れます。

この計測を追加すると、先ほど触れたクリック数の指標を、アクセス解析ツール側で追えるようになります。

計測イベントの送信先は、GA4やPostHogなど、サイトですでに使っている解析ツールに合わせて選んで問題ありません。

ただし計測できるのは「押された」ところまでです。Google側で登録が完了したかどうかまでは取得できません。

登録の完了状況まで追いたい場合でも、Google側からその情報を取得する手段は用意されていません。

設置後の動作確認チェックリスト

このボタンは「表示される」ことと「登録できる」ことが別物です。設置後は、次の5項目を順に確認してください。

  1. ライト/ダーク両方のテーマで、ボタンが正しく表示されるか
  2. クリックしてGoogleの登録ダイアログが開くか(開かない場合はCSPのframe-srcを疑う)
  3. Googleの設定ページに、登録した優先ソースとして載っているか
  4. 開発者ツールでCSPのエラーと、iframeの読み込み状況を確認できるか
  5. SPAのサイトは、別ページへ遷移した後もボタンが表示されるか

1番のテーマ表示は見た目の確認、3番はGoogle側での登録確認という役割です。4番は原因調査、5番はSPA固有の確認にあたります。

この中でも特に重要なのは2番です。CSPを設定しているサイトは、ダイアログが開くかどうかを最優先で確認してください。

開けば、frame-srcの設定は機能しています。

SPAのサイトは、初回表示のページだけでなく、遷移後のページでも同じ手順を一通り試すことをおすすめします。

設置完了までの2段階チェック

5項目を一通り確認してから公開すると、設置漏れに気づかないまま運用してしまうことを防げます。

よくある質問

優先ソースを設置すると、検索順位は上がりますか

上がりません。変わるのは、登録した読者本人の検索結果だけです。

検索順位を伸ばしたい場合は、優先ソースとは別の施策で対応する必要があります。

サブディレクトリ(example.com/blog)単位で登録できますか

できません。登録できる単位は、ドメインまたはサブドメインだけです。

複数のサブドメインを運用している場合は、それぞれ個別に登録が必要になります。

公式のデザインとは違う、独自のボタンを使えますか

使えます。Googleは独自バッジでの実装を公式に許可しており、翻訳済みのグラフィックアセットも配布しています。

配布されているアセットには、多言語向けの翻訳済みバージョンが含まれています。

独自バッジを使う場合、公式スクリプトは不要になりますか

いいえ、必要です。独自バッジからaddPreferredSource()というAPIを呼び出す形になるため、公式スクリプトの読み込みは変わらず必要です。

設置した効果はどう測定すればよいですか

順位計測ツールでは変化を確認できません。ボタンのクリック数と、中長期での再訪や指名検索の推移を見ます。

GA4やPostHogなどの解析ツールを使っている場合は、設置手順で紹介したクリック計測の実装が参考になります。

設置に費用はかかりますか

かかりません。公式ボタンの設置は無料です。

設置にあたって、Google側への申請や審査といった手続きも必要ありません。

費用がかからない分、実装の正しさは自分たちで確認する必要があります。CSPの注意点と動作確認チェックリストは、そのために置いています。

まとめ、まず自分のサイトで1回登録まで通す

設置作業は、公式のHTML2行、CSP設定サイトなら追加の2行、SPAなら再初期化のコード1つです。ここまで済ませたら、チェックリストの2番、クリックで登録ダイアログが開くところまで確認してください。

CSPを設定していないサイトであれば、多くの場合は公式の2行だけで完了します。CSPを設定している場合ほど、見た目だけで判断せず、クリック後の挙動まで確かめる価値があります。

当サイト(AIツールギャラリー)でも、全ページのフッターと記事末尾に実物のボタンを設置しています。挙動を確認したい場合は参考にしてください。

優先ソース以外のAIツールに関する記事は、記事一覧からも探せます。

Preferred Sources対応を含む、AI検索時代のSEO・技術実装のご相談

優先ソースの設置のように、公式ドキュメントだけでは実装しきれない技術対応も出てきます。CSPやSPAの構成を含めたSEO・AI検索対応をどこから整理すればよいか迷っている場合は、ご相談ください。

お問い合わせはこちら

この記事の出典

この記事は役に立ちましたか?

感想は、今後の記事改善に活用します。

関連記事

アモデイCEOの「AI開発のペース調整」とは?企業のAI利用で見直す4項目
解説・ガイド2026年9月15日

アモデイCEOの「AI開発のペース調整」とは?企業のAI利用で見直す4項目

Dario Amodei氏の「We Must Pace the Frontier」を、一般企業のAI利用にどう関係するかという視点で整理。利用の全面停止ではなく、外部送信や更新などの権限を広げる前に確認する4項目を解説します。

ログイン不要で使えるAI|登録なしで試せたもの、途中で止まったものを実際に確かめました
解説・ガイド2026年9月11日

ログイン不要で使えるAI|登録なしで試せたもの、途中で止まったものを実際に確かめました

登録もログインもせずにAIを試せるのか、2026年9月11日に11のサービスを未ログインで開いて確かめました。使えたものと、生成の一歩手前で止まったものの両方を、実際の画面とあわせて整理します。

PixAIのウェブ版とは?登録前に見られる範囲とモデル・LoRAの選び方、料金まで
ツール紹介2026年9月10日

PixAIのウェブ版とは?登録前に見られる範囲とモデル・LoRAの選び方、料金まで

PixAIのウェブ版は、サインインしなくてもモデルを探して中身を確認できます。生成にはサインインが必要です。登録前に見られる範囲と、モデルとLoRAの選び方、料金までを整理しました。

【令和8年8月3日改正対応】AI研修の企画書を判定軸に沿って組み直す手順|研修名・時間数・受講者の決め方
解説・ガイド2026年9月9日

【令和8年8月3日改正対応】AI研修の企画書を判定軸に沿って組み直す手順|研修名・時間数・受講者の決め方

令和8年8月3日の改正後に、AI研修の企画書をどう引き直すかを手順で解説。研修名の粒度、カリキュラムからの汎用パートの切り出し、実訓練時間と回数の決め方、受講者名簿の絞り込み、計画届からの逆算までを整理しました。

次のAIツール選びへ

気になるツールを並べて、料金や特徴の違いを確認できます。