Canonical: https://seo.whoops.com.tw/modern-web-guidance/
Author: Sliven 褚崇名
Source robots: follow, index, max-snippet:-1, max-video-preview:-1, max-image-preview:large
Content modified (WordPress): 2026-11-14T10:32:38+00:00
Representation modified (content/template/converter): 2026-11-14T10:32:38+00:00

# Modern Web Guidance 是什麼？AI 編碼代理技能安裝、舊碼掃描與 SEO 應用

 

圖片：Modern Web Guidance 精選圖，呈現讀取技能、檢查相容性與採用原生網頁功能的流程（來源：https://seo.whoops.com.tw/wp-content/uploads/2026/11/modern-web-guidance-featured.webp）

 

撰文作者 

[Sliven 褚崇名](<https://seo.whoops.com.tw/about/#founder-title>)

 

Whoops SEO 創辦人

 

SEO 與 AI SEO 專家，專長涵蓋技術 SEO、內容策略與 GEO 優化。從搜尋排名到 AI 答案中的品牌呈現，協助企業找出優化機會、排定執行順序，並追蹤實際成效。

 

圖片：Sliven 褚崇名肖像（來源：https://seo.whoops.com.tw/wp-content/uploads/2026/10/sliven-portrait-navy.webp）

 

[作者背景與專業領域](<https://seo.whoops.com.tw/about/#founder-title>) 更新 2026-11-14 約 14 分鐘閱讀

 

本篇內容

 

### 本篇內容

 

## 先看重點

摘自本文

- 導入時先確認安裝器新增或更新的技能檔與專案設定，再檢查代理會在什麼任務讀取它。

[Modern Web Guidance 與 SEO：如何驗收網站品質](<https://seo.whoops.com.tw/modern-web-guidance/#Modern-Web-Guidance-%E8%88%87-SEO%EF%BC%9A%E5%A6%82%E4%BD%95%E9%A9%97%E6%94%B6%E7%B6%B2%E7%AB%99%E5%93%81%E8%B3%AA>)
- 在搜尋入口包含 AI 搜尋的情境下，內容仍須能被正常存取與理解；技能負責協助開發，不能代替內容來源、檢索與索引檢查。

[Modern Web Guidance 與 SEO：如何驗收網站品質](<https://seo.whoops.com.tw/modern-web-guidance/#Modern-Web-Guidance-%E8%88%87-SEO%EF%BC%9A%E5%A6%82%E4%BD%95%E9%A9%97%E6%94%B6%E7%B6%B2%E7%AB%99%E5%93%81%E8%B3%AA>)
- 兩者用途不同，能否被個別代理採用也不同；Google 搜尋的 AI 功能文件沒有要求額外的 AI 文字檔，不能將 llms.txt 視為取得索引或 AI 引用的必要條件。

[Modern Web Guidance 與 SEO：如何驗收網站品質](<https://seo.whoops.com.tw/modern-web-guidance/#Modern-Web-Guidance-%E8%88%87-SEO%EF%BC%9A%E5%A6%82%E4%BD%95%E9%A9%97%E6%94%B6%E7%B6%B2%E7%AB%99%E5%93%81%E8%B3%AA>)

 

### 檢查網站的 SEO 基礎

從網站網址開始，檢視可讀性與頁面基礎訊號。

- 檢查標題與搜尋摘要標記
- 核對 canonical 與索引指令
- 整理公開 HTML 的待改善項目

[免費檢查網站](<https://seo.whoops.com.tw/free-seo-audit/>)

 

[將 Whoops 設為 Google 偏好來源（另開 Google 設定頁）](<https://www.google.com/preferences/source?q=seo.whoops.com.tw>)

 

Modern Web Guidance 是由 Google Chrome 團隊發起、Firefox、Microsoft Edge 與 MDN 共同參與的開源技能集，1.0 穩定版於 [2026 年 11 月 10 日發布](<https://developer.chrome.com/blog/modern-web-guidance-v1>)。它把現代 HTML、CSS、Web API 與瀏覽器相容性知識交給 Claude Code、Codex、Copilot CLI 等 AI 編碼代理，讓代理在寫網頁或整理舊碼時，先查適用的做法。

 

大型語言模型的訓練資料包含大量舊程式碼，即使知道新 API，也可能沿用不必要的 JavaScript 實作。Modern Web Guidance 讓代理依任務檢索指南，再按專案的瀏覽器支援要求選擇功能。使用者可以從專案目錄執行 `` npx modern-web-guidance@latest install `` 安裝，接著用一個小型介面任務確認指南有被讀取。

 

這套技能適合用 AI 編碼代理建立介面、維護既有網站的開發者與團隊。官方文件已有繁體中文版；讀者可以先掌握安裝、Baseline 相容性目標與舊碼掃描，再用瀏覽器測試驗收實際產出。它提供開發知識，搜尋排名仍取決於網站內容、技術狀態與其他搜尋訊號。

 

## Modern Web Guidance 是什麼：裝進編碼代理的網頁平台知識庫

 

Modern Web Guidance 的核心是一組網頁開發技能：代理先搜尋符合任務的指南，再取回需要的內容。安裝用的技能集位於 [GoogleChrome/modern-web-guidance](<https://github.com/GoogleChrome/modern-web-guidance>)，原始指南、評測與貢獻流程則放在 [modern-web-guidance-src 原始專案庫](<https://github.com/GoogleChrome/modern-web-guidance-src>)，CLI 透過 [npm 套件](<https://www.npmjs.com/package/modern-web-guidance>)發布。

 

圖片：介面需求與網頁平台指南交給編碼代理，再產出桌機與手機網頁（來源：https://seo.whoops.com.tw/wp-content/uploads/2026/11/modern-web-guidance-agent-skill-workflow.webp）

代理先按任務搜尋並讀取指南，再實作網頁；安裝完成後仍要確認任務紀錄確實使用了指南。

 

技能（skill）的本體是代理可讀取的指令與知識檔案。它讓代理用 CLI 搜尋、取回相關指南，而不必一次把整套文件放進上下文。Chrome 團隊在[1.0 公告](<https://developer.chrome.com/blog/modern-web-guidance-v1>)說明，指南加入領域技術負責人的審核，面向使用者的指南也有專門的可及性審查；Baseline 資料則協助判斷瀏覽器支援範圍。

 

想掌握它的現況，官方管道比任何轉述都新。主文件與開源庫的提交紀錄都是公開的，指南的改版脈絡一翻就有；遇到代理做出看不懂的選擇，回頭查對應那篇指南最快。npm 套件頁隨每次發布更新版本資訊，幾個入口互相對照，就能拼出完整的現況輪廓。

 

專案在 2026 年 5 月 Google I/O 公開早期預覽，11 月 10 日進入 1.0 穩定版。這次更新除了擴充指南，也加入既有程式碼的現代化掃描與更完整的評測。判斷是否適合導入時，指南是否涵蓋自己的需求、代理是否確實使用指南，比星數與版本發布次數更有參考價值。

 

Chrome for Developers 與 1.0 同日上線的官方導覽影片，說明 Modern Web Guidance 在 AI 工作流中的定位。

 

Modern Web Guidance 補充的是開發知識。Claude 或 GPT 等模型仍負責理解需求與產出程式碼；MCP 則可讓代理連接工具，進一步檢查執行結果。Modern Web Guidance 屬於 Chrome 開發生態，Google Search Central 負責的檢索、索引與搜尋文件是另一套資源。

 

## 它解決的問題：AI 寫的前端程式碼停在過去

 

編碼代理可能知道某項 Web API，卻不熟悉完整的實作細節。例如對話方塊的焦點管理、離場動畫、減少動態效果偏好，以及瀏覽器不支援功能時的備援，都可能在一次生成中遺漏。這些缺口會讓前端程式碼看似能動，實際使用時卻出現可及性、效能或維護問題。

 

舊寫法常見有兩個原因：訓練資料累積了多年的舊教學與程式碼，代理也會模仿現有專案的周邊模式。即使模型認識新功能，仍可能缺少可靠的生產環境範例。技能指南將用法、陷阱與相容性條件一起提供，補上單純知道 API 名稱仍不足的部分。

 

具體例子包括：原生 `` <dialog> `` 搭配 `` @starting-style `` 處理開場效果、容器查詢讓元件依容器寬度調整版面，以及 `` scheduler.yield() `` 將長任務切段。這些功能的支援狀態不同，採用前須按專案的 Baseline 目標核對；必要時保留漸進增強或條件式備援，不能只因寫法較新就全面替換。

 

圖片：自製 JavaScript 模組與瀏覽器原生功能完成對話方塊，兩條路徑都須先檢查相容性（來源：https://seo.whoops.com.tw/wp-content/uploads/2026/11/modern-web-guidance-native-web-features.webp）

原生功能符合需求時，可減少自行維護的行為；是否替換既有實作，仍要核對相容性與功能需求。

 

不必要的函式庫與重複實作會增加頁面重量和維護範圍；自製互動也需要自行處理鍵盤操作、焦點與狀態。原生功能若符合需求，可以減少這部分工作。不過既有函式庫可能仍承擔複雜行為與舊瀏覽器支援，是否移除要看實際使用情境。

 

Chrome for Developers 的 1.0 公告貼文以「原生 HTML 與 CSS 幾行能完成的功能，代理卻可能寫出一百行自製 JavaScript」描述這種落差。這是對常見開發模式的說明，個別專案仍要比較功能、相容性與維護成本。

 

> Left to their own devices, AI coding agents will happily write 100 lines of custom JavaScript for something modern HTML and CSS can do natively in a few lines.
> 
> Today, in partnership with [@FirefoxWebDevs](<https://x.com/FirefoxWebDevs?ref_src=twsrc%5Etfw>), [@MozDevNet](<https://x.com/MozDevNet?ref_src=twsrc%5Etfw>), and [@MSEdgeDev](<https://x.com/MSEdgeDev?ref_src=twsrc%5Etfw>), we're releasing Modern Web Guidance 1.0 with… [pic.twitter.com/9jEFZMx6j4](<https://t.co/9jEFZMx6j4>)
> 
> — Chrome for Developers (@ChromiumDev) [November 10, 2026](<https://x.com/ChromiumDev/status/2120201406820884794?ref_src=twsrc%5Etfw>)

 

Chrome for Developers 公告 Modern Web Guidance 1.0，說明原生網頁功能與跨瀏覽器合作的方向。

 

這類工具的效果需要對照具體任務。[官方 README 的評測快照](<https://github.com/GoogleChrome/modern-web-guidance#evals-to-prove-this-works-well->)記錄：2026 年 11 月 8 日，Claude Code（opus-5-5）執行 215 項任務、1,801 項檢查時，未使用與使用指南的檢查通過率分別為 57% 與 88%，相差 31 個百分點。這是該次模型與測試集的結果，不能當成每個代理或專案的固定提升幅度。

 

[Modern Web Guidance 評測儀表板](<https://googlechrome.github.io/modern-web-guidance-src/>)將相同任務分成有、無指南的配對試驗，再以真實瀏覽器檢查 DOM、樣式、原始碼與行為要求。通過率是「通過的檢查數 ÷ 執行的檢查數」；基礎設施錯誤或評分前逾時的配對會排除。它衡量特定最佳實務，也只涵蓋部分可及性要求，不能代替完整 WCAG 稽核或實際專案驗收。

 

## 1.0 版的實際內容：審計掃描、真人審查與公開評測

 

1.0 公告列出四個重點：既有程式碼庫的現代化掃描、擴充的指南庫、真人專家審查，以及涵蓋全部指南的公開評測。掃描功能把 Modern Web Guidance 從新程式碼的參考資料，延伸到既有專案的改善流程，適合先找出可以小範圍重構的位置。

 

[現代化工作流](<https://developer.chrome.com/docs/modern-web-guidance/modernization-workflow>)先在本機掃描 HTML、CSS、JavaScript／TypeScript 等檔案，再由代理讀取上下文，排除刻意保留的備援或相似語法。掃描只涵蓋能可靠辨識的一部分舊模式；有找到問題，不代表整個專案都已完成稽核。

 

重構流程應依序完成「掃描、確認上下文、提出計畫、修改與測試」。例如掃描到以 JavaScript 量測 `` scrollHeight `` 的文字輸入框時，代理還要確認它是否真的只是自動增高功能，才評估改用 CSS；若量測用於虛擬捲動，就不能直接刪除。[web.dev 的人類可讀版指南](<https://web.dev/explore/mwg-for-humans>)也可供開發者直接核對。

 

Chrome 工程師 Phil Walton 在 Google I/O 2026 的深度演講，講解 Modern Web Guidance 的設計動機與評測方法。

 

[治理文件](<https://github.com/GoogleChrome/modern-web-guidance-src/blob/main/GOVERNANCE.md>)規劃六個 Owners 席次：Chrome 兩席，Microsoft Edge 一席，Mozilla Firefox／MDN 一席，獨立專家兩席，其中一席尚待提名。決策先尋求共識，無法取得共識時以 Owners 簡單多數決；各領域指南由負責的技術主管與專家按審查流程維護。

 

公開儀表板讓讀者查看代理、模型、日期、樣本數與個別檢查，原始評測也放在專案庫。比較結果時要連同這些條件閱讀，避免把不同日期、不同模型的數字混在一起。每晚評測與穩定版基準測試會持續更新，文章中的單次快照只適合說明方法。

 

## 四種工作情境：新介面、舊碼現代化、安全與效能

 

[官方主文件](<https://developer.chrome.com/docs/modern-web-guidance>)以四種工作情境示範用法：建立新介面、現代化舊程式碼、改善安全與改善效能。例如用容器查詢做可調整的卡片、將舊彈窗改成原生對話方塊、設定 CSP，或處理影響 INP 的長任務。這些是任務入口，完整指南還依 HTML、CSS、表單、可及性等領域分類。

 

圖片：新介面、舊碼現代化、安全防護與效能最佳化四種任務連接至共用指南（來源：https://seo.whoops.com.tw/wp-content/uploads/2026/11/modern-web-guidance-four-development-tasks.webp）

官方以新介面、舊碼現代化、安全與效能四種情境介紹用法，實際指南另依技術領域分類。

 

指南依任務讀取。代理先搜尋對應的網頁功能或介面模式，再取回相關指南；一般後端、資料庫與基礎設施工作不屬於核心觸發範圍。是否真的讀取仍取決於代理對技能的辨識與執行，團隊應在任務紀錄中確認，而非只看安裝完成訊息。

 

[Baseline 相容性目標](<https://developer.chrome.com/docs/modern-web-guidance/get-started#baseline>)決定代理應照顧的瀏覽器範圍。未設定時預設採用 Baseline Widely available，也就是已跨主要瀏覽器互通至少 30 個月的功能。指南也可能涉及較新的功能，此時須依說明使用漸進增強或備援；Baseline 並不代表所有使用者的舊裝置都已支援。

 

安全指南涵蓋 HTML 清理、嚴格 CSP、Passkey 等模式，可作為代理查找做法的共同資料。團隊仍需要自己的資料處理、權限、部署與事件應變規範；裝一套技能無法取代這些決策，也不能替個別網站完成安全稽核。

 

效能改善要有前後資料。可以先用 Lighthouse 或 PageSpeed Insights 記錄行動版與桌機的載入結果，再讓代理處理一項問題；讀者也可先熟悉 [web.dev 與網站效能檢測](<https://seo.whoops.com.tw/web-dev-tool/>)，再把實際驗收納入 [技術 SEO 排查](<https://seo.whoops.com.tw/technical-seo/>)流程。Lighthouse 是實驗室測試，INP 等實際使用者表現仍要搭配 CrUX 或自建量測。

 

## 跨瀏覽器共治：Firefox 與 Edge 為何一起背書

 

1.0 公告明確寫出 Firefox 與 Edge 加入 Chrome，發布貼文也列出 Firefox Web Developers 與 MDN。這代表專案有跨瀏覽器的參與與審查機制；實作時仍須核對各功能的相容性資料、專案目標與備援，不能將合作名單視為每個 API 都已全面支援。

 

對需要跨瀏覽器交付的團隊，共同維護的指南可以減少只參考單一實作的偏差。驗收條件仍要具體列出：支援哪些瀏覽器、鍵盤是否能完成操作、焦點是否正確返回，以及功能不支援時如何處理。這些條件比單寫「採用最新技術」更容易檢查。

 

Microsoft Edge 團隊的同日貼文也說明合作方向：讓代理善用平台的原生功能，減少自製 JavaScript 替代方案。這則貼文可以與 Chrome 公告對照，確認合作確實來自不同瀏覽器團隊。

 

> Using the platform is the more direct route to efficient, accessible, and high-performance web experiences. Modern Web Guidance guides your coding agents towards using native platform features instead of custom JS workarounds. We're excited to partner with [@ChromiumDev](<https://x.com/ChromiumDev?ref_src=twsrc%5Etfw>),… [https://t.co/ahEDMaPESW](<https://t.co/ahEDMaPESW>)
> 
> — Microsoft Edge Dev (@MSEdgeDev) [November 10, 2026](<https://x.com/MSEdgeDev/status/2120256167964557326?ref_src=twsrc%5Etfw>)

 

Microsoft Edge 開發者團隊確認參與合作，並說明採用原生網頁功能的方向。

 

MDN 長期維護 Web API 與瀏覽器相容性文件，Mozilla Firefox／MDN 也在專案治理名單中。遇到指南建議與實際支援條件不一致時，可以回到對應 MDN 文件、Baseline 資料與專案 issue 核對，再決定保留備援或提出修正。

 

## 安裝與支援的代理：一行指令裝進工作流

 

先準備可使用 `` npx `` 的 Node.js／npm 環境，再切換到要使用技能的專案目錄。[官方建議使用 Modern Web Guidance CLI 安裝](<https://developer.chrome.com/docs/modern-web-guidance/get-started>)，它會執行互動式安裝流程；需要自選技能包或安裝偏好時，可加上 `` --choose ``。以下指令是安裝技能，不會直接替專案重寫前端程式碼。

 

````
npx modern-web-guidance@latest install
````

 

裝完後開一個小型任務，明確請代理「使用 Modern Web Guidance 建立可用鍵盤操作、支援減少動態效果偏好的對話方塊，並先列出找到的指南」。先確認任務紀錄有 `` search ``、`` retrieve `` 與對應指南，再檢查產出與瀏覽器行為。只有看到原生元素，仍不足以證明技能已被讀取。

 

圖片：依序安裝技能、執行任務、檢查指南採用紀錄，最後在桌機與手機測試驗收（來源：https://seo.whoops.com.tw/wp-content/uploads/2026/11/modern-web-guidance-installation-verification.webp）

驗證分成兩層：先確認代理讀到對應指南，再檢查程式碼、鍵盤操作、相容性與實際互動。

 

想先確認指南內容，也能直接搜尋。以下以對話方塊動畫為例，先查詢相關項目，再用回傳的 ID 取回內容；這一步只證明 CLI 可取得指南，代理是否在任務中採用仍要另行確認。

 

````
npx modern-web-guidance@latest search "animate a dialog modal backdrop"
npx modern-web-guidance@latest retrieve "animate-to-from-top-layer"
````

 

接著在專案的 [`` AGENTS.md `` 專案指示](<https://seo.whoops.com.tw/what-is-agents-md/>)或 `` CLAUDE.md `` 寫明 Baseline 目標。下例採用官方文件示範的 Baseline 2024；實際目標要依網站使用者與支援需求選擇。

 

````
This project's Baseline target is Baseline 2024.
````

 

各代理也有自己的外掛入口。[Claude Code](<https://seo.whoops.com.tw/claude-code/>) 可透過[外掛市集](<https://claude.com/marketplace/plugins/modern-web-guidance>)安裝；[OpenAI Codex](<https://seo.whoops.com.tw/openai-codex/>)、Cursor、Copilot CLI、Antigravity 等也有對應方式，Vercel 的 `` npx skills `` 格式亦可使用。依[官方各代理安裝選項](<https://developer.chrome.com/docs/modern-web-guidance/get-started>)選一種路徑即可，避免同時用多種方法重複安裝。

 

團隊可先在一個專案導入，保存安裝前後的程式碼與驗收結果，再將適用的安裝方式和 Baseline 目標寫進開發環境文件。技能提供共用參考，設計決策、測試與程式碼審查仍由團隊負責。

 

[官方繁體中文文件](<https://developer.chrome.com/docs/modern-web-guidance?hl=zh-tw>)部分標題使用「現代化網站指南」，正文與套件則保留 Modern Web Guidance 英文名；搜尋與安裝時使用英文原名最容易對照。[官方實作課程 Modern Web Guidance 101](<https://codelabs.developers.google.com/codelabs/modern-web-guidance-101>)則以舊版書店網頁應用，示範設定 Baseline 目標、量測效能與逐步改善的流程。

 

透過官方 CLI 安裝會啟用自動更新；要手動更新既有安裝，使用下列 `` update `` 指令。若採代理自己的外掛方式安裝，更新機制應依該代理的文件處理。

 

````
npx modern-web-guidance@latest update
````

 

整理既有專案時，先請代理「掃描舊模式、確認上下文，再提出現代化計畫」，避免一開始就要求全面改寫。也可直接執行下列掃描指令取得發現事項，再逐項檢查與測試。

 

````
npx modern-web-guidance@latest legacy-scan .
````

 

## Modern Web Guidance 與 SEO：如何驗收網站品質

 

Modern Web Guidance 影響的是開發品質。當網站由 AI 代理生成與維護時，過時寫法、不必要的 JavaScript 與錯誤互動，都可能影響載入、可及性與操作體驗，這也是[搜尋引擎最佳化](<https://seo.whoops.com.tw/what-is-seo/>)中技術面的工作。安裝技能本身不會改變搜尋結果，仍需把建議實作成可驗證的網站改善。

 

[Core Web Vitals 三項指標](<https://seo.whoops.com.tw/what-is-core-web-vitals/>)的良好門檻為 LCP ≤ 2.5 秒、INP ≤ 200 毫秒、CLS ≤ 0.1，並以行動版與桌機實際頁面載入的第 75 百分位數分別評估。[web.dev 的門檻說明](<https://web.dev/articles/vitals>)與 [Google 搜尋的頁面體驗文件](<https://developers.google.com/search/docs/appearance/page-experience>)都可核對；取得良好結果並不保證排名居前。

 

導入時先確認安裝器新增或更新的技能檔與專案設定，再檢查代理會在什麼任務讀取它。程式碼與實際頁面的檢查可搭配[網站程式碼與 SEO 驗收方法](<https://seo.whoops.com.tw/site-code-optimization/>)。接著挑一個可控制的改善項目，例如表單驗證或對話方塊，透過拉取請求檢視差異、測試與回復方式，避免一次將所有舊碼改寫。

 

對內容與行銷團隊，可以把「提供瀏覽器支援目標、使用適用的現代指南、交付前後測試結果」寫進網站製作規格。在搜尋入口包含 [AI 搜尋](<https://seo.whoops.com.tw/ai-search/>)的情境下，內容仍須能被正常存取與理解；技能負責協助開發，不能代替內容來源、檢索與索引檢查。

 

[1.0 官方案例](<https://developer.chrome.com/blog/modern-web-guidance-v1#success-stories>)提到 note inc.、WeTV 與 Policybazaar 等團隊的使用經驗。這些案例可用來理解工作流如何結合指南與執行期檢查，結果屬於各自的專案與量測條件，委外驗收仍應要求自己網站的實際資料。

 

容易放在一起討論的還有 [llms.txt 導讀檔](<https://seo.whoops.com.tw/llms-txt-guide/>)：它是網站提供內容入口的提案，Modern Web Guidance 則是給開發代理使用的技能集。兩者用途不同，能否被個別代理採用也不同；[Google 搜尋的 AI 功能文件](<https://developers.google.com/search/docs/appearance/ai-features>)沒有要求額外的 AI 文字檔，不能將 llms.txt 視為取得索引或 AI 引用的必要條件。

 

## 三個容易混淆的名字：MWG、Web Guide 與 Search Central

 

Modern Web Guidance 是開發工具，Web Guide 與 Search Central 則屬於搜尋生態。[Google 的 Web Guide 公告](<https://blog.google/products-and-platforms/products/search/web-guide-labs/>)將它定義為利用 AI 組織搜尋結果的 Search Labs 實驗，最初在 Web 分頁提供。它使用的 query fan-out 技術與 AI Mode 相似，但兩者不能直接畫上等號。

 

圖片：Modern Web Guidance 對應開發技能，Web Guide 對應搜尋實驗，Search Central 對應搜尋文件（來源：https://seo.whoops.com.tw/wp-content/uploads/2026/11/modern-web-guidance-web-guide-search-central.webp）

Modern Web Guidance 提供開發技能；Web Guide 是搜尋實驗；Search Central 提供搜尋文件，三者用途不同。

 

Modern Web Guidance、Web Guide 與 Search Central 用途比較

| 名稱 | 隸屬 | 性質 | 主要使用者 |
| --- | --- | --- | --- |
| Modern Web Guidance | Chrome 團隊，開源專案 | 給編碼代理的技能集 | 寫網站的開發者與 AI 代理 |
| Web Guide | Google Search Labs 實驗 | 以 AI 分組整理網頁搜尋結果 | 搜尋使用者 |
| Search Central | Google Search | 搜尋官方文件與工具 | 網站管理員與 SEO 從業者 |

 

[Google Search Central 搜尋中心](<https://developers.google.com/search>)持續提供搜尋文件，[SEO 入門指南](<https://seo.whoops.com.tw/google-revamped-seo-starter-guide/>)也屬於這個體系。需要查詢檢索、索引或搜尋外觀規則時，應直接閱讀這裡的文件。

 

[Web Guide 搜尋結果整理方式](<https://seo.whoops.com.tw/google-web-guide/>)則以 AI 將相關網頁依查詢面向分組。判斷來源時，可先看用途與網域：Modern Web Guidance 的主文件在 developer.chrome.com，網頁開發學習資料多見於 web.dev，Google 搜尋文件則在 developers.google.com/search。

 

若目標是改善 AI 寫出的網頁，從 Modern Web Guidance 的安裝與指南開始；若要了解搜尋結果如何呈現，查 Web Guide；若要處理網站檢索與索引，查 Search Central。依任務選入口，才能找到對應的操作與驗收方式。

 

## Modern Web Guidance 常見問題

 

### Modern Web Guidance 有官方中文名稱嗎？

 

官方繁體中文文件的部分標題使用「現代化網站指南」，正文與套件也保留 Modern Web Guidance 英文名。搜尋文件、安裝套件或引用專案時，使用英文原名最容易對照，並可避免與 Web Guide、Google Search Central 混淆。

 

### 它和 Google Search Central 是同一個東西嗎？

 

兩者用途不同。Modern Web Guidance 是 Chrome 開發生態提供給編碼代理的技能集；Google Search Central 是搜尋中心，提供檢索、索引與搜尋外觀等官方文件。Web Guide 則是 Search Labs 的搜尋結果整理實驗，三者應依要完成的任務選用。

 

### Modern Web Guidance 要付費嗎？

 

技能集以開源方式提供，可透過 npm 安裝，專案沒有為這套技能收取訂閱費。使用的編碼代理可能另有訂閱或 API 費用，讀取指南與執行任務也可能增加 Token 用量，費用依代理與模型的計費方式而定。

 

### 除了 Claude Code 還支援哪些代理？

 

官方安裝選項包含 Codex、Copilot CLI、Gemini CLI、Antigravity 等，1.0 公告也列出 Cursor 與 WebStorm。支援 Agent Skills 的工具可使用相容的安裝方式；各代理的外掛與更新機制不同，應依官方安裝文件選擇。裝完仍須在任務紀錄中確認指南有被搜尋、讀取與採用。

 

### Modern Web Guidance 和 MCP 伺服器有什麼不同？

 

Modern Web Guidance 透過技能與 CLI 提供開發知識；MCP 是讓代理連接外部工具的通訊協定。前者可協助代理選擇實作方式，後者則可連接瀏覽器等工具檢查結果。兩者可以搭配，例如先查指南，再用 Chrome DevTools 的工具確認實際互動、可及性與效能。

 

### 安裝之後 SEO 排名會變好嗎？

 

安裝本身不會改變搜尋排名。Modern Web Guidance 協助代理改善程式碼與網站體驗，仍要實作、部署並量測，才知道網站是否改善。Google 的頁面體驗文件說明，Core Web Vitals 會用於排名系統，但取得良好分數也不保證排名居前；內容與其他搜尋訊號仍然重要。

 

### 不寫程式的行銷人員需要懂它嗎？

 

可先理解用途與驗收方法。委外或用 AI 工具製作網站時，請團隊列出瀏覽器支援目標、採用的指南、程式碼差異與測試結果，比只要求安裝技能更具體。技能安裝完成只能證明環境準備好，不能代替網站實際可用的證據。

 

[Agent Skills](<https://seo.whoops.com.tw/tag/agent-skills/>)[AI 工具](<https://seo.whoops.com.tw/tag/ai-%e5%b7%a5%e5%85%b7/>)[AI 編碼代理](<https://seo.whoops.com.tw/tag/ai-%e7%b7%a8%e7%a2%bc%e4%bb%a3%e7%90%86/>)[Baseline](<https://seo.whoops.com.tw/tag/baseline/>)[Claude Code](<https://seo.whoops.com.tw/tag/claude-code/>)[Core Web Vitals](<https://seo.whoops.com.tw/tag/core-web-vitals/>)[GitHub Copilot](<https://seo.whoops.com.tw/tag/github-copilot/>)[Google Chrome](<https://seo.whoops.com.tw/tag/google-chrome/>)[Modern Web Guidance](<https://seo.whoops.com.tw/tag/modern-web-guidance/>)[OpenAI Codex](<https://seo.whoops.com.tw/tag/openai-codex/>)[技術 SEO](<https://seo.whoops.com.tw/tag/%e6%8a%80%e8%a1%93-seo/>)[網頁開發](<https://seo.whoops.com.tw/tag/%e7%b6%b2%e9%a0%81%e9%96%8b%e7%99%bc/>)

 

喜歡這篇內容？讓下次搜尋，更容易遇見 Whoops。

[將 Whoops 設為 Google 偏好來源（另開 Google 設定頁）](<https://www.google.com/preferences/source?q=seo.whoops.com.tw>)前往 Google 選取並確認，即可完成設定。

 

[## Sliven 褚崇名](<https://seo.whoops.com.tw/about/#founder-title>)

Sliven 褚崇名是 Whoops SEO 創辦人，負責技術 SEO、內容與關鍵字策略、WordPress 網站重建，以及 AI SEO、AEO、GEO 的量測與內容優化。作者頁可查閱由他署名的〈SEO 是什麼〉與〈AI SEO 是什麼〉等教學；內容中的自有量測、模型觀測與第三方來源應分開判讀，並以各頁標示的方法與限制為準。是否適合特定專案，仍需依網站現況、目標、執行範圍與可驗證成果判斷。

[查看作者文章 →](<https://seo.whoops.com.tw/about/#founder-title>)

 

## 討論與提問

 

### 發佈留言

 

WHOOPS / JOURNAL

## 更多值得一讀的文章

[探索知識庫 ↗](<https://seo.whoops.com.tw/blog/>)

[AI 工具與應用約 25 分鐘閱讀

### Grok Build 是什麼？從安裝到隱私事件，看懂 xAI 的終端機編碼代理

Grok Build 是 xAI 的終端機編碼代理，2026 年 5 月以 beta 登場，8 月起由 Grok 4.6 驅動，免費層已開放。安裝一行指令，Claude Code 設定直接沿用。7 月它曾把整包專案連 git 歷史上傳雲端，其後修復並開源。費用怎麼算、裝了安不安全、跟 Claude Code 怎麼分工，一次看懂。

閱讀文章](<https://seo.whoops.com.tw/grok-build/>) [AI 工具與應用約 24 分鐘閱讀

### 最佳 AI Agent 入門完整教學：定義、原理與跟 LLM 的差異

AI Agent（AI 代理）能依目標規劃步驟、呼叫工具並根據回饋調整行動。本文解釋它與 Agentic AI、LLM 及固定流程的差異，介紹 MCP、四種應用、提示注入風險，以及任務是否適合交辦的判斷方法。

閱讀文章](<https://seo.whoops.com.tw/what-is-ai-agent/>) [搜尋動態與演算法約 9 分鐘閱讀

### Google 2026 年 11 月核心更新啟動：全球推出，預計最多兩週

Google 2026 年 11 月核心更新於台灣時間 11 月 11 日啟動，適用全球所有語言，預計最多兩週。本文整理官方公告、完成狀態、歷次更新差異，以及 Search Console 流量與排名下降的檢查方法。

閱讀文章](<https://seo.whoops.com.tw/google-november-2026-core-update/>)
