Googleの「優先する情報源」ボタンを自分のサイトに置いてみた｜メリットとデメリット
かつ
2026/08/21
2026年8月20日、Googleが検索・Discover・ニュースの「読者が自分で見たいものを選ぶ」機能をまとめて発表しました。その中に、サイト運営者が自分のサイトに置けるボタンが含まれています。
読者がそのボタンを押すと、その人の検索結果でこのサイトの記事が出やすくなる、というものです。カツプロにも実際に設置してみたので、仕組みと、入れる価値があるサイト・無いサイトを整理します。
3行でまとめると
- 読者が押すと、その読者の検索結果で自分のサイトが優先表示されるボタンを、HTML2行で設置できる
- 効果があるのは押した読者だけ。検索順位そのものが上がる機能ではない
- 登録の単位はドメイン／サブドメイン。サブディレクトリ単位では登録できない
何が発表されたのか
Google公式ブログの Personalize what you see on Google Search, News, Discover で発表されたのは3つです。
- 優先する情報源（Preferred Sources）ボタン — サイト側に置ける登録ボタン。すでに60万件以上のサイトが誰かに選ばれているとのこと
- Discoverの絞り込み — Googleアプリで、自分の言葉で「この話題をもっと」と打ち込むとフィードがその場で変わる
- 音声ニュースブリーフィング — Googleニュースアプリ（Android）でトピックを選び、音声のブリーフィングを作れる。出典表示と元記事リンク付き
このうちサイト運営者に直接関係するのが1つ目です。
「優先する情報源」とは何か
読者が「このサイトの記事を優先して見せてほしい」とGoogleに登録する機能です。登録されると、その読者のトップニュース（Top Stories）・AIによる概要（AI Overviews）・AIモードでそのサイトの記事が出やすくなります。
これまでもGoogle側の設定画面から、読者が自分でサイト名を検索して登録することはできました。今回変わったのは、サイト側にボタンを置けるようになったことです。読者は記事を読んだその場で、ページを離れずに登録できます。
設置はHTML2行
まず、ライブラリを読み込みます。<head> の中に置くのが推奨です。
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
そして、ボタンを出したい場所にこの空の div を置きます。
<div google-add-preferred-source-btn></div>
これだけです。data-theme 属性に light か dark を指定すればテーマを変えられます。ボタンの文言はGoogleが読者の言語に合わせて自動で訳すので、日本語環境では「優先するニュース提供元に追加」と表示されます。
さらに細かく制御したい場合は、スクリプトタグに preferred-sources-control="manual" を付けて、自分で用意したボタンに動作を結びつけることもできます。
実際に置いてみた
カツプロでは記事の末尾、シェアボタンの下に置きました。
押すとボタンが「追加しました」に変わり、Googleから通知が出ます。
Google側の「ニュース提供元の優先度」を開くと、登録されたサイトが一覧で確認できます。読者はここからいつでも解除できます。
一覧にはサイトのファビコンが並びます。ここが灰色の地球儀アイコンになっていると一気に素人くさく見えるので、ファビコンが正しく認識されているかは先に確認しておいたほうがいいです。
メリット
コストがほぼゼロ
HTML2行だけで、外部ライブラリの追加もビルドの変更も要りません。試して合わなければ2行消せば終わりです。
リピーターを検索結果に持ち込める
すでに読んでくれている人の検索結果に、自分の記事が優先的に出るようになります。SEOで新規を取りにいくのとは別のルートで、指名検索に近い効果が積み上がっていきます。
AIによる概要・AIモードにも効く
流入がAI経由に移りつつある今、AIの回答に自分のサイトが引用される確率を、読者側から押し上げられる数少ない手段です。
押し売りにならない
登録した読者がGoogle側の画面からいつでも解除できます。サイト側が勝手に何かを仕込むわけではないので、読者に負担をかけません。
デメリットと注意点
効くのは押した人だけ
これが一番大事なところです。検索順位そのものが上がるわけではありません。読者が0人なら効果も0です。すでに読者がいるメディア向けの機能で、立ち上げ直後のサイトが急いで入れても意味は薄いです。
登録の単位がドメイン／サブドメイン
https://example.com/blog のようなサブディレクトリ単位では登録できません。サービスサイトの中にブログがある構成だと「ブログだけ登録してもらう」ができず、サイト全体が情報源として登録されることになります。ここは入れる前に考えておいたほうがいい点です。
外部スクリプトが1本増える
news.google.com のライブラリを読み込みます。async なので表示速度への影響はほぼありませんが、CSP（Content-Security-Policy）を設定しているサイトは script-src などに https://news.google.com を追加しないと、いずれブロックされます。忘れやすいところです。
ボタンが出たり出なかったりする（一番ハマったところ）
設置した直後、ボタンが出るページと出ないページがありました。この記事も公開直後は出ませんでした。
原因は publisher.js の中を読んで分かりました。このライブラリはスクリプトが実行された瞬間に一度だけ document.querySelectorAll('[google-add-preferred-source-btn]') を走らせる作りで、DOMContentLoaded を待ちません。ボタンの div を記事の末尾に置いていると、ライブラリのほうが先に走ったときにボタンが作られないまま終わります。
ヘッドレスブラウザで確認したところ、同じページでも読み込みのタイミングによって結果が変わりました。
1回目: ボタン0個 → 表示されない
2回目: ボタン1個 → 表示される
3回目: ボタン1個 → 表示される
対処は、div より後ろに置いたスクリプトから初期化をもう一度依頼することです。ライブラリは初期化済みの要素に data-initialized を付けて次から無視するので、二重にボタンが作られる心配はありません。
読み込みに失敗すると空箱が残る
ボタンはGoogleのスクリプトが後から描画します。つまり描画されなければ、見出しと説明文だけが残った空っぽの枠が記事末尾に居座ります。
この2つをまとめて解決したのが次のコードです。枠は最初から display: none（下の例では hidden クラス）にしておき、ボタンが描画されたことを確認してから外します。
const box = document.getElementById('pref-src-box');
const slot = box.querySelector('[google-add-preferred-source-btn]');
// ライブラリがこのdivより先に走っていた場合に備えて、初期化をもう一度依頼する
(window.PREFERRED_SOURCE = window.PREFERRED_SOURCE || []).push(api => api.init());
// ボタンが描画されたら枠を表示する
let tries = 0;
const timer = setInterval(() => {
if (slot.children.length || slot.innerHTML.trim()) {
box.classList.remove('hidden'); // 描画されたので表示
clearInterval(timer);
} else if (++tries > 40) { // 10秒待ってダメならあきらめる
clearInterval(timer);
}
}, 250);
このスクリプトは必ず div より後ろに置いてください。前に置くと、依頼した時点でまだ div が存在せず、同じ問題が起きます。
入れるべきサイト、そうでないサイト
判断の軸は「読者が繰り返し来るサイトかどうか」の一点だと思います。
- 記事を定期的に出しているメディア → 入れる価値あり。読者が増えるほど効いてきます
- 企業サイト・サービス紹介サイト → 不要。読者に押す動機がありません
- 立ち上げ直後のサイト → 記事と読者が増えてからで十分です
- ニュース性のある発信をしている → 相性が良い機能です
カツプロは3つのサイトに入れました。判断が微妙だったのはカツプロ自身で、サービスサイトの中にブログがある構成なので、ドメイン全体が情報源として登録されることになります。それでも入れたのは、AI・Web関連の発信を続けていく前提だからです。
まとめ
派手な機能ではありませんが、2行で入って、効果は読者が増えるほど積み上がるという性質は悪くありません。順位が上がる魔法ではなく、すでにいる読者との接点を1本増やす道具として見るのが正しい距離感だと思います。
もしこの記事が役に立ったら、この下のボタンから試してみてください。押した後の挙動を自分で確かめるのが、一番早い理解になります。
参考リンク
この記事の著者・監修
カツ
カツプロ運営者のカツです！ AI・Web関連から、日常のことなど、私目線の回答も交えながらお伝えします！
この記事をシェア