Google Preferred Sources 実践入門 - 埋め込みボタンの実装とAI検索時代の指名流入

検索結果の上にAIの回答が置かれるようになってから、「検索順位は落ちていないのにクリックが減った」という話をよく聞くようになりました。順位というレバーだけを握っていても流入が守れないなら、別のレバーが要ります。

Googleが2026年8月20日に公開した新しい個人化機能は、そのレバーのひとつです。パブリッシャーが自分のページに埋め込めるインタラクティブな「Preferred Sources」ボタンが提供され、読者がそれを押すと、そのサイトがGoogle上の優先ソースとして登録されます。順位を上げにいくのではなく、読者に指名してもらうという方向の施策です。

この記事では、優先ソース（Preferred Sources）という機能そのものの仕様と経緯、8月20日に何が変わったのか、3種類の実装方法とNext.jsへの組み込み例、埋め込むライブラリが内部で何をしているのか、そして「導入したとして効果をどう測るのか」までを、Google公式ドキュメントを出典に整理します。

8月20日に発表されたのは3つ

Google Search Ecosystem部門のGeneral Manager、Mrinalini Loew氏の名前で公開された発表には、3つの機能が含まれています。

1. Preferred Sources ボタン: パブリッシャーが自サイトに埋め込めるインタラクティブなボタン。読者がクリックすると優先ソースとして登録され、元のページの読んでいた位置にそのまま戻る。
2. Discover フィードの自然言語カスタマイズ: Googleアプリのフィード上の3点メニューから、見たい／見たくないトピックを自分の言葉で入力できる。「キッチンのリノベのアイデア（エコフレンドリーなものだけ）」のような指定が可能で、フィードは即座に調整され、指定は記憶される。発表時点で「in the coming days」（数日以内）の提供。
3. Google News の音声ブリーフィングのカスタマイズ: Android版Google Newsアプリで、日々の音声ブリーフィングのトピックを選べる。出典表示と全文記事へのリンク付き。

パブリッシャー側に手を動かす余地があるのは1番目だけなので、以降はこれを掘ります。発表では現時点で 60万を超えるユニークなソース がユーザーによって選択されたとされています（原文は "people have already selected more than 600,000 unique sources"）。TechCrunchの記事によれば、これは2026年5月時点の34万5000超からの増加です。

そもそも優先ソースとは何か

優先ソース（Preferred Sources）は、ユーザーが「このサイトの記事を優先的に見せて」と指定できる機能です。検索結果の「トップニュース」の見出しの横にある星型アイコンから設定でき、選んだサイトの記事はトップニュースに出やすくなり、「優先」バッジ付きでハイライトされます。

公式ドキュメントの日本語版は、この挙動を次のように説明しています。

ユーザーがサイトを優先ソースとして選択すると、「トップニュース」にコンテンツが表示される可能性が高まり、「優先」バッジが付いてハイライト表示されます。AI モードと AI による概要では、サイトを優先ソースとして選択したユーザーに対して、コンテンツに「優先」バッジが付いてハイライト表示されます。

重要なのは後半です。優先ソースの効果は従来型の検索結果だけに閉じておらず、AI モードと AI による概要（AI Overviews）にも及びます。AIが答えを組み立てる面でも、ユーザーが指名したサイトが優遇されるという設計になっています。

提供状況と対象の粒度

粒度の制約は実務上わりと効きます。https://www.example.com/ や https://code.example.com/ は優先ソースの対象になりますが、https://www.example.com/blog のようなサブディレクトリは対象外です。企業サイトのサブディレクトリでオウンドメディアを運用している場合、この機能で指名を集めることはできません。メディアを独立したサブドメインに切るかどうかという、サイト設計の初期判断にそのまま跳ね返ってきます。

日本語で使えるようになったのは2026年5月

機能自体はこの8月に生まれたものではありません。時系列を整理すると次のようになります。

• 2025年6月: Google Labsの実験として開始
• 2025年8月: 米国とインドで一般提供
• 2025年12月: 英語圏でグローバル提供
• 2026年5月1日: 日本語を含む全サポート言語で提供開始
• 2026年8月20日: パブリッシャー向け埋め込みボタンを公開

日本語対応を告知した2026年5月1日の記事で、Googleは効果についてこう書いています。

実際に、特定のサイトをお気に入りの情報源として設定した後は、読者がそのサイトをクリックしてアクセスする割合が 2 倍にのぼります。これまでに、地域特化型のブログから世界的なニュースメディアまで、20 万件以上の多種多様なサイトがユーザーによって選択されています。

クリック率が2倍という数字はGoogleの自社調査で、外部検証されたものではない点は差し引いて読む必要があります。ただ、方向としては直感に反しません。自分で指名したサイトなのだから、クリックされやすいのは当然です。

なぜ「指名」が施策になったのか

この機能が今このタイミングで強化された背景には、AI検索によるクリック減があります。

Pew Research Centerが2025年7月22日に公開した調査は、米国の成人900人の実際のブラウジングデータ（2025年3月、6万8879件の検索）を分析したものです。結果は次の通りでした。

• AIによる要約が表示された検索: 従来型の検索結果リンクをクリックしたのは 訪問の8%
• AIによる要約が表示されなかった検索: 訪問の15%
• 要約の中のリンクがクリックされた割合: 訪問の1%
• 要約ありのページ訪問後にセッションを終了した割合: 26%（要約なしでは16%）

クリック率が15%から8%へ、ほぼ半減しています。順位を1つ上げる努力よりも、そもそも「検索結果からクリックが発生しない」という構造変化のほうが大きい、という状況です。

TechCrunchはこの発表を、まさに「AI検索がウェブに送るクリックを減らしているなかで、パブリッシャーがトラフィック減と戦う新しい手段」と位置づけています。順位を競う SEO に対して、読者からの指名を積み上げる施策、という整理です。SEOの代わりになるものではありませんが、順位に依存しない流入の土台を少しずつ作る、という性格の打ち手だと考えるのが妥当でしょう。

実装方法は3つ

公式ドキュメントは3つの実装を提示しています。どれも必須ではありません。ドキュメントにも「It's not required to do them in order to appear as a preferred source」（優先ソースとして表示されるために必須ではない）と明記されています。あくまで読者を誘導するための手段です。

前提: ソース設定ツールに自サイトが出るか確認する

実装の前に、ソース設定ツールの検索ボックスに自分のドメインを入れて、候補として表示されるかを確認します。ここに出てこないサイトは、ボタンを置いても登録できません。

1. 標準JavaScript実装（推奨）

HTMLに2行足すだけです。1行目はライブラリの読み込みで、head 要素に入れることが推奨されています。

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

2行目の div を置いた位置に、Googleスタイルのボタンが描画されます。このボタンはブラウザの言語設定に応じて自動でローカライズされるので、多言語サイトでも文言を用意する必要がありません。

テーマはデフォルトがライトで、data-theme 属性で切り替えます。

<div google-add-preferred-source-btn data-theme="dark"></div>

言語を固定したい場合は data-lang を使います。指定できるコードは公式の言語コード一覧CSVにあり、2026年8月21日時点で51言語、日本語は ja として含まれています。

<div google-add-preferred-source-btn data-lang="ja"></div>

2. 独自デザインで組み込むJavaScript実装

自前のボタンデザインを使いたい場合や、読了率などのタイミングで出したい場合は、プログラムから明示的に呼び出します。ESモジュール版と、従来のスクリプトタグ版の2通りが用意されており、機能は同一です。

import { preferredSource } from
  "https://news.google.com/swg/js/v1/publisher.mjs";
 
// 1. Initialize directly using the imported module instance
preferredSource.init({
  theme: 'light', // Theme choice: "light" or "dark" (default "light")
  lang: 'en'      // Optional: override language (defaults to page language)
});
 
// 2. Programmatically bind flow invocation using a click handler
const button = document.querySelector('#myButton');
button.onclick = () => {
  preferredSource.addPreferredSource();
};

スクリプトタグ版では、自動描画を止めるために preferred-sources-control="manual" を付けてライブラリを読み込み、グローバルのコールバックキュー PREFERRED_SOURCE 経由で初期化します。

<script async preferred-sources-control="manual" src="https://news.google.com/swg/js/v1/publisher.js"></script>

(self.PREFERRED_SOURCE = self.PREFERRED_SOURCE || []).push(
  function(preferredSource) {
    // 1. Initialize with options
    preferredSource.init({
      theme: 'light',
      lang: 'en'
    });
 
    // 2. Programmatically bind trigger button
    const button = document.querySelector('#myButton');
    button.addEventListener('click', () => {
      preferredSource.addPreferredSource();
    });
});

preferred-sources-control="manual" を省略すると、ライブラリは google-add-preferred-source-btn 属性を持つ要素をDOMから探して即座に初期化してしまいます。手動制御したいときは必ず付けてください。動作するサンプルは公式のデモページで確認できます。

3. ディープリンク実装

CMSの都合でJavaScriptを差し込めない場合の代替です。ソース設定ツールへ直接飛ばします。SNS投稿やメールマガジンにも貼れるので、実は使いどころが広い方法です。

URLの形式は次の通りで、example.com を自分のドメインに置き換えます。

https://www.google.com/preferences/source?q=Your_Website's_URL

<a
  href="https://www.google.com/preferences/source?q=example.com">
  Add as Preferred Source
</a>

<a
  href="https://www.google.com/preferences/source?q=example.com">
  <img src="path/to/your/button.png" alt="Add as Preferred Source">
</a>

画像は自作してもよいですが、Googleが多言語版の公式バッジアセットをZIPで配布しています。日本語版も含まれています。

ディープリンク方式は、ボタンを押すと読者がGoogleのページへ離脱する点が標準JS実装との決定的な違いです。標準JS実装が「seamless」と繰り返し説明されているのは、この離脱が起きないからです。

Next.js App Routerへの組み込み

このブログと同じNext.js App Router構成でボタンを置く場合、ライブラリの読み込みは next/script に任せ、ボタン本体はプレースホルダの div を置くだけで済みます。

import Script from 'next/script';
 
export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="ja">
      <body>
        {children}
        <Script
          src="https://news.google.com/swg/js/v1/publisher.js"
          strategy="afterInteractive"
        />
      </body>
    </html>
  );
}

export function PreferredSourceButton() {
  return <div google-add-preferred-source-btn="" data-theme="dark" data-lang="ja" />;
}

TypeScriptでは google-add-preferred-source-btn のような独自属性がJSXの型定義に存在しないため、そのままでは型エラーになります。値に空文字を渡す書き方（上の例）で通ることが多いですが、通らない場合は属性を宣言してしまうのが確実です。

import 'react';
 
declare module 'react' {
  interface HTMLAttributes<T> {
    'google-add-preferred-source-btn'?: string;
    'data-theme'?: 'light' | 'dark';
    'data-lang'?: string;
  }
}

配置場所は、記事末尾やプロフィール欄など読み終わった読者の目に入るところが素直です。読む前の読者に「優先ソースに追加してください」と頼んでも動機がありません。サイドバーに常設するより、記事を読み切った直後に出すほうが理にかなっています。

publisher.js は中で何をしているのか

埋め込むスクリプトの正体を確認しておきます。https://news.google.com/swg/js/v1/publisher.js は約245KBのバンドルで、実体は SwG（Subscribe with Google）のパブリッシャー向けライブラリです。バンドル内には https://news.google.com/swg/js/v1/swg.js や /swg/_/api/v1 といった、購読機能まわりのパスが同居しています。優先ソースのボタンは、既存のSwG基盤に相乗りする形で追加された機能だとわかります。

執筆時点で配信されているバージョンは、バンドル内の定数として 1.0.160 と記録されていました。

ボタンのクリック後の流れは、バンドル内の識別子から読み取れます。addPreferredSource という名前のアクティビティを起動し、news.google.com オリジンのUIとの間でオリジン検証付きのチャンネルを張り、結果を受け取ります。結果として返る状態は次の4つが定義されています。

処理が終わると flavor: "preferred_source" を持つトーストが元のページ上に表示されます。ページ遷移ではなくオーバーレイと postMessage で完結しているため、公式ブログが言う「読んでいた場所にそのまま戻る」が成立しているわけです。

効果はどう測るのか

ここが正直に言って弱いところです。執筆時点で、優先ソースへの追加数をパブリッシャー側が知る公式の手段はありません。Search Centralのドキュメントにも、Search Consoleのレポートに関する記載はありません。「何人が自サイトを優先ソースに登録したか」を示す数値は提供されていない、というのが現状です。

現実的にできるのは、次の2つの間接的な計測です。

1. ボタンのクリックをイベントとして計測する: GA4を組み込んでいるなら、独自デザイン実装（方式2）にして addPreferredSource() を呼ぶ前に自前のイベントを送るのが素直です。標準実装（方式1）はGoogleが描画したボタンなのでクリックを捕まえにくく、計測したいなら方式2を選ぶ動機になります。ただしこれで測れるのは「押した人数」であって「登録が完了した人数」ではありません。
2. Search Consoleでトップニュース経由の推移を見る: 検索での表示回数やクリック数の変化を長期で追う方法ですが、他の要因と切り分けられないため、あくまで傍証です。

登録完了数が測れない以上、この施策は「短期のKPIを動かすもの」ではなく、読者との関係を少しずつ資産化する施策として扱うのが実態に合っています。導入コストが2行である以上、費用対効果を厳密に測る必要もあまりない、とも言えます。

導入前のチェックリスト

• ソース設定ツールで自ドメインが候補に出るか確認した
• 対象がドメインまたはサブドメインである（サブディレクトリのメディアではない）
• 実装方式を選んだ（離脱させたくないならJS方式、CMS制約があるならディープリンク方式）
• ボタンの配置を記事末尾など読了後の位置にした
• async を付け、読み込むページを必要な範囲に絞った
• ダーク／ライトのテーマがサイトのデザインと合っているか目視した
• 計測が必要なら方式2にしてクリックイベントを仕込んだ
• 実装の根拠として英語版のドキュメントを参照した（日本語版は未更新）

まとめ

• 2026年8月20日、Googleはパブリッシャーが自サイトに埋め込める Preferred Sources ボタンを公開した。クリックしても読者は元のページの読んでいた位置に戻る。
• 優先ソースに選ばれると、トップニュースに加えてAI モードと AI による概要でも「優先」バッジ付きでハイライトされる。対象はドメイン／サブドメイン単位で、サブディレクトリは対象外。
• 日本語を含む全サポート言語での提供は2026年5月1日から。Googleは指名後のクリック率が2倍、選択されたソースは60万超と発表している（いずれも自社発表の数値）。
• 背景にはAI検索によるクリック減がある。Pewの調査では、AI要約があると検索結果のクリック率が15%から8%へ落ちている。
• 実装は標準JS（2行）、独自デザインJS、ディープリンクの3方式。日本語ドキュメントは未更新なので英語版を見ること。
• 追加数を知る公式の手段は執筆時点で存在しない。短期KPIではなく、読者との直接的な関係を積み上げる施策として扱うのが妥当。

順位を上げるための施策と違って、この機能は読者が自分の意思でサイトを選ぶことが前提になっています。ボタンを置いたところで、押してもらえる記事を書いていなければ何も起きません。裏を返せば、繰り返し読まれているメディアにとっては、その関係をGoogleの側にも登録してもらえる手段が2行で用意された、ということでもあります。

参考リンク

• Personalize the content you see on Search, Discover, and News - Google公式ブログ（2026年8月20日）
• Guide to Preferred Sources in Google Search for Web Publishers - Google Search Central（英語版・実装の正）
• Google 検索 の Preferred Sources 機能が日本語で利用可能に - Google Japan Blog（2026年5月1日）
• Google gives publishers a new way to fight AI-driven traffic losses - TechCrunch
• Google users are less likely to click on links when an AI summary appears in the results - Pew Research Center
• Preferred Sources demo - 公式の実装デモ