協助讀者透過 Google 搜尋中的偏好來源找到您的網站

如果您是網站擁有者，可以協助目標對象在 Google 搜尋中，將您的出版品設為偏好來源。使用者選取您的網站做為偏好來源後，在「焦點新聞」中，更有可能看到您的內容，並以「偏好」徽章標示。在 AI 模式和 AI 摘要中，如果使用者已選取您的網站做為偏好來源，您的內容就會以「偏好」徽章標示。

功能適用情況

偏好來源功能已於全球推出，適用於所有支援 Google 搜尋語言的「焦點新聞」功能。在所有支援 AI 模式和 AI 摘要的語言和地區中，偏好來源也會顯示在這些功能中。

只有網域層級和子網域層級網站符合資格，可顯示在來源偏好設定工具中。舉例來說，https://www.example.com/ 和 https://code.example.com/ 符合偏好來源的資格，但子目錄 https://www.example.com/blog 不符合資格。

如何協助使用者將您的網站設為偏好來源

如果您的網站顯示在來源偏好設定工具中 (如要確認，請在工具的搜尋框中輸入您的網站)，可以使用下列方法引導讀者選取您的網站做為偏好來源：

標準 JavaScript 導入 (建議)：在網頁中嵌入互動式按鈕，讓讀者輕鬆將您的網站新增為偏好來源，並返回您的網頁。只要在 HTML 中新增兩行程式碼，這個選項就會自動顯示在地化的 Google 樣式按鈕，並支援裝置和語言自訂功能。
使用自訂設計素材資源的進階 JavaScript 導入：如要使用自己的設計素材資源，並自訂標準 JavaScript 按鈕，請按照進階 JavaScript 導入操作說明進行。使用者 UI 流程與標準 JavaScript 導入相同。
深層連結導入：如果無法導入互動式按鈕 (例如 CMS 不支援)，可以使用深層連結，引導使用者將您的網站新增為偏好來源。方法是在網頁中加入文字連結或可點選的圖片。您也可以在社群貼文、電子報郵件或宣傳活動中使用深層連結。

標準 JavaScript 導入 (建議)

只要在 HTML 中加入兩行程式碼，即可新增自動翻譯過的互動式按鈕，讓讀者順暢地將您的網站新增為偏好來源，並返回先前在網頁上離開的位置。您也可以設定按鈕主題 (深色或淺色)，以及覆寫按鈕語言。建議採用這種做法，因為可為讀者提供最佳使用者體驗。

顯示畫面如下：

如要在網頁中嵌入 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 按鈕會自動掃描 DOM 中含有 google-add-preferred-source-btn 屬性的元素，並顯示標準徽章。不過，如果是自訂整合，您想從自己的 UI 元素或應用程式里程碑觸發流程，則可以透過程式輔助方式初始化用戶端，並將流程繫結至自訂觸發條件。

將偏好來源程式庫整合至自訂使用者介面、應用程式里程碑或現代架構應用程式時，您可以使用 JavaScript SDK，全面以程式輔助方式控管執行階段設定和流程啟動。我們提供兩種不同的整合方式，您可以根據工具和架構選擇：ES 模組匯入 (ESM) 和標準指令碼回呼佇列 (IIFE)。這兩種發布模式提供的功能和方法完全相同。

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

標準指令碼回呼佇列

如果是標準指令碼標記整合，請在文件的 <head> 中載入下列指令碼，並使用 preferred-sources-control="manual" 屬性，防止系統自動算繪按鈕：

<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，也可以使用深層連結將使用者導向來源偏好設定工具，讓他們將您的網站新增為偏好來源並確認所選項目。

請使用下列網址格式，並將 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 提供的官方翻譯圖像資源：

下載按鈕素材資源