マーケティングセクション・Web ディレクショングループの中澤です。おはこんばんちは！
今回は、Google 検索の「優先ソース（Preferred Sources）」についてご紹介します。
2026年8月20日、Google は Web サイトに設置できる新しいインタラクティブな「優先ソース」ボタンを公開しました。
「これはオウンドメディアにも使えそうだな……」
ということで、早速、この iret.media に実装してみました！
実装自体は思っていた以上に簡単でしたが、実際のメディアへ組み込んでみると、
- そもそも自分のサイトは「優先ソース」の対象なのか？
- どこにボタンを配置するのが自然なのか？
- 既存の SNS シェアボタンとはどう並べる？
- ダークモードではどうする？
などなど、コードを書く以外にも考えるポイントがありました。
本記事では「優先ソース」の仕組みを簡単にご紹介しつつ、実際に iret.media へ実装した方法や、設置する際に考えたことをご紹介します。
先に結論を書くと、対象サイトであれば Google が提供する JavaScript と HTML を追加するだけで、「優先ソースに追加」ボタンを設置できます。
Google 検索の「優先ソース（Preferred Sources）」とは？
「優先ソース（Preferred Sources）」は、Google 検索を利用するユーザーが、お気に入りの Web サイトや信頼している情報源を「優先ソース」として設定できる機能です。
優先ソースに設定すると、検索内容に関連する新しいコンテンツがある場合、そのサイトの記事が Google 検索の「トップニュース」に表示される可能性が高くなり、「優先」バッジが付いて表示されます。
また、現在は「AI による概要（AI Overviews）」や「AI モード」でも、優先ソースに設定したサイトのコンテンツが「優先」バッジ付きで表示される場合があります。
Google の公式ドキュメントでは、以下のように説明されています。
ユーザーがサイトを優先ソースとして選択すると、「トップニュース」にコンテンツが表示される可能性が高まり、「優先」バッジが付いてハイライト表示されます。
ここで大切なのは、Web サイト運営者が Google に申請して検索順位を上げるような仕組みではないということ。
「このサイトの記事をまた読みたい」
と思ったユーザー自身が設定する、Google 検索のパーソナライズ機能です。
2026年8月20日、Google が「優先ソース」ボタンを公開
「優先ソース」自体は、今回初めて登場した機能ではありません。日本語での提供は2026年5月1日に発表され、その後、「AI による概要」や「AI モード」でも、優先ソースに設定したサイトのコンテンツが「優先」バッジ付きで表示される場合があります。
今回、個人的に気になったのが、2026年8月20日のアップデートです。
Google は、Web サイトへ直接設置できる新しいインタラクティブな「優先ソース」ボタンを公開しました。
Google の公式ブログでは、以下のように紹介されています。
We’re releasing a new interactive “Preferred Sources” button that publishers can embed on their pages.
出典：Google Blog
これまでのように Google 側の設定画面から探して登録するだけではなく、Web サイトを読んでいるユーザーに対して、サイト側から「優先ソースへの追加」を案内できるようになったわけです。
しかも、ボタンから追加した後は、閲覧していたページへそのまま戻ってこられます。
それなら、早速入れてみよう！
ということで、ここからは iret.media に実装していきます。
【やってみた①】iret.media が優先ソースの対象か確認してみる
コードを書く前に、まず確認しておきたいことがあります。
そもそも自分の Web サイトは「優先ソース」に設定できるのか？
Google には「ソース設定ツール」が用意されています。
アクセスすると検索フォームが表示されるので、サイト名やドメインを入力します。
今回は iret.media で検索してみます。
おお、ちゃんと出てきました！
このように自分のサイトが検索結果に表示されれば、ユーザーが「優先ソース」として設定できます。
サブディレクトリ型のオウンドメディアは対象外
なお、優先ソースとして設定できるのは、ドメインまたはサブドメイン単位です。
example.com → 対象 media.example.com → 対象 example.com/blog/ → 対象外
Google の公式ドキュメントでも、サブディレクトリ単位では優先ソースとして設定できないとされています。
そのため、企業サイトの配下に /blog/ や /media/ といった形でオウンドメディアを構築している場合、そのディレクトリだけを独立した優先ソースとして登録することはできません。
ここは事前に確認しておいた方がよさそうです。
【やってみた②】「優先ソース」ボタンを実装してみる
対象になっていることが確認できたので、実際に実装してみます。
2026年8月23日時点では、今回追加されたインタラクティブボタンの実装方法は英語版の公式ドキュメントに掲載されています。
Google の英語版の公式ドキュメントでは、標準の JavaScript を使った方法や、カスタムデザイン向けの JavaScript、ディープリンクを使った方法など、いくつかの実装方法が案内されています。
その中でも、Google が推奨しているのが標準の JavaScript を使った実装方法です。
Google の公式ドキュメントでは、読者にとって最も良いユーザー体験を提供できる方法として推奨されており、わずか2行の HTML を追加するだけで、Google 公式デザインのインタラクティブなボタンを設置できます。
今回は iret.media でも、この推奨されている方法で実装してみました。
JavaScript を読み込む
まず、Google が提供している JavaScript を読み込みます。
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
Google のドキュメントでは、<head> 内への追加が推奨されています。
ボタンを表示する
続いて、ボタンを表示したい場所へ以下を追加します。
<div google-add-preferred-source-btn></div>
……基本的には、これだけです。
もちろん、実際に組み込む際は、サイトのレイアウトに合わせて CSS で調整する必要があります。
Google の「G」ロゴとともに「優先するニュース提供元に追加」というボタンが表示されました。
思っていた以上に簡単！
JavaScript と HTML をそれぞれ追加するだけなので、既存サイトにも比較的導入しやすいのではないでしょうか。
【やってみた③】ダークモード・日本語表示にも対応してみる
iret.media にはダークモードもあります。
Google のボタンは、data-theme を指定することでライト・ダークのテーマを切り替えられます。
さらに data-lang を指定すれば、表示言語を固定することもできます。
ライトモードの場合は、
<div google-add-preferred-source-btn data-theme="light" data-lang="ja"> </div>
ダークモードでは、
<div google-add-preferred-source-btn data-theme="dark" data-lang="ja"> </div>
としました。
Google 公式の UI をそのまま利用できるので、独自にボタンをデザインしなくても「Google の機能」であることが分かりやすいのも良いところです。
実装より悩んだ「優先ソースボタン、どこに置く問題」
ここまでの実装は、かなり簡単でした。
むしろ私が悩んだのは、
「これ、どこに置くのが一番いいんだろう？」
というところです。
ヘッダーに常設することもできます。
ただ、初めて訪れた Web サイトで、記事を読む前から「このサイトを優先ソースに追加してください！」と言われても、ちょっと早い気がします。
まず記事を読んでもらう。
そして、
「この記事、役に立ったな」
「また iret.media を見たいな」
と思ってもらう。
そのタイミングで「優先ソースに追加」という選択肢がある方が自然なのではないかと考えました。
そこで今回は、記事本文を読み終えた後に配置することにしました。
【やってみた④】SNS シェアボタンの横に置いてみた
iret.media では、記事下部にも X、Facebook、はてなブックマークなどの SNS シェアボタンを設置しています。
今回は、そのエリアに「優先ソース」ボタンを追加しました。
左側には、これまで通り SNS シェアボタン。
右側に、新しく Google の「優先するニュース提供元に追加」ボタンを配置しています。
ここも少し悩みました。
SNS シェアは、
「この記事を誰かに届ける」
ためのアクション。
一方、優先ソースへの追加は、
「このメディアの記事を自分がこれからも見つけやすくする」
ためのアクションです。
同じ記事を読み終えた後のアクションではありますが、目的は少し違います。
そのため、1つのボタングループとしてまとめるのではなく、左右に少し距離を取って配置しました。
また、既存の SNS ボタンはこれまで左側に配置していたため、その位置は変えず、新しく追加した「優先ソース」ボタンを右側に配置しています。
既存の UI をなるべく変えずに、新しい導線を追加する形です。
【やってみた⑤】実際に自分で「優先ソース」に追加してみる
ボタンも無事に表示されたので、試しにクリックしてみます。
画面の案内に沿って追加すると、iret.media が自分の「優先ソース」に設定されます。
そして追加後は、そのまま閲覧していたページへ戻ってきます。
これが今回追加されたインタラクティブボタンの便利なところ。
Google の「ソース設定ツール」へ移動してサイト名を検索して……という操作をせず、記事を読んでいる流れの中で追加できます。
Web サイト側から見ても、ユーザーの閲覧を大きく中断しないのはありがたいところです。
Google の「優先ソース」は SEO や検索順位に効果がある？
Web サイトを運営していると、やっぱりここは気になります。
「これ、SEO にも効果があるの？」
結論として、優先ソースに設定されることで通常の検索順位が上がる、という説明は Google からはされていません。
また、「AI による概要」や「AI モード」で自社の記事が引用される可能性そのものが高くなるとも明記されていません。
Google が案内している主な変化は、
- 「トップニュース」に表示される可能性が高まる
- 「優先」バッジが付いて表示される
- 「AI による概要」や「AI モード」でも「優先」バッジが付いて表示される
といったものです。
そのため、
「検索順位を上げるための新しい SEO 施策」
というより、
「すでに記事を読んでくれているユーザーと、Google 検索上でも再び接点を持つための導線」
と考える方が、個人的にはしっくりきます。
なお、AI 検索だからといって特別な SEO 対策が必要になるわけではありません。このあたりは「AI 検索時代の SEO・AEO とは？デザイナーが知っておきたい基本」でも詳しく紹介しています。
SNS でいう「フォロー」に、少し近い感覚でしょうか。
検索順位そのものを直接上げる機能ではありませんが、記事を気に入ってくれた読者が、その後の Google 検索でも iret.media の記事を見つけやすくなる。
そう考えると、SEO 施策というよりも、Google 検索上で読者との継続的な接点をつくるための仕組みとして捉えるのが良さそうです。
まとめ｜「優先ソース」はオウンドメディアの新しい読者導線になりそう
今回、Google の「優先ソース」ボタンを iret.media へ導入してみました。
冒頭でも触れた通り、コード自体はシンプルでも、配置場所や見せ方の設計には意外と悩みました。
もし他のオウンドメディアで導入するなら、まずは「記事を読み終えた後」「既存のシェアボタンの近く」あたりから試してみるのが良さそうです。
SNS シェアボタンほど定番の配置ルールがまだ確立されていない分、各サイトの読者導線に合わせて考える余地がある機能だと思います。
もちろん、「優先ソース」に追加されたからといって、検索順位が上がるわけではありません。
ただ、記事を読んで「またこのメディアを読みたい」と思ってくれたユーザーに、Google 検索上でも再び見つけてもらうための新しい選択肢としては面白い機能です。
実装自体は JavaScript と HTML を追加するだけなので、オウンドメディアを運営している方は、自分のサイトが対象になっているか、まずは確認してみてはいかがでしょうか。
簡単30秒