跳過導覽 · 跳到主要內容
網站架設教學、主機評測與工具實測 每週一封 · 免費訂閱
網站架設UPDATED 2026.09

【AMP是什麼】3大核心組件解析|導入決策框架+WordPress實作教學

讀完這篇你能判斷自己的網站是否需要導入 AMP,理解三大核心組件的運作原理,並透過 WordPress 外掛完成 AMP 頁面的建置與驗證。

AMP(Accelerated Mobile Pages)是 Google 發起的開源行動網頁加速框架,透過精簡 HTML、非同步載入 JavaScript 和 CDN 快取三層機制,大幅提升行動裝置的網頁載入速度。 本文完整解析 AMP 的技術原理、優缺點、導入決策框架、WordPress 實作步驟,以及替代方案比較。

AMP 是什麼?定義與現況

AMP 的全名是 Accelerated Mobile Pages(加速行動頁面),是一套由 Google 在 2015 年發起的開源框架。它的核心目標很單純:讓行動裝置上的網頁能在不到一秒內完成載入。

AMP 透過嚴格限制 HTML 標籤、禁止自訂 JavaScript、強制使用非同步載入機制,再搭配 Google AMP Cache 的 CDN 分發,達到極速載入的效果。在早期,Google 搜尋結果中的「Top Stories」輪播區塊只開放給 AMP 頁面,這讓新聞媒體幾乎被迫導入 AMP。

AMP 官方網站首頁,展示 Accelerated Mobile Pages 框架的核心概念
來源:AMP

重大轉變:Core Web Vitals 取代 AMP 優先

Google 在 2021 年 6 月正式推出 Page Experience 更新,將 Core Web Vitals(LCP、FID、CLS)納入排名因素。這次更新帶來一個關鍵改變:AMP 不再是進入 Top Stories 輪播的必要條件。任何符合 Core Web Vitals 標準的網頁,無論是否為 AMP 格式,都有機會出現在 Top Stories 區塊。

這個政策轉變直接改變了 AMP 的戰略價值。在此之前,新聞網站導入 AMP 幾乎是「不得不做」的事;在此之後,AMP 變成了「可選方案之一」。

目前的使用現況

截至撰文時,AMP 的生態系呈現明顯的分化趨勢:

  • 持續使用 AMP 的場景:部分新聞網站、內容型部落格、行動流量佔比極高且伺服器資源有限的網站
  • 棄用 AMP 的趨勢:包括 BBC、The Verge 等主流媒體已陸續移除 AMP 版本,轉而直接優化 Core Web Vitals
  • Google 官方立場:AMP 專案仍持續維護,但 Google 不再給予 AMP 頁面搜尋排名上的特殊優待

AMP 的技術原理:三大核心組件

AMP 之所以能達到極速載入,靠的是三個互相配合的核心組件。理解這三個組件,就能理解 AMP 的所有優勢和限制。

AMP 技術架構圖,展示 AMP HTML、AMP JS、AMP Cache 三大組件的運作原理
來源:AMP Websites – amp.dev

AMP HTML:精簡版的 HTML

AMP HTML 本質上是標準 HTML 的子集,但加上了嚴格的限制規則:

  • 禁止使用的標籤<img> 改為 <amp-img><video> 改為 <amp-video>,所有媒體元素都必須使用 AMP 專屬標籤
  • CSS 限制:所有樣式必須內聯(inline),且總大小不得超過 75KB
  • 禁止外部樣式表:不能使用 <link rel="stylesheet"> 載入外部 CSS 檔案

這些限制的目的是確保瀏覽器在解析 HTML 時,不需要等待外部資源下載,就能立即開始渲染頁面。

AMP JS:非同步載入機制

AMP 的 JavaScript 框架是整個加速機制的核心:

  • 完全禁止自訂 JavaScript:開發者不能在 AMP 頁面中加入任何自己撰寫的 JS 程式碼
  • 非同步載入所有資源:AMP JS 確保所有外部資源(圖片、廣告、影片)都以非同步方式載入,不會阻塞頁面渲染
  • 預先計算版面配置:AMP 要求所有媒體元素在 HTML 中就指定寬高,避免載入過程中的版面位移(Layout Shift)

這個機制直接解決了傳統網頁最常見的效能瓶頸——第三方 JavaScript 造成的渲染阻塞。

AMP Cache:CDN 加速分發

Google AMP Cache 是一個基於代理的內容傳遞網路(CDN),它會自動抓取並快取所有通過驗證的 AMP 頁面:

  • 預先快取:當 AMP 頁面被 Google 索引後,Google AMP Cache 會自動儲存頁面副本
  • 就近分發:使用者點擊搜尋結果時,頁面直接從最近的 Google CDN 節點載入,而非從你的原始伺服器取得
  • 自動優化:Google AMP Cache 會自動壓縮圖片、最小化 CSS,進一步減少傳輸量

三個組件的協作邏輯是:AMP HTML 確保頁面結構精簡、AMP JS 確保載入過程不被阻塞、AMP Cache 確保內容從最近的節點快速送達。這三層加速疊加在一起,才能達到「不到一秒載入」的效果。

AMP 三大核心組件:AMP HTML(精簡標籤、CSS 限制 75KB、禁止外部樣式表)、AMP JS(禁止自訂 JS、非同步載入、預先計算版面)、AMP Cache(預先快取、CDN 就近分發、自動優化壓縮)
▲ AMP 三大核心組件:AMP HTML(精簡標籤、CSS 限制 75KB、禁止外部樣式表)、AMP JS(禁止自訂 JS、非同步載入、預先計算版面)、AMP Cache(預先快取、CDN 就近分發、自動優化壓縮)

AMP 與傳統網頁的差異比較

以下比較表整理了 AMP 頁面與傳統網頁在 11 個關鍵維度上的差異,特別更新了 2021 年後 SEO 相關欄位的描述:

特性 AMP(加速行動頁面) 傳統網頁
載入速度 極快,三層加速機制 視優化程度而定,可能較慢
快取機制 Google AMP Cache 自動快取 依賴瀏覽器快取或伺服器設定
編碼規範 必須遵循 AMP HTML 規範 無特定限制,完全自由
JavaScript 禁止自訂 JS,僅能用 AMP 組件 可使用任何 JS 框架或函式庫
CSS 限制 內聯樣式,上限 75KB 無限制
SEO 影響 不再享有排名優待(2021 年後) 透過 Core Web Vitals 優化可達同等效果
Core Web Vitals LCP/CLS 表現通常優異,但設計受限 需主動優化,但優化空間更大
互動性 受限,複雜互動難以實現 完全自由,支援所有互動模式
分析工具 僅支援 AMP Analytics 組件 支援所有分析工具
廣告支援 需使用 AMP 廣告組件 所有廣告方案皆可用
維護成本 需額外維護 AMP 版本 單一版本維護

價格僅供參考,以官網為準

AMP 對 Core Web Vitals 的實際影響

Core Web Vitals 是 Google 用來衡量網頁使用者體驗的三項核心指標,AMP 頁面在這三項指標上有不同的表現:

LCP(Largest Contentful Paint,最大內容繪製):AMP 頁面由於強制非同步載入和 CDN 快取,LCP 表現通常優於未優化的傳統網頁。根據 HTTP Archive 的數據,AMP 頁面的 LCP 中位數約在 1.5-2.5 秒之間。

CLS(Cumulative Layout Shift,累計版面位移):這是 AMP 表現最突出的指標。由於 AMP 強制要求所有媒體元素預先指定寬高,版面位移問題幾乎不存在,CLS 分數通常接近 0。

INP(Interaction to Next Paint,互動到下一次繪製):這是 AMP 的弱項。由於禁止自訂 JavaScript,AMP 頁面的互動回應能力受限。不過,對於以閱讀為主的內容頁面,INP 的影響相對較小。

值得注意的是,INP 已在 2024 年 3 月正式取代 FID 成為 Core Web Vitals 的第三項指標。

AMP vs 傳統網頁的 Core Web Vitals 表現比較——左欄 AMP:LCP 優(CDN 快取加速)、CLS 極優(強制預設寬高)、INP 受限(禁止自訂 JS);右欄傳統網頁:LCP 視優化而定、CLS 需主動優化、INP 完全可控
▲ AMP vs 傳統網頁的 Core Web Vitals 表現比較——左欄 AMP:LCP 優(CDN 快取加速)、CLS 極優(強制預設寬高)、INP 受限(禁止自訂 JS);右欄傳統網頁:LCP 視優化而定、CLS 需主動優化、INP 完全可控

AMP 的優點分析

極速載入——技術機制說明

AMP 頁面的載入速度優勢來自三個層次的加速:

第一層:HTML/CSS/JS 限制。禁止外部樣式表和自訂 JavaScript,意味著瀏覽器不需要等待這些資源下載和執行,就能開始渲染頁面內容。傳統網頁最常見的效能瓶頸——第三方追蹤腳本、社群分享按鈕、廣告載入——在 AMP 中都被嚴格管控。

第二層:優先資源載入。AMP 允許開發者指定哪些資源優先載入,確保使用者首先看到的是最重要的內容(通常是首屏文字和主要圖片),而非廣告或側邊欄。

第三層:AMP Cache 分流。當使用者從 Google 搜尋結果點擊 AMP 頁面時,內容直接從 Google 的 CDN 節點送達,不需要經過你的原始伺服器。這不僅加快了載入速度,也大幅降低了伺服器的負擔。

AMP 頁面載入速度優化機制示意圖
來源:Get Started – amp.dev

行動裝置閱讀體驗優化

AMP 的設計限制在某種程度上反而成為閱讀體驗的優勢:

  • 強制響應式設計:AMP 的媒體元素標籤(如 <amp-img>)內建響應式支援,確保圖片和影片在不同螢幕尺寸上都能正確顯示
  • 零版面位移:預先指定所有元素的寬高,使用者在閱讀時不會遇到「文字突然跳動」的問題
  • 簡化版面降低跳出率:精簡的頁面設計減少了視覺干擾,對於新聞閱讀和部落格文章等以文字為主的內容,使用者的停留時間通常較長
AMP 頁面在行動裝置上的閱讀體驗展示
來源:Web Stories – amp.dev

行動搜尋可見度提升(含現況說明)

2021 年之前的情況:Google 在行動搜尋結果中會以閃電圖示標記 AMP 頁面,並且 Top Stories 輪播區塊(即搜尋結果頂部的資訊輪播)僅開放給 AMP 頁面。這個輪播位置佔據搜尋結果的最上方,對品牌曝光和點擊率有顯著的提升效果——新聞網站如果不導入 AMP,就完全無法出現在這個高曝光位置。

2021 年之後的現況:Top Stories 不再要求 AMP 格式,閃電圖示也已移除。但 AMP 頁面仍然可能因為較快的載入速度而在行動搜尋中獲得間接的排名優勢——因為 Core Web Vitals 本身就是排名因素之一。

AMP 頁面在行動搜尋結果中的展示方式
來源:AMP Websites – amp.dev

降低伺服器資源消耗

對於伺服器資源有限的網站,AMP 的分流效果特別明顯:

  • 減少數據傳輸量:AMP 頁面的平均大小遠小於傳統網頁,減少了頻寬消耗
  • AMP Cache 承擔流量:大部分來自 Google 搜尋的流量由 AMP Cache 處理,不會打到你的原始伺服器
  • 減少第三方請求:禁止自訂 JavaScript 意味著更少的外部 HTTP 請求
AMP 頁面降低伺服器資源消耗的機制示意圖
來源:Get Started – amp.dev

AMP 的缺點與限制

設計與功能受限

AMP 最大的代價就是設計自由度的犧牲:

  • 自訂 JavaScript 完全禁止:任何需要自訂 JS 的功能——互動式表單、動態篩選、即時搜尋、複雜動畫——在 AMP 頁面上都無法實現
  • CSS 大小限制 75KB:對於品牌設計複雜的網站,75KB 的 CSS 上限可能不夠用。作為參考,一個中等複雜度的企業網站,CSS 檔案通常在 100-300KB 之間
  • 互動功能受限:雖然 AMP 提供了 <amp-carousel><amp-accordion> 等互動組件,但這些組件的自訂空間有限,難以實現與品牌設計完全一致的視覺效果

解決方式:善用 AMP 的樣式組件(如 <amp-bind><amp-selector>)可以實現部分互動效果,但複雜度遠不及原生 JavaScript。如果你的網站設計需要豐富的互動體驗,AMP 可能不是最佳選擇。

雙版本維護成本

如果你選擇同時維護 AMP 和非 AMP 兩個版本的頁面,工作量會顯著增加:

  • 內容同步:每次更新文章內容,都需要確保 AMP 版本同步更新
  • 樣式維護:AMP 版本和非 AMP 版本的 CSS 是分開的,任何設計調整都需要做兩次
  • 測試成本:每次改版都需要分別測試兩個版本在不同裝置上的顯示效果

解決方式:使用 canonical 標籤正確設定 AMP 頁面與原始頁面的對應關係,避免搜尋引擎將兩個版本視為重複內容。具體做法是在 AMP 頁面的 <head> 中加入 <link rel="canonical" href="原始頁面URL">,並在原始頁面中加入 <link rel="amphtml" href="AMP頁面URL">

第三方平台依賴風險

使用 AMP Cache 意味著你的頁面實際上是由 Google 的伺服器提供的,這帶來幾個風險:

  • URL 顯示問題:透過 AMP Cache 載入的頁面,瀏覽器網址列會顯示 Google 的網域(如 google.com/amp/s/你的網域/...),而非你自己的網域。這對品牌識別度有負面影響
  • 政策變更風險:Google 可以隨時調整 AMP Cache 的政策,例如改變快取更新頻率、調整支援的功能等
  • 內容控制權降低:快取版本的更新可能有延遲,你無法即時控制使用者看到的內容版本

解決方式:Signed HTTP Exchanges(SXG)技術可以讓 AMP 頁面在 AMP Cache 中仍然顯示你自己的網域。不過 SXG 的設定較為複雜,需要伺服器端的支援。

數據追蹤限制

由於禁止自訂 JavaScript,AMP 頁面的數據追蹤能力受到限制:

  • GA4 事件追蹤受限:標準的 GA4 追蹤碼無法直接在 AMP 頁面上使用,必須改用 <amp-analytics> 組件
  • 自訂事件追蹤複雜:在傳統網頁上只需幾行 JavaScript 就能實現的事件追蹤(如按鈕點擊、捲動深度),在 AMP 上需要透過 AMP Analytics 的 JSON 設定來實現,學習曲線較陡
  • 第三方追蹤工具相容性:並非所有分析工具都支援 AMP,選擇受限

解決方式:使用 <amp-analytics> 組件搭配 GA4 的 Measurement Protocol,可以實現大部分的追蹤需求。具體設定方式是在 AMP 頁面中加入 <amp-analytics type="gtag"> 標籤,並在 JSON 設定中定義要追蹤的事件。

AMP 四大限制與解決方式:設計受限(使用 AMP 樣式組件)、雙版本維護(canonical 標籤設定)、平台依賴(Signed HTTP Exchanges)、追蹤限制(amp-analytics 組件)
▲ AMP 四大限制與解決方式:設計受限(使用 AMP 樣式組件)、雙版本維護(canonical 標籤設定)、平台依賴(Signed HTTP Exchanges)、追蹤限制(amp-analytics 組件)

我的網站需要 AMP 嗎?導入決策框架

適合導入 AMP 的情境

以下情境中,AMP 仍然能帶來明確的效益:

  • 新聞/媒體網站:內容以文字和圖片為主,更新頻率高,行動流量佔比通常超過 70%。AMP 的快速載入對新聞閱讀體驗有直接幫助
  • 內容型部落格:文章頁面結構簡單,不需要複雜互動功能,AMP 的限制影響最小
  • 行動流量佔比 > 70% 的網站:如果你的 Google Analytics 數據顯示行動裝置流量佔絕大多數,AMP 的投資報酬率較高
  • 伺服器資源有限的網站:AMP Cache 的分流效果可以顯著降低伺服器負擔,特別適合使用共享主機的小型網站

不建議導入 AMP 的情境

以下情境中,AMP 的限制可能大於效益:

  • 電商網站:購物車、結帳流程、產品篩選等功能都需要自訂 JavaScript,AMP 無法支援
  • 需要豐富互動的 SaaS 產品頁:產品展示、即時演示、互動式定價計算器等功能在 AMP 上無法實現
  • 已有良好 Core Web Vitals 分數的網站:如果你的網站在 PageSpeed Insights 上已經拿到綠色分數(90+),導入 AMP 帶來的邊際效益很小
  • 品牌設計要求高的網站:AMP 的 CSS 限制和組件限制會讓品牌設計難以完整呈現
AMP 導入決策框架——條件1:網站類型是新聞/部落格?是→考慮導入,否→條件2;條件2:行動流量佔比>70%?是→考慮導入,否→條件3;條件3:Core Web Vitals 已達標?是→不需要 AMP,否→優先優化 CWV
▲ AMP 導入決策框架——條件1:網站類型是新聞/部落格?是→考慮導入,否→條件2;條件2:行動流量佔比>70%?是→考慮導入,否→條件3;條件3:Core Web Vitals 已達標?是→不需要 AMP,否→優先優化 CWV

AMP 的替代方案

如果你決定不導入 AMP,以下替代方案可以達到類似甚至更好的效能優化效果:

Core Web Vitals 直接優化:透過 Google PageSpeed Insights 找出效能瓶頸,針對 LCP、CLS、INP 三項指標逐一改善。常見的優化手段包括:圖片壓縮與延遲載入、移除未使用的 CSS/JS、啟用伺服器端快取。這是目前最主流的做法,因為它不需要犧牲設計自由度。

PWA(漸進式網頁應用):PWA 可以讓網頁具備類似原生 App 的體驗,包括離線瀏覽、推播通知、快速載入。與 AMP 不同,PWA 不限制 JavaScript 的使用,設計自由度更高。

靜態網站生成(SSG):使用 Next.js、Gatsby 等框架將網頁預先生成為靜態 HTML,載入速度可以媲美 AMP,同時保留完整的 JavaScript 互動能力。

CDN 加速:使用 Cloudflare(全球超過 330 個城市的 CDN 節點)等 CDN 服務,可以將你的網頁內容快取到全球各地的節點,大幅縮短使用者的載入時間。這個方案的優勢是不需要修改任何程式碼。隨著 HTTP/2 協定的普及,CDN 搭配 HTTP/2 的伺服器推送(Server Push)和多路複用(Multiplexing)功能,可以在單一連線中同時傳輸多個資源,進一步縮小與 AMP 之間的速度差距——這也是 AMP 的戰略重要性逐漸降低的技術背景之一。

方案 載入速度 設計自由度 導入難度 適合對象
AMP ★★★★★ ★★☆☆☆ ★★★☆☆ 新聞/部落格
CWV 優化 ★★★★☆ ★★★★★ ★★★☆☆ 所有網站
PWA ★★★★☆ ★★★★★ ★★★★☆ 需要 App 體驗的網站
SSG(Next.js) ★★★★★ ★★★★★ ★★★★★ 有開發團隊的網站
CDN(Cloudflare) ★★★★☆ ★★★★★ ★☆☆☆☆ 所有網站

如果你正在考慮如何架設網站,選擇一個本身就有良好效能表現的平台,比事後導入 AMP 更有效率。例如 WordPress.com 的託管方案內建 CDN 和快取機制,免費方案即可開始建站,不需要額外處理效能優化。

推薦工具 · 聯盟連結
WP
WordPress.com

想要 WordPress 的生態,又不想自己顧主機的更新與備份,就從託管版開始。免費方案足夠把站做起來;要綁自訂網域,才需要往上升級。

AMP 實作教學:WordPress 網站導入步驟

如果你評估後決定導入 AMP,以下是在 WordPress 網站上實作的完整步驟。開始之前,請確認你已經有一個運作中的 WordPress 網站。如果還沒有,可以參考 WordPress 教學完成基本架設。

安裝 AMP for WordPress 外掛

步驟 1:搜尋外掛

登入 WordPress 後台,前往「外掛」→「安裝外掛」,在搜尋欄輸入「AMP」。找到由 AMP Project Contributors 開發的官方外掛「AMP」,點擊「立即安裝」。

步驟 2:啟用外掛

安裝完成後,點擊「啟用」。啟用後,WordPress 後台左側選單會出現「AMP」選項。

步驟 3:選擇 AMP 模式

點擊「AMP」進入設定頁面,你會看到三種模式選項:

  • 標準模式(Standard):整個網站都使用 AMP 格式,不再維護非 AMP 版本。適合內容簡單的部落格,但風險最高——如果佈景主題或外掛不相容,可能導致功能異常
  • 過渡模式(Transitional):同時提供 AMP 和非 AMP 兩個版本,使用相同的佈景主題。適合想要逐步測試 AMP 效果的網站
  • 讀者模式(Reader):AMP 版本使用獨立的簡化佈景主題,與原始網站的設計完全分開。這是最安全的選項,適合初次嘗試 AMP 的網站

建議:如果你是第一次導入 AMP,選擇「讀者模式」最安全。等確認 AMP 頁面運作正常後,再考慮切換到過渡模式。

WordPress 後台安裝 AMP for WordPress 外掛的操作畫面
來源:AMP for WordPress

設定與自訂 AMP 頁面

樣式設定:在 AMP 設定頁面中,你可以自訂 AMP 頁面的基本樣式,包括品牌色彩、字型、Logo 等。讀者模式下,AMP 外掛提供了幾個內建的簡化佈景主題可供選擇。

廣告整合:如果你的網站有投放 Google AdSense 廣告,可以在 AMP 設定中啟用廣告支援。AMP 外掛會自動將標準的 AdSense 廣告碼轉換為 <amp-ad> 格式。

Google Analytics 整合:在 AMP 設定的「Analytics」區塊中,輸入你的 GA4 Measurement ID(格式為 G-XXXXXXXXXX)。外掛會自動在 AMP 頁面中加入 <amp-analytics> 組件,追蹤基本的頁面瀏覽數據。

常見錯誤與排除

問題 1:安裝後版面跑版

這是最常見的問題,通常是因為佈景主題使用了 AMP 不支援的 CSS 或 HTML 標籤。解決方式:

  1. 切換到讀者模式,使用 AMP 內建的簡化佈景主題
  2. 檢查 AMP 外掛的「驗證」頁面,找出具體的不相容元素
  3. 逐一修正或移除不相容的 CSS 規則

問題 2:外掛相容性衝突

某些 WordPress 外掛(特別是會注入自訂 JavaScript 的外掛)可能與 AMP 衝突。排查步驟:

  1. 進入 AMP 設定的「相容性」頁面,查看哪些外掛被標記為不相容
  2. 暫時停用被標記的外掛,確認 AMP 頁面是否恢復正常
  3. 尋找該外掛的 AMP 相容替代方案,或聯繫外掛開發者

問題 3:AMP 頁面未被 Google 索引

確認以下幾點:

  • AMP 頁面的 canonical 標籤是否正確指向原始頁面
  • 在 Google Search Console 中提交 AMP 網站地圖
  • 使用 Google AMP Test 工具確認頁面通過驗證

了解更多 WordPress 是什麼以及它的外掛生態系,可以幫助你更好地管理 AMP 與其他外掛的相容性。

如果你還沒有 WordPress 主機,Bluehost 是 WordPress 官方推薦的主機服務,Basic 方案每月 NT$94 起,含免費域名SSL 憑證,選方案即可開始架站。

推薦工具 · 聯盟連結
HG
Hostinger

預算有限、又想要有自己的主機時的常見起點。方案以網站數與流量分級,站長大之後再往上換。

AMP 頁面驗證:Google AMP Test 操作說明

完成 AMP 頁面建置後,必須透過 Google 官方的 AMP 測試工具驗證頁面是否符合 AMP 標準。只有通過驗證的頁面才能被 Google AMP Cache 快取,並在搜尋結果中正確顯示。

注意:AMP 頁面必須使用 HTTPS 協定。如果你的網站還沒有安裝 SSL 憑證,請先完成 SSL 憑證的設定。

驗證步驟

步驟 1:前往 Google AMP Test 工具(search.google.com/test/amp)

步驟 2:在輸入框中貼上你的 AMP 頁面網址,點擊「測試網址」

步驟 3:等待分析完成(通常需要 10-30 秒)

步驟 4:解讀報告結果

Google AMP Test 工具的測試結果頁面,顯示驗證通過或錯誤訊息
來源:AMP Test – Google Search Console

報告解讀

測試結果頁面分為幾個區塊:

  • 驗證狀態:綠色勾勾表示通過,紅色叉叉表示有錯誤需要修正
  • 錯誤清單:列出所有不符合 AMP 標準的元素,每個錯誤都附有行號和說明
  • 警告清單:不影響驗證結果,但建議修正的項目
  • 預覽:顯示 AMP 頁面在搜尋結果中的預覽效果

常見驗證錯誤與修正方式

錯誤 1:使用了禁止的 HTML 標籤 例如使用了 <img> 而非 <amp-img>。修正方式:將所有 <img> 標籤替換為 <amp-img>,並加上 widthheight 屬性。如果你使用 AMP for WordPress 外掛,這個轉換通常是自動完成的。

錯誤 2:CSS 超過 75KB 限制 修正方式:精簡 CSS,移除未使用的樣式規則。可以使用 PurgeCSS 等工具自動移除未使用的 CSS。

錯誤 3:包含自訂 JavaScript 修正方式:移除所有自訂的 <script> 標籤,改用對應的 AMP 組件。例如,將自訂的圖片輪播 JavaScript 替換為 <amp-carousel> 組件。

錯誤 4:缺少必要的 AMP 樣板標記 AMP 頁面的 <html> 標籤必須包含 amp 屬性,且 <head> 中必須包含 AMP 的樣板 CSS(<style amp-boilerplate>)。使用 AMP for WordPress 外掛通常會自動處理這些標記。

AMP 驗證流程四步驟:進入 Google AMP Test → 輸入 AMP 頁面網址 → 解讀錯誤報告 → 修正錯誤並重新驗證
▲ AMP 驗證流程四步驟:進入 Google AMP Test → 輸入 AMP 頁面網址 → 解讀錯誤報告 → 修正錯誤並重新驗證

結論

AMP 是一項有明確技術優勢的行動網頁加速框架,但在 2021 年 Core Web Vitals 更新之後,它的戰略價值已經大幅改變。以下是本文的核心重點:

  • AMP 的核心價值:透過 AMP HTML、AMP JS、AMP Cache 三層機制達到極速載入,對 CLS 指標的改善效果尤其顯著
  • 不再是 SEO 必需品:AMP 不再是進入 Top Stories 的必要條件,Core Web Vitals 才是目前的排名因素
  • 適合特定場景:新聞網站、內容型部落格、行動流量佔比高且伺服器資源有限的網站仍可受益
  • 替代方案成熟:Core Web Vitals 直接優化 + CDN 加速的組合,對大多數網站來說是投資報酬率更高的選擇
  • 導入前先評估:使用 PageSpeed Insights 檢查你的 Core Web Vitals 分數,如果已經達標,不需要額外導入 AMP

下一步行動建議:先用 Google PageSpeed Insights 測試你的網站效能。如果行動版分數低於 70 分,優先處理 LCP 和 CLS 的優化。如果你的網站是新聞或部落格類型,且行動流量佔比超過 70%,再考慮透過 AMP for WordPress 外掛導入 AMP。

推薦工具 · 聯盟連結
WP
WordPress.com

想要 WordPress 的生態,又不想自己顧主機的更新與備份,就從託管版開始。免費方案足夠把站做起來;要綁自訂網域,才需要往上升級。

AMP 常見問題

AMP 頁面的 URL 為什麼顯示 Google 的網域?

當使用者從 Google 搜尋結果點擊 AMP 頁面時,頁面是由 Google AMP Cache 提供的,因此瀏覽器網址列會顯示類似 google.com/amp/s/你的網域/... 的 URL。這個問題可以透過 Signed HTTP Exchanges(SXG)技術解決,SXG 允許 AMP Cache 在提供快取內容的同時,仍然顯示你自己的網域。不過 SXG 的設定需要伺服器端支援,技術門檻較高。

AMP 會影響 Google Analytics 數據嗎?

會。由於 AMP 禁止自訂 JavaScript,標準的 GA4 追蹤碼無法直接使用。你需要改用 <amp-analytics> 組件來追蹤 AMP 頁面的數據。基本的頁面瀏覽追蹤可以正常運作,但自訂事件追蹤(如按鈕點擊、表單提交)需要透過 AMP Analytics 的 JSON 設定來實現,設定方式與標準 GA4 不同。使用 AMP for WordPress 外掛可以簡化這個設定過程。

現在還值得導入 AMP 嗎?

取決於你的網站類型。如果你經營的是新聞網站或內容型部落格,且行動流量佔比超過 70%,AMP 仍然能帶來載入速度和使用者體驗上的改善。但對於一般的企業網站、電商網站或需要豐富互動功能的網站,建議優先透過 Core Web Vitals 優化和 CDN 加速來提升效能,這些方案不會犧牲設計自由度。

如何創建 AMP 頁面?

AMP 頁面由三個核心組件構成:AMP HTML(使用 AMP 專屬標籤如 <amp-img> 取代標準 HTML 標籤)、AMP JS(引入 AMP 的 JavaScript 函式庫來處理非同步載入和版面計算)、AMP Cache(頁面通過驗證後由 Google 自動快取和分發)。如果你使用 WordPress,最簡單的方式是安裝 AMP for WordPress 官方外掛,外掛會自動處理標籤轉換和樣板標記——詳細的安裝與設定步驟請參考本文的「AMP 實作教學:WordPress 網站導入步驟」段落。

AMP 頁面需要 HTTPS 嗎?

是的,AMP 頁面必須使用 HTTPS 協定。這是 AMP 規範的硬性要求,未使用 HTTPS 的頁面無法通過 AMP 驗證,也不會被 Google AMP Cache 快取。大多數現代主機服務(如 BluehostHostinger)都提供免費的 SSL 憑證,設定過程通常只需要幾分鐘。

不會寫程式可以導入 AMP 嗎?

可以。如果你使用 WordPress,安裝 AMP for WordPress 官方外掛後,外掛會自動將你的頁面轉換為 AMP 格式,不需要手動撰寫任何程式碼。選擇「讀者模式」是最簡單的方式,外掛會使用內建的簡化佈景主題來呈現 AMP 版本。如果你使用其他架站平台(如 WordPress.com 的託管方案),平台本身的效能優化通常已經足夠,不一定需要額外導入 AMP。

如何移除已導入的 AMP?

移除 AMP 需要謹慎操作,避免產生大量 404 錯誤:

  1. 在 Google Search Console 中確認所有 AMP 頁面的索引狀態
  2. 停用 AMP for WordPress 外掛(不要直接刪除)
  3. 確認所有原本的 AMP URL 都正確回傳 301 重新導向到對應的非 AMP 頁面
  4. 在 Google Search Console 中提交更新後的網站地圖
  5. 等待 Google 重新爬取並更新索引(通常需要數週時間)
  6. 確認所有 AMP 頁面都已從搜尋結果中移除後,再完全刪除外掛
《借力 Lever Stack》— 每週 5 分鐘,跟上值得用的 AI 與工具。
其餘的,我們替你篩掉。




訂閱即同意接收《借力 Lever Stack》電子報 · 隨時可退訂