Google 偏好來源是什麼？網站站長用 AI 加上按鈕的完整實作指南

2025 年 8 月，Google 在美國與印度先推出了一個叫「偏好來源」的設定。2025 年 12 月擴及全球英文市場，到了 2026 年 4 月 30 日，所有 Google 搜尋支援的語言全面開放，繁體中文也在其中。

根據 Google 官方說法，到目前為止已經有超過 20 萬個網站被使用者選進自己的偏好來源清單，從地方型小部落格到國際新聞臺都有。

這個功能之所以值得站長認識，不是因為它會帶來爆量流量。恰恰相反，它幾乎不會。它值得認識，是因為它是少數幾個讓讀者主動對 Google 說「這個網站我想多看一點」的機制，而這句話會直接影響搜尋結果與 AI 回答要不要引用你。

我在 2026 年 8 月把這顆按鈕實際裝進自己經營的多個網站，從 Astro、Next.js 到完全手寫的靜態 HTML 都有。這篇文章會把官方文件講清楚，也會把官方文件沒寫、但你一定會撞到的坑寫出來。

偏好來源到底是什麼

先把官方術語對齊，後面才不會混亂。

Google 的偏好來源說明文件裡，這幾個名詞是固定用法：

偏好來源：使用者選定的網站
來源偏好設定工具：使用者管理這份清單的介面
焦點新聞：搜尋結果頁上方那個新聞區塊，也就是英文的 Top Stories
AI 摘要與 AI 模式：Google 搜尋裡的生成式回答
偏好徽章：被選為偏好來源後，你的內容在上述位置會帶的標示

運作方式很單純。使用者登入 Google 帳號，打開來源偏好設定工具，搜尋一個網站名稱或網域，勾選它。之後這個使用者在焦點新聞裡會更容易看到這個網站的內容，並且帶有偏好徽章；在 AI 摘要與 AI 模式裡，這個來源也會拿到標示。

有兩件事要先講明白，免得讓你有錯誤的期待。

第一，這是帳號層級的個人化。甲使用者把你設為偏好來源，只影響甲看到的搜尋結果，不會讓你在乙的搜尋結果裡上升。它不是排名手段。

第二，官方明講：在網站上放按鈕不是取得資格的必要條件。按鈕的作用只是讓已經喜歡你的讀者更容易找到那個開關。你不放按鈕，讀者一樣可以自己去設定工具裡把你加進去。

為什麼站長還是該花這半小時

既然不是排名手段、又不是必要條件，為什麼值得做？我的理由有三個，也一併說清楚它的天花板在哪裡？

第一，這是 AI 搜尋時代少數能主動累積的訊號。過去兩年，SEO 的討論已經延伸出 AEO 與 GEO 這兩個講法，前者關心答案引擎，後者關心生成式引擎，核心問題都一樣：當使用者不再點連結、而是直接讀 AI 給的答案，你要怎麼確保自己是那個被引用的來源。偏好來源不是唯一解，但它是目前 Google 唯一明確開放、由讀者本人表態的引用偏好機制。

第二，它是演算法之外的直達關係。這件事的性質，比較接近電子報訂閱，而不是搜尋優化。讀者按下去，等於在 Google 這個入口裡，替你插了一面旗子。演算法怎麼調，這面旗子都還在。這也是我一再提醒創作者別把自己活成數位佃農的同一件事：真正屬於你的，是那些不必經過演算法轉手的關係。

第三，成本真的很低。如果你的網站有共用的頁尾元件，整件事就是加兩行程式碼再改一行安全性設定，半小時內可以做完並驗證完畢。

至於天花板，我建議你這樣校準期待：

焦點新聞那一塊，非新聞網站幾乎吃不到。如果你經營的是課程站、作品集、顧問服務網站，本來就很難進焦點新聞，那個徽章對你意義有限。真正的價值在 AI 摘要與 AI 模式。
它是留存工具，不是獲客工具。會按這顆按鈕的，一定是已經認識你的人。它把既有讀者的好感，轉換成 Google 帳號層級的長期偏好，不會替你帶來新的陌生流量。
官方沒有提供任何成效報表。Search Console 看不到有多少人把你設為偏好來源。這點後面會談怎麼折衷處理。

第一步：先確認你的網域有沒有資格

這是最多人會漏掉、也最容易做白工的一步。

官方文件寫得很清楚：只有網域層級與子網域層級的網站符合資格，可以顯示在來源偏好設定工具中。舉例來說，https://www.example.com/ 與 https://code.example.com/ 都符合資格，但子目錄 https://www.example.com/blog 不符合。

換句話說，如果你的內容掛在別人的網域底下，例如 Medium、方格子的個人作品頁或某個平臺的作者專區，這個功能跟你無關。你得先有自己的網域。

有了網域也不代表就在名單裡。Google 需要先把你的網站建成一個可被選取的來源實體，這通常跟你的內容量與索引歷史有關。查法是打開來源偏好設定工具，在搜尋框裡實際輸入你的網域，看它跳不跳出來。

https://www.google.com/preferences/source

這裡有一個我實測踩到的陷阱，值得單獨拉出來講。

官方文件提供了一種深層連結格式，可以把使用者直接帶到設定工具裡你的網站：

https://www.google.com/preferences/source?q=example.com

我一開始用這個網址逐一檢查自己的網域，結果全部顯示查無結果，差點誤判成全都沒資格。後來我拿 bbc.com 這種必定合格的網域做對照，發現它同樣顯示查無結果。真相是：?q= 參數只會把文字填進搜尋框，不會真的觸發搜尋。你必須用鍵盤實際打字，結果列才會出現。

所以查資格的正確步驟是：打開設定工具、點進搜尋框、手動輸入網域、等結果列出現。看到帶著網站圖示的那一列，才算真的有資格。

如果你是從深層連結進去的，網域已經填好了，那就在搜尋框裡點一下，按一次空白鍵再按一次倒退鍵。文字沒有變，但這一下足以觸發搜尋，結果列就會跳出來。

如果查不到，先不要急著裝按鈕。除了幾個合格的網域之外，我還有五個網域完全不在工具裡，這些網站的共同點都是 2026 年才上線、內容量還不夠豐富。在這種情況下，該做的是先把內容與索引養起來，每一季回頭重驗一次，而不是先把按鈕掛上去。

三種做法，以及該選哪一種

官方提供了三條路。我把差異整理成一張表。

做法	中文按鈕	需要改 CSP	可否量測點擊	適合誰
官方 JavaScript 按鈕	有	要	不行	想在網站上放正式按鈕的人
深層連結	沒有現成素材	不用	可以	電子報、社群貼文
什麼都不做	不適用	不用	不適用	資格還沒到位的新站

先講官方 JavaScript 按鈕，這是我推薦的主要做法，因為它是唯一能拿到中文按鈕的路。實測結果：data-lang="zh-TW" 會渲染出「新增至偏好來源」，data-lang="ja" 是日文版本，深色主題也有對應樣式。而且它會自動偵測目前網域，你不必煩惱該填 example.com 還是 www.example.com。

再講深層連結。它的優點是零成本、零風險，而且因為連結在你自己手上，可以掛追蹤參數或事件，知道有多少人點過。缺點是 Google 官方下載的按鈕素材沒有中文。我把官方素材包解開來看過，裡面有 17 種語言（丹麥文、德文、英文、西班牙文、愛沙尼亞文、芬蘭文、法文、印地文、希伯來文、日文、韓文、挪威文、巴西葡萄牙文、俄文、瑞典文、土耳其文、烏克蘭文），中文不在其中。所以繁中網站走這條路，只能掛英文圖或自己做一個文字連結。

我的建議是兩條併行：網站上用官方 JavaScript 按鈕，電子報與社群貼文用深層連結。前者服務造訪網站的人，後者服務不會特地跑來網站的訂閱者，而且後者剛好補上了前者無法量測的缺口。

動手做：帶著 AI 把按鈕裝上去

這一段是給不擅長寫程式的站長看的。你不需要看懂下面的程式碼，但你需要看懂它在做什麼，這樣才能判斷 AI 有沒有做對？

整件事只有三個動作：放一個容器、載入一支 Google 的程式、放行安全性設定。

動作一：放容器

在你希望按鈕出現的位置，放一個空的區塊。多數網站放在頁尾最合適，因為那是讀者看完內容之後的位置。

<div google-add-preferred-source-btn data-theme="light" data-lang="zh-TW"></div>

三個屬性的意思：google-add-preferred-source-btn 是給 Google 認的記號，data-theme 選淺色或深色版按鈕，data-lang 決定按鈕上的文字語言。

動作二：載入 Google 的程式

<script async src="https://news.google.com/swg/js/v1/publisher.js"></script>

這一行的位置非常關鍵，後面的雷點區會詳談。

動作三：放行安全性設定

如果你的網站設了內容安全政策（Content Security Policy，簡稱 CSP），瀏覽器會擋掉來路不明的外部程式。你必須明確放行 Google 這個網域，否則按鈕會完全不出現，而且不會有任何錯誤提示。

需要加的是兩條：

script-src ... https://news.google.com
frame-src  ... https://news.google.com

可以直接複製的 AI 指令

如果你用的是 Claude Code、Cursor 這類能讀你整個專案的 AI 工具，下面這段指令可以直接貼過去。我把前面所有的坑都寫進條件裡了，這是這段指令真正的價值所在。

請幫我在這個網站加上 Google Preferred Sources（偏好來源）按鈕。

步驟：
1. 先找出全站共用的頁尾元件是哪一個檔案，告訴我路徑，讓我確認。
2. 在頁尾放入按鈕容器：
   <div google-add-preferred-source-btn data-theme="light" data-lang="zh-TW"></div>
3. 在按鈕容器「之後」載入官方 script：
   <script async src="https://news.google.com/swg/js/v1/publisher.js"></script>
   注意：這支 script 一載入就會掃描 DOM 尋找按鈕容器，
   放在 <head> 用 async 會在頁尾解析完之前執行，掃不到容器就靜默失敗。
4. 幫按鈕容器包一層固定寬度的外層（建議 240px、最小高度 60px）。
   Google 注入的 iframe 寬度會吃滿容器，不限寬會撐開版面。
5. 檢查本專案有沒有設定 CSP（找 public/_headers、next.config、
   middleware、vercel.json）。若有，在 script-src 與 frame-src 各加上
   https://news.google.com。如果原本沒有 frame-src 這條指令，
   要新增整條並帶上 'self'，否則會回退到 default-src 而擋掉按鈕。
6. 確認本站有沒有深色模式。如果有，說明你打算怎麼處理按鈕的深淺配色，
   先讓我確認再動手。

做完後告訴我你改了哪些檔案，以及我該打開哪一頁、捲到哪裡驗證。

指令裡刻意留了兩個確認點（第 1 步與第 6 步），是為了避免 AI 一路改到底才發現改錯檔案。這是我帶 AI 做任何跨檔案修改時的習慣：讓它先講計畫，你點頭再動手。這一點在 Vibe Coding 進化成 Agent 工程之後只會愈來愈重要，因為 AI 一次能改的範圍愈大，事前對齊的價值就愈高。

四個實測雷點

以下四點官方文件都沒有寫清楚，但你八成會遇到這些狀況。這也是我實作幾個網站的過程中，真正花掉時間的地方。

雷點一：script 放在 head 會靜默失敗

這是最值得注意的一個。我在第一個網站上把 script 依照習慣放進 <head>，加了 async，結果按鈕容器完全是空的，瀏覽器主控臺也沒有任何錯誤訊息。

原因是 publisher.js 一載入就立刻掃描 DOM，尋找帶有 google-add-preferred-source-btn 屬性的元素。放在 <head> 用 async 的話，它很可能在瀏覽器還沒解析到頁尾之前就執行完畢，什麼都沒掃到，然後安靜地結束。

正確做法是把 script 放在按鈕容器之後，通常就是 </body> 之前。如果你是用 JavaScript 動態產生按鈕，順序也一樣：先把容器塞進 DOM，再附加 script。

雷點二：注入的 iframe 會撐滿容器

Google 不是直接把按鈕畫在你的頁面上，而是塞一個 iframe 進去。這個 iframe 的寬度是 100%、高度固定 60px。

意思是，如果你把容器放在一個沒有限制寬度的地方，它會橫向撐滿整列，你的頁尾排版就歪了。而且點擊區域會變成一整條，視覺上看不出來，但滑鼠移過去會怪。

解法是包一層固定寬度的外層。繁中按鈕實際約 148px 寬，日文比較長，我統一給 240px，兩種語言都放得下。

還有一個容易忽略的細節：如果你的頁尾是彈性排版（flex），而那一欄的寬度是依內容決定的，用百分比加最大寬度會收不到效果，那一欄會縮成裡面最寬的文字那麼寬。這種情況要給固定像素值。

雷點三：CSP 的 frame-src 陷阱

前面提過要在 CSP 放行 news.google.com，這裡要補一個坑。

如果你的網站原本沒有設定 frame-src 這條指令，瀏覽器會回退去看 default-src。而多數網站的 default-src 是 'self'，也就是只允許自家內容。這種情況下，就算你在 script-src 加了 Google，程式載入得了，iframe 還是會被擋。

所以新增 frame-src 的時候，記得連 'self' 一起帶上：

frame-src 'self' https://news.google.com

只寫 frame-src https://news.google.com 的話，你會把自己原本可以嵌入的內容一起擋掉。

順帶一提，img-src 不用改。按鈕上的 Google 圖示是在 iframe 內部載入的，不歸你的頁面管。

雷點四：深色模式要備兩顆

data-theme 是寫死的屬性，Google 不會跟著你的網站即時切換配色。如果你的網站有深淺色切換，或是跟隨系統偏好，就得處理。

我用過三種做法，看你的網站狀況挑：

狀況一，頁尾配色固定。這是最幸運的情況。我有一個網站的頁尾不管淺色深色模式都是深底，那就直接寫死 data-theme="dark"，一顆搞定。

狀況二，網站有明確的主題切換機制。放兩顆按鈕，用 CSS 讓它們擇一顯示。注意要處理三種狀態：使用者手動選了深色、手動選了淺色、以及什麼都沒選而跟隨系統。

狀況三，多個頁面配色各不相同。我有一個站底下六十幾個頁面，配色從暖色紙感到紅白到深色都有，逐頁判斷不切實際。我的做法是讓程式在執行時量測頁面實際的背景色，換算亮度，自動決定要用淺色還是深色版按鈕。這種寫法交給 AI 生成很快，你只要在指令裡把需求說清楚。

怎麼確認真的成功了

按鈕失敗的時候是靜默的，所以驗證步驟不能省。這是我的檢查清單，由淺入深：

一、原始碼裡有沒有標記。在頁面上按右鍵檢視原始碼，搜尋 google-add-preferred-source-btn。找不到，表示你的修改根本沒有部署上去。

二、script 標籤在不在，而且在容器後面。搜尋 publisher.js，確認它出現在按鈕容器的下方。

三、按鈕真的畫出來了。這一步最重要，前兩步都過了還是可能失敗。打開頁面，捲到你放按鈕的位置，看到那顆「新增至偏好來源」的白色圓角按鈕，才算數。如果只看到一片 60px 高的空白，八成是雷點一或雷點三。

四、按下去有反應。點一下，應該會跳出 Google 的設定介面。

要提醒的是，第三步一定要打開瀏覽器實際檢視。只用指令列抓原始碼是驗不出來的，因為按鈕是瀏覽器執行 JavaScript 之後才長出來的，原始碼裡永遠只有那個空容器。我自己就是在這一關抓到 head 位置錯誤的問題。

裝好之後，怎麼讓讀者真的去按

按鈕裝在頁尾，大部分讀者不會主動注意到。如果你希望這件事真的發生，得主動說一次。

在電子報裡放深層連結。這是我認為效果最好的位置，因為會讀你電子報的人，正是最可能願意按的那群。如果你還沒有自己的名單，可以先看我寫過的名單磁鐵與 Email 自動化序列。用官方的深層連結格式，把 example.com 換成你的網域：

https://www.google.com/preferences/source?q=你的網域

記得填 Google 正規化之後的名稱。舉例來說，我自己的網站在工具裡顯示的是不帶 www 的形式，所以連結也用不帶 www 的版本。

另外要在信裡順手交代一句：點開之後網域雖然填好了，但頁面不會自動搜尋，請讀者在搜尋框裡按一次空白鍵再按倒退鍵。少了這句話，多數人會以為連結壞掉就關掉了。

寫一段話說明它是什麼。「偏好來源」對一般讀者是全新的名詞，光丟連結沒人會點。你需要用一兩句話講清楚：這是 Google 帳號裡的一個設定，勾了之後你在搜尋時會更容易看到我的文章。愈具體愈好。

不要重複催。這是一次性的動作，讀者設定過就不會再設定。提一次、在頁尾留一個入口，就夠了。

誠實面對它的成效問題

前面說過，Google 沒有提供任何報表告訴你有多少人把你設為偏好來源。而網站上那顆官方按鈕，因為是跨網域的 iframe，你的頁面也抓不到點擊事件。

這代表你做完之後，幾乎沒有辦法量化它的效果。

我覺得這件事應該直說，而不是假裝有辦法測。我的處理方式是把它當成基礎建設，而不是行銷活動：花半小時裝好，在電子報裡提一次，然後就不再管它。真正需要看數字的，還是回到自己能掌握的指標，例如電子報訂閱數，或是深層連結的點擊數。

如果你經營的是自己的網域，而且已經有一批固定讀者，那麼這半小時是值得的。它的邏輯跟當年加上 RSS 訂閱連結是一樣的：你不會因此爆紅，但你替願意長期跟著你的人，留了一道更方便的門。

而如果你的網站現在還查不到資格，那更清楚了：這篇文章請你先加入書籤，你眼前該做的事是把貴站的內容累積起來。按鈕永遠都來得及補上，但內容需要時間積累。

換我開口：也請你幫我按一下

寫到這裡，該我自己示範一次前面說的「主動說一次」。

如果這篇文章對你有用，有一件事只花你十秒鐘：把我經營的網站加進你的偏好來源。這不需要留 E-mail、不會有任何信寄給你，它只是你 Google 帳號裡的一個勾選。勾了之後，當你搜尋 AI 應用、Vibe Coding、內容經營或一人事業這類題目時，會更容易看到我寫的東西。

下面每一個連結都會把你帶到 Google 的來源偏好設定工具，網域已經幫你填好了：

vista.tw：主站，AI 應用、寫作邏輯與系統思考
builder.tw：AI Builder 學院，也就是你現在看的這個站
solo.tw：AI × 一人事業
concept.tw：概念力，把想法變成能被市場記住的概念
empower.tw：AI 時代的能力成長平臺
vistacheng.com：個人網站，著作、演講與近況
lab.vista.tw：AI 實驗室，一個人做出來的工具集
slides.vista.tw：公開簡報典藏

點開之後有一個小動作要記得做，就是前面提過的那個陷阱：頁面只會把網域填進搜尋框，不會自動搜尋。請在搜尋框裡點一下，按一次空白鍵再按一次倒退鍵，文字不會變，但結果列會跳出來，接著勾選右邊的方框就完成了。

還有一點，這個設定是跟著 Google 帳號走的，請在你平常搜尋時登入的那個帳號上操作。手機與電腦只要是同一個帳號，設定會自動同步。

謝謝你願意花這十秒鐘。這是我目前想得到，讀者能給一個獨立創作者最實在的支持方式之一，而它不用花你一毛錢。