読者が Google 検索の優先するニュース提供元からサイトを見つけられるようにする

ウェブサイトの所有者は、読者が Google 検索でそのパブリケーションを優先するニュース提供元として見つけられるようにすることができます。ユーザーがサイトを優先するニュース提供元として選択すると、「トップニュース」にコンテンツが表示される可能性が高まり、ユーザーの目を引く「優先」バッジが表示されます。AI モードと AI による概要では、コンテンツに「優先」バッジを表示することができ、サイトを優先するニュース提供元として選択したユーザーがサイトを見つけやすくなります。

機能の提供状況

優先するニュース提供元機能は、Google 検索を利用できる地域のすべての言語を用いた「トップニュース」機能で世界的にご利用いただけます。優先するニュース提供元は AI モードと AI による概要にも表示でき、これらの機能が提供されているすべての言語と地域で利用できます。

ソース設定ツールに表示されるのは、ドメインレベルとサブドメインレベルのサイトのみです。たとえば、https://www.example.com/ と https://code.example.com/ は優先するニュース提供元の対象になりますが、サブディレクトリ https://www.example.com/blog は対象になりません。

ユーザーが優先するニュース提供元としてサイトを見つけられるようにする方法

サイトがソース設定ツールに表示される場合は（ツールの検索ボックスにサイトを入力することで確認できます）、次の方法を使用して、読者がサイトを優先するニュース提供元として選択するように誘導することができます。

標準の JavaScript 実装 （推奨）: ウェブページにインタラクティブなボタンを埋め込みます。このボタンは、読者がサイトを優先するニュース提供元としてシームレスに追加できるようにし、追加後は元のページに戻ります。HTML に 2 行追加するだけで有効になるこのオプションは、デバイスと言語のカスタマイズをサポートする、自動的にローカライズされた Google スタイルのボタンを読者に提供します。
カスタムデザインアセットを使用した高度な JavaScript 実装: 独自のデザインアセットを使用して標準の JavaScript ボタンをカスタマイズする場合は、高度な JavaScript 実装の手順を実行します。エンドユーザー UI のフローは標準の JavaScript 実装と同じです。
ディープリンク実装: インタラクティブなボタンを実装できない場合（CMS でサポートされていない場合など）は、ディープリンクを使用して、サイトを優先するニュース提供元として追加するようにユーザーを誘導できます。これを行うには、ウェブページにテキストリンクまたはクリック可能な画像を追加します。ディープリンクは、ソーシャル投稿、メールニュースレター、またはプロモーションにも使用できます。

標準の JavaScript 実装（推奨）

HTML に 2 行追加するだけで、自動的に翻訳されるインタラクティブなボタンを追加できます。このボタンは、読者がサイトを優先するニュース提供元としてシームレスに追加できるようにし、追加後はページの元の箇所に戻ります。ボタンのテーマ（ダークまたはライト）を設定するだけでなく、ボタンの言語をオーバーライドすることも可能です。これは、読者に最高のユーザーエクスペリエンスを提供することから、推奨される実装です。

ボタンは以下のように表示されます。

ウェブページに JavaScript ボタンを埋め込むには、次の手順を実行します。

次の <script> タグをウェブページ（できれば <head> 要素内）に追加します。そうすることで、優先するニュース提供元ライブラリが読み込まれます。
```
<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
```
ウェブページ本文のボタンを表示したい場所に、次の <div> タグを追加します。
```
<div google-add-preferred-source-btn></div>
```

ボタンのテーマを設定する

デフォルトで、[優先するニュース提供元に追加] ボタンはライトテーマで表示されます。テーマを調整するには、data-theme データ属性を <div> 要素に追加し、それを light または dark に設定します。

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

ボタンの言語をオーバーライドする

デフォルトで、[優先するニュース提供元に追加] ボタンは、ユーザーのブラウザ設定に基づいてユーザーの言語で表示されます。この動作をオーバーライドするには、<div> 要素に data-lang データ属性を追加し、それを希望の言語コードに設定します（サポートされている言語コードのリストをダウンロードしてください）。

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

サポートされている言語コードをダウンロードする

カスタムデザインアセットを使用した高度な JavaScript 実装

デフォルトで、標準の JavaScript ボタンは google-add-preferred-source-btn 属性を持つ要素について DOM を自動的にスキャンし、標準のバッジをレンダリングします。ただし、独自の UI 要素やアプリケーションマイルストーンからフローをトリガーするカスタム統合の場合は、クライアントをプログラム的に初期化し、フローをカスタムトリガーにバインドできます。

優先するニュース提供元ライブラリをカスタムユーザーインターフェース、アプリケーションマイルストーン、または最新のフレームワークアプリケーションに統合する場合は、Google の JavaScript SDK を使用することで、ランタイム設定とフローの開始のすべてをプログラム的に制御できます。ES モジュールインポート（ESM）と標準スクリプトコールバックキュー（IIFE）の 2 つの異なる統合アプローチが提供されており、お使いのツールとアーキテクチャに応じて選択できます。どちらの配布モデルも、同じ機能性とメソッドを公開します。

ES モジュールインポート

最新のビルド設定とモジュールベースの環境には、ライブラリをコードに直接インポートします。

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" 属性とともにドキュメントの <head> に読み込んで、ボタンが自動的にレンダリングされないようにします。

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

注意: preferred-sources-control="manual" 属性が省略されている場合は、google-add-preferred-source-btn 属性を持つ要素を検索してただちに初期化します。

次に、グローバル PREFERRED_SOURCE コールバックキューを使用してオプションを初期化し、カスタムトリガーをバインドします。

<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();
      });
  });
</script>

ボタン、宣言型コンテナ、IIFE スクリプト、ES モジュールバンドル全体でライブ使用状況を示すインタラクティブなフロントエンドとバックエンドの実装については、優先するニュース提供元のデモをご覧ください。

ディープリンク実装

ウェブサイトで JavaScript を使用できない場合は、その代わりにディープリンクを使用することで、ユーザーがサイトを優先するニュース提供元として追加し、選択を確認できるソース設定ツールにユーザーを誘導できます。

次の 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 が提供する公式の翻訳済みグラフィックアセットをダウンロードすることもできます。

ボタンアセットをダウンロードする

読者が Google 検索の優先するニュース提供元からサイトを見つけられるようにする

機能の提供状況

ユーザーが優先するニュース提供元としてサイトを見つけられるようにする方法

標準の JavaScript 実装（推奨）

ボタンのテーマを設定する

ボタンの言語をオーバーライドする

カスタム デザイン アセットを使用した高度な JavaScript 実装

ES モジュール インポート

標準スクリプト コールバック キュー

ディープリンク実装

テキスト リンクの例

クリック可能な画像リンクの例

ボタン画像アセット

カスタムデザインアセットを使用した高度な JavaScript 実装

ES モジュールインポート

標準スクリプトコールバックキュー

テキストリンクの例