Google Modern Web Guidance：用 Agent Skill 做網站安全與 SEO/體驗稽核

Threads 實測 Google Chrome 團隊的 Modern Web Guidance agent skill：用 Hermes 掃網站後發現安全 headers 缺失，並可用 Cloudflare 快速補上。本文核對官方文件，整理 skill 定位、安裝方式、安全 header 清單與導入流程。

2026年5月24日3 分鐘閱讀👁 6

AI Agent Skill / Web Security Audit

Google Modern Web Guidance：把 SEO / 安全 / 效能稽核變成 agent skill

Threads 貼文提到 Google 開源 Modern Web Guidance skill，用 agent 掃網站後發現 X-Content-Type-Options、X-Frame-Options、CSP、Referrer-Policy 等安全 header 缺失，並可透過 Cloudflare Configuration Headers 快速補上。官方頁面的定位更廣：這是一組 evergreen、expert-vetted 的 web guidance，讓 AI coding agent 更容易寫出現代、可及、效能佳且安全的網站。

重點修正：這不是單純「SEO audit skill」。官方 Modern Web Guidance 涵蓋 UX、CSS layout、performance、forms/UI、accessibility 與 security。SEO/AI Search 能見度只是其中一個可延伸使用場景；安全 header audit 則是最容易立刻看出價值的低垂果實。

官方定位

Modern Web Guidance 是一組 agent skills / SKILL.md 與 CLI，提供現代 Web API、效能、可及性、安全、fallback 等專家整理過的指引，避免 coding agent 產生過時或 bloated 的 legacy 寫法。

安裝方式

官方推薦 npx modern-web-guidance@latest install；也支援 Vercel Agent Skills、Claude Code plugin、Copilot CLI、Antigravity CLI 等工作流。

貼文實測

作者把 skill 丟進 Hermes 掃兩個網站，發現常見 security headers 缺失：X-Content-Type-Options、X-Frame-Options、Content-Security-Policy、Referrer-Policy。

留言補充

留言提到 securityheaders.com 也可掃同類問題，且可用腳本打 Cloudflare API 補常用 headers。這表示 skill 的價值不只在掃描，而在「讓 agent 接著修」。

Header	目的	常見起手式	注意事項
X-Content-Type-Options	避免瀏覽器 MIME sniffing，把非預期內容當 script/css 執行。	`nosniff`	通常低風險、很適合先補。
X-Frame-Options	降低 clickjacking，被其他網站 iframe 嵌入。	`DENY` 或 `SAMEORIGIN`

工具/方法	適合用途	限制
Modern Web Guidance skill	讓 AI agent 在 coding workflow 中理解現代 Web、效能、可及性、安全與 fallback。	仍需人工審核關鍵設定，尤其 CSP 與第三方整合。
Chrome DevTools for agents	搭配 skill 做即時效能、accessibility tree、console logs 與精準修補。	需要能跑 browser / DevTools 工作流。
securityheaders.com	快速獨立檢查 HTTP response security headers。	只看 headers 分數，不知道你的 app 為何需要某些例外。
Cloudflare Header Rules / API	不用改 code，快速在 edge 補 security headers 或批次治理多站。	CSP 仍可能破壞前端；Cloudflare 規則與 origin header 疊加要看優先序。