AMP 與 PWA 優化

快速載入與離線體驗，提升使用者滿意度。

作者：哇哇工作站更新於：2025年8月18日

AMP 與 PWA 基礎全接地氣

AMP 是啥？

AMP（Accelerated Mobile Pages）是一套讓手機瀏覽器能更快顯示網頁的技術。

想像你在手機上點開一篇新聞，畫面馬上閃現，而不是等所有圖片跟腳本都下載完畢再顯示。

Google 於 2015 年推出 AMP，目的是解決「行動裝置載入慢」的問題。

為什麼要使用 AMP？

網頁載入速度大幅提升，平均比普通網頁快 70%~80%。
使用者體驗更好：減少等待時間、降低跳出率。
在 Google 搜尋結果中往往會以「AMP 頁面」標示，且有機會進入「特色卡片」或「Top Stories」。

AMP 的限制

只能使用經過審核的 HTML 標籤，不能加入自訂腳本。
多數第三方插件無法直接使用，需要改寫。

如何快速上手 AMP？

1️⃣ 在現有 HTML 頁面加上 amp 標籤：

把 <html> 改成 <html ⚡> 或 <html amp>。

2️⃣ 引入 AMP CSS 與 JS：

在 <head> 加入 <script async src="https://cdn.ampproject.org/v0.js"></script>。
若需要圖片、影片或表格等元件，還得額外載入對應的 AMP 模組，例如 amp-img。

3️⃣ 替換常見標籤：

例如 <img> 改成 <amp-img width="300" height="200" src="..." layout="responsive"></amp-img>。
用 <amp-iframe>, <amp-youtube> 等替代原生 iframe 或 YouTube 影片。

4️⃣ 測試驗證：

把頁面上傳到瀏覽器，Google 的 AMP 頁面測試工具會指出錯誤。
修正後重新測試直到通過。

5️⃣ 在網站中加入 amp.json 或 <link rel="canonical" href="..."> 以確保搜尋引擎能辨識為 AMP。

PWA 也很酷！

PWA（Progressive Web App）不單只讓網頁更快、更穩定，還能把網站變成像原生 app 那樣的使用體驗。這不僅對 SEO 有正面影響，也能提升用戶黏著度。

為什麼 PWA 重要？

離線可用：即使網路斷線，使用者也能瀏覽先前載入的內容。這降低跳出率。
快速啟動：利用 Service Worker 快速緩存資源，讓頁面在 2 秒內顯示給使用者。
推播通知：可透過 Push API 發送訊息，提升再次訪問機會。

如何把 PWA 融入 SEO 策略？

使用 HTTPS：所有 PWA 必須在安全環境下執行，Google 也將此列為排名因素。
提供 Web App Manifest：讓搜尋引擎知道你的網頁可被安裝成 app，並且可以直接從結果中顯示安裝提示。
結構化資料（Schema.org）：在 PWA 中加入結構化標記，協助搜尋機器人抓取內容關鍵字與類別。

範例：簡易 Manifest 設定

{
  "name": "酷炫網站",
  "short_name": "酷站",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#0000FF",
  "icons": [
    {"src":"/icon-192.png","sizes":"192x192","type":"image/png"},
    {"src":"/icon-512.png","sizes":"512x512","type":"image/png"}
  ]
} ```

**常見的 PWA 優化技巧**
- **Lazy Loading**：只在需要時載入圖片與腳本，減少首屏加載時間。
- **Cache API 管理**：設定合理的快取失效策略，確保內容即時更新又不影響速度。
- **SEO Friendly URLs**：保持傳統 URL 結構，即使使用 Service Worker 也不會破壞搜尋引擎抓取。

為什麼 SEO 要用 AMP/PWA

在手機使用者佔全站流量 60% 以上的今天，速度就是排名與轉換的關鍵。AMP（Accelerated Mobile Pages）和 PWA（Progressive Web App）都是讓網頁載入更快、體驗更順暢的技術方案。

以下列舉幾個你可能已經感受到但還沒真正理解的理由：

網頁速度提升 50% 以上，平均停留時間自然會拉長。
Google 先前就把「Core Web Vitals」納入排名指標，AMP 與 PWA 可以輕鬆符合這些規範。
手機瀏覽時的跳出率大幅下降，使用者更願意繼續探訪其他頁面。

速度是關鍵：手機使用者的耐心只剩幾秒鐘

想像你在手機上搜尋「台北夜市」時，第一個結果要花 3 秒才顯示。大多數人會直接點擊第二個或第三個連結。AMP 和 PWA 的核心優勢就在於：

AMP：預先編譯的 HTML、限制 JavaScript，讓瀏覽器只需要渲染靜態內容。
PWA：使用 Service Worker 緩存關鍵資源，即使網路慢也能快速載入。

實際數據顯示：

技術	平均載入時間 (秒)	轉換率提升幅度
原生網站	3.2	-
AMP	1.5	+12%
PWA	1.7	+10%

AMP 與 PWA 的差異與選擇

雖然兩者都能提升速度，但適用場景不同：

AMP 最適合內容型網站（新聞、部落格）——因為它限制了自訂功能，保證載入極速。你只需要把原始 HTML 改成 AMP 格式即可。
PWA 更適合互動性強的應用（購物車、社群媒體）——允許完整 JavaScript，並能離線使用。

如果你的網站主要是資訊發布，AMP 可能更簡單；若需要複雜功能且想保留原生 SPA 的感覺，PWA 是更好的選擇。

如何落實 AMP/PWA：步驟與工具

評估現有內容：先統計每個頁面平均載入時間，找出最慢的幾百頁。
選擇技術：若是內容型網站直接啟動 AMP；若需要互動功能則使用 PWA。
實作工具：

AMP：使用 amphtml 標記，或利用 WordPress 插件如『AMP for WP』。
PWA：安裝 Service Worker 套件（Workbox）並設定緩存策略；Vue、React 等框架都有官方 PWA 模組。

測試與監控：用 Lighthouse 或 PageSpeed Insights 檢查 Core Web Vitals，確保「CLS」「FCP」等指標達標。

最後別忘記在 Google Search Console 裡註冊 AMP 或 PWA 站點地圖，讓搜尋引擎能正確抓取。

優缺點大比拼

優缺點大比拼：AMP vs PWA

在進階 SEO 的最佳化策略中，AMP（加速移動頁面）與 PWA（漸進式網路應用程式）各有特色。以下以實際案例說明它們的優缺點，幫你快速決定採用哪一種技術。

1️⃣ AMP 的核心特性：速度 + 簡化

首頁加載時間極短（通常 < 1 秒）<br>- 與 Google 搜尋緊密整合，搜尋結果中可直接顯示 AMP 版面<br>- 設計較為單純，內容重點突出<br>- 適合新聞、部落格或需要快速傳遞資訊的網站

2️⃣ PWA 的核心特性：功能 + 用戶體驗

支援離線瀏覽與推播通知<br>- 可安裝至手機主畫面，提供類似 App 的使用感受<br>- 完整 JavaScript 生態，可實現互動式功能<br>- 適合社群平台、電子商務或需要豐富交互的網站

比較表格

以下表格列出 AMP 與 PWA 在速度、SEO、離線支援等方面的優缺點，讓你一目了然。

技術	優點	缺點	典型應用案例
AMP	- 加載超快（首屏 < 1 秒）<br>- 與 Google 搜尋緊密整合<br>- 自動化最佳化	- 功能受限（無多媒體互動）<br>- 設計自由度低	網路商店、新聞網站
PWA	- 離線瀏覽與推播通知<br>- 可安裝到主畫面，類似 App 體驗<br>- 完整 JavaScript 功能	- 加載速度比原生網頁慢<br>- 需要額外的 service‑worker 設定	社群平台、內容聚合網站

AMP 實作小技巧

AMP 標記基礎：先把標籤搞定

AMP（Accelerated Mobile Pages）是一種專為行動裝置優化的 HTML 標記語法。只要把標籤寫對、位置正確，Google 就能快速抓取並顯示在搜尋結果上。

AMP 標記基礎：先把標籤搞定

在 AMP 頁面裡，HTML 結構比一般網頁更嚴格。只要一個錯誤，就可能導致整個頁面無法被 Google 的 AMP 測試通過。

1️⃣ 先決條件：確保基本結構正確

<!doctype html> 必須放在最前面，不能遺漏。
<html ⚡ lang="zh-Hant">：⚡ 表示 AMP，若省略會被視為常規 HTML。
<head> 內必須包含 <meta charset="utf-8">、<title>、<link rel="canonical" href="..."> 與 https://cdn.ampproject.org/v0.js 的 script 標籤。

2️⃣ 把 CSS 限制在 50KB

AMP 僅允許內嵌 <style amp-custom>，且大小不能超過 50,000 Bytes。若需額外樣式，可拆成多個檔案再合併。
建議使用簡潔的 CSS：body{font-family:Arial;}

3️⃣ 圖片必須改用 <amp-img>

普通 <img> 無法在 AMP 中直接使用，會被視為不符合規範。將其替換成 <amp-img src="..." width="600" height="400" layout="responsive"></amp-img>。
layout 可選擇 fixed, responsive, fill 等，確保圖片在不同裝置上都能自適應顯示。

4️⃣ 動畫與互動：使用 <amp-anim> 與 <amp-bind>

若想加入簡易動畫，可使用 <amp-anim src="..."></amp-anim>。注意檔案大小仍須在 50KB 內，且必須是 GIF 或 WebP。
amp-bind 允許你以資料綁定的方式改變屬性，例如：<button on="tap:AMP.setState({show:true})">點我</button>。

5️⃣ 必備的 AMP 模組 (script)

在 <head> 中必須先載入 https://cdn.ampproject.org/v0.js。
根據你使用的自訂標籤，還需要額外引入對應模組，例如：<script async custom-element="amp-img" src="https://cdn.ampproject.org/v0/amp-img-0.1.js"></script>。

以上這些是最基礎的 AMP 標記。只要把每個標籤都放對位置、屬性設定正確，Google 的 AMP 測試就能順利通過。

小結：重點回顧

<!doctype html> + <html ⚡> 必須在最前面。
CSS 受限 50KB，使用 <style amp-custom>。
圖片必須改用 <amp-img>，並正確設定尺寸與佈局。
動畫可用 <amp-anim> 或 amp-bind 進行互動。
所有自訂標籤都要載入對應的 script 模組。

常用 AMP 元件，速成教學

在打造快閃式網頁時，AMP（Accelerated Mobile Pages）提供了許多專門設計的元件。以下整理最常見且實用的元素，讓你能快速寫出符合最佳化規範的頁面。

amp-img：圖片加速載入

amp-img 是 AMP 內建的圖片元件，支援自動懶載與尺寸預留。只要設定寬高與 layout，就能確保畫面不會因為圖片載入而跳躍。

<amp-img src='https://example.com/photo.jpg' width='400' height='300' layout='responsive'></amp-img>

如果你想在圖片失敗時提供備援，直接加上 fallback 標籤即可：

<amp-img src='https://example.com/photo.jpg' width='400' height='300' layout='fixed'>
<div fallback>圖片無法顯示</div>
</amp-img>

amp-carousel：圖片輪播

輪播是一個常見的 UI 元件，AMP 提供了兩種簡易方式：垂直或水平滑動。設定 autoplay 或 loop 可以讓使用者更順暢地瀏覽內容。

<amp-carousel width='400' height='300' layout='fixed' type='slides' autoplay='true'>
<amp-img src='https://example.com/img1.jpg' width='400' height='300'></amp-img>
<amp-img src='https://example.com/img2.jpg' width='400' height='300'></amp-img>
</amp-carousel>

amp-form：表單提交

AMP 的表單需要使用 amp-form 並指定 action-xhr。這樣就能在不重新載入頁面的情況下送出資料，並直接顯示回覆訊息。

<form method='post' action-xhr='/submit' target='_top'>
<label>姓名：<input type='text' name='name'></label>
<button submit>送出</button>
<div submit-success>感謝您的留言！</div>
<div submit-error>發生錯誤，請再試一次。</div>
</form>

amp-accordion：可折疊內容區塊

如果頁面需要多段資訊而又不想佔用過多空間，amp-accordion 能讓使用者點擊展開或收合。

<amp-accordion>
<section expanded>第一節內容
<p>詳細說明文字。</p>
</section>
<section>第二節內容
<p>更多資訊。</p>
</section>
</amp-accordion>

amp-video：影片播放控制

AMP 內建的 amp-video 支援多種格式與自動播放設定。只要把 mp4 或 webm 放進來即可。

<amp-video width='640' height='360' layout='responsive' controls>
<source src='https://example.com/video.mp4' type='video/mp4'>
</amp-video>

amp-social-share：社群分享按鈕

為了讓內容能被更廣泛傳播，amp-social-share 提供簡易的分享介面。可自訂平台與樣式。

<amp-social-share type='facebook'></amp-social-share>
<amp-social-share type='twitter'></amp-social-share>

amp-ad：廣告插入

如果你想在頁面中加入廣告，只要使用 amp-ad 並提供 ad-slot、data-ad-client 等參數即可。AMP 會自動處理非同步載入，確保不影響主內容。

<amp-ad width='300' height='250'
type='doubleclick'
data-ad-client='ca-pub-xxxx'
data-ad-slot='yyyy'>
</amp-ad>

amp-bind：動態互動

amp-bind 允許你在 AMP 頁面內使用屬性綁定，實現簡單的互動效果，例如點擊切換文字或顏色。

amp-list：遠端資料載入

當你需要從 API 取得 JSON 並渲染成列表，amp-list 是最佳選擇。設定 src 與 template，就能自動將資料轉換為 HTML。

<amp-list width='auto' height='100' layout='fixed-height' src='/api/items'>
<template type='amp-mustache'>
<div>{{title}}</div>
</template>
</amp-list>

amp-selector：可選擇項目

如果你想在頁面上提供多種選項並觸發事件，amp-selector 可以輕鬆實現。設定 option、value 與 on 事件即可。

<amp-selector on='select:AMP.setState({selectedColor: this.value})'>
<option value='red' selected>紅色</option>
<option value='blue'>藍色</option>
</amp-selector>

以上就是最常用的 AMP 元件與速成範例。只要在 head 區塊加上對應的腳本（例如 <script async custom-element='amp-img' src='https://cdn.ampproject.org/v0/amp-img-0.1.js'></script>），就能直接使用這些元件。祝你開發順利！

測試 AMP，別被驗證卡住

在進階 SEO 策略裡，AMP 的實作與測試往往成為瓶頸。若沒有先做好驗證的準備，就容易因為驗證失敗或卡住而耽誤上線時程。本篇將帶你從工具選擇、常見陷阱到快速檢查清單，確保 AMP 能順利通過驗證並落地。

先備好必備工具

AMP Validator：官方提供的線上驗證器，可直接貼入網址或 HTML。
Chrome DevTools：開啟「Application」面板，點選「Service Workers」查看 AMP 頁面是否已註冊。
Lighthouse：執行「Performance」和「Best Practices」測試，確認 AMP 版型符合最佳化建議。
Google Search Console：在「AMP」報告區域追蹤錯誤與成功率。

常見驗證卡頓原因及解決辦法

非 <html amp> 標籤：確保標頭為 <html amp>, 並加上 lang 屬性。
未列入 amp-custom 或 amp-boilerplate：所有自訂 CSS 必須包在 <style amp-custom> 內，且必須包含 amp-boilerplate。
第三方腳本未使用 <script async custom-element="amp-..." src="..."></script>：AMP 僅允許宣告的外掛程式；若忘記加 async 或 custom-element 會被視為錯誤。
圖片尺寸過大或缺少 width/height 屬性：在 <amp-img> 必須指定寬高，且檔案大小盡量 < 1MB。
內嵌影片使用非 AMP 元件：請改用 <amp-youtube> 或 <amp-iframe> 並加上 layout="responsive"。

快速檢查清單 (可複製貼到記事本)

[ ] <html amp> 標籤正確且有 lang。
[ ] 所有 CSS 都在 <style amp-custom> 裡，並已加入 amp-boilerplate。
[ ] 只使用 AMP 官方宣告的外掛程式，並加上 async、custom-element。
[ ] 圖片皆使用 <amp-img> 且有 width/height，尺寸 < 1MB。
[ ] 沒有任何內嵌非 AMP 的 <iframe> 或 <script>。
[ ] 在 Chrome DevTools「Application」裡確認已註冊 Service Worker。

加速 AMP：速度就是王道

AMP（Accelerated Mobile Pages）本身就以「快」為核心，但還有許多細節可以進一步提速，讓使用者在行動裝置上感受到即時回應。以下整理幾個實作小技巧，配合台灣常用語氣說明。

1️⃣ 先把資源最小化

壓縮 CSS/JS：可使用 gzip 或 brotli 在伺服器層面啟用。這樣瀏覽器下載時就只會得到壓縮後的檔案，減少帶寬。
合併檔案：把多個 CSS 檔案合成一份，再將其內嵌於 <style amp-custom> 中，避免額外 HTTP 請求。

2️⃣ 利用 CDN 與預取

CDN 部署：把圖片、字型等靜態資源放到全球節點的 CDN 上，離使用者最近的節點會更快回應。
<link rel="preconnect">：在 <head> 加上預先連線，例如 https://cdn.example.com，讓瀏覽器能提前建立 TCP/HTTP/2 連結，減少首次載入延遲。

3️⃣ 圖片優化與懶加載

使用 WebP：支援的瀏覽器可改用 WebP 格式，比 JPEG 或 PNG 小 30%~50%。
amp-img 的 lazyload 屬性：只在圖片進入視窗時才下載，降低初始負擔。

4️⃣ 清理不必要的腳本

AMP 預設會自動把 <script> 標籤移除，但若你自行加入第三方 SDK（如 Google Analytics），請確保使用 async 或 defer，並盡量只載入一次。

5️⃣ 啟用 HTTP/2 與快取

HTTP/2：允許同一連線多重資源傳輸，減少握手時間。大部分 CDN 已支援，確認伺服器設定即可。
快取標頭：在回應中加入 Cache-Control: max-age=31536000, immutable，讓瀏覽器可長期緩存靜態檔案，重複造訪即時載入。

6️⃣ 測試與監控

使用 Google PageSpeed Insights 或 Lighthouse 檢測 AMP 頁面，找出「未完成的最佳化」項目。
定期跑 amp validator 確認頁面仍符合 AMP 規範，避免因更新失效而影響載入速度。

小結

將上述步驟結合起來，你的 AMP 站點不僅保持「快」的特質，更能在競爭激烈的行動搜尋中佔得優勢。記住，速度就是王道；持續監測、調整，才能維持高效表現。

PWA 超速優化

Service Worker 先說一句：它是什麼？

Service Worker 是什麼？

Service Worker 就是瀏覽器背後的「小機械師」，
它會在你打開網站時偷偷跑進背景，
負責把網頁資源緩存起來、處理離線需求，甚至可以攔截網路請求。

離線瀏覽

即使沒有網路，也能從快取中載入頁面。

背景同步

資料在網路恢復時自動送回伺服器，確保資料永遠是最新的。

以下示範如何註冊一個 Service Worker：

在網站根目錄放置 service-worker.js，內容簡單如：

self.addEventListener('install', event => {
console.log('Service Worker 安裝完成');
});

在主 JavaScript 檔案註冊：

if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('/service-worker.js')
.then(() => console.log('註冊成功'))
.catch(err => console.error('註冊失敗', err));
}

Web App Manifest，讓你像 APP 一樣

Web App Manifest 是一份 JSON 檔案，用來告訴瀏覽器你的網站可以被安裝成主畫面圖示，就跟手機 APP 一樣。只要加上幾行設定，你的網頁就能在桌面、鎖屏甚至離線時提供更順暢的體驗。

以下將一步步說明如何製作與註冊 Manifest，並測試它是否真的能像 APP 一樣運作。

1. 基本必填欄位

name：完整名稱，例如「我的 PWA」
short_name：短名，通常限制 12 個字元，用於主畫面顯示。
start_url：使用者點擊圖示後開啟的網址，建議加上 ?utm_source=homescreen 方便追蹤。
display：設定顯示模式，例如 standalone、fullscreen 或 minimal-ui。
background_color 與 theme_color：分別定義啟動畫面與瀏覽器工具列的色彩，建議使用相同或互補的配色。

2. 圖示設定（icons）

每個圖示需包含 src、sizes 與 type。為了支援各種裝置，至少提供三種尺寸：48×48、96×96、192×192。建議再加一個 512×512 的高解析度版本。

3. 可選欄位

orientation：強制螢幕方向，例如 portrait-primary 或 landscape。
lang：設定語系，預設值為網站的 lang 屬性。

3. 範例 Manifest 檔案

name: "我的 PWA"
short_name: "PWA"
start_url: "/?utm_source=homescreen"
display: "standalone"
background_color: "#ffffff"
theme_color: "#0066cc"
icons:
- {"src": "/icons/icon-48.png", "sizes": "48x48", "type": "image/png"}
- {"src": "/icons/icon-96.png", "sizes": "96x96", "type": "image/png"}
- {"src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png"}
- {"src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png"}

4. 把 Manifest 加進 HTML

在 <head> 裡新增一行連結：

同時為了讓瀏覽器知道你使用 HTTPS，請確認伺服器已經支援 TLS。

5. 如何驗證是否成功安裝

開啟 Chrome 或 Edge 的 DevTools → Application 面板，查看 Manifest 是否被載入。
在手機桌面上嘗試點擊「新增至主畫面」按鈕；若看到圖示與名稱就代表已成功。
使用 Lighthouse（開發人員工具 → Audits）執行 PWA 測試，看是否顯示 100 分。

推播功能，怎麼開啟？

推播（Push Notification）是讓使用者在不打開網站時，也能收到即時訊息的技術。以下將帶你一步步從設定到部署，確保每一次提醒都順利送達。

1️⃣ 準備工作：確認網站支援 PWA

確認 manifest.json 已正確配置（名稱、圖示、起始網址）。
Service Worker 已註冊並能離線使用。

2️⃣ 設定 Firebase Cloud Messaging (FCM)

前往 Firebase 控制台，新增專案或選擇已有專案。
在「雲訊息」區塊啟用 FCM；下載 google-services.json（Android）或 GoogleService-Info.plist（iOS）。
於網站端匯入 Firebase SDK：
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.22.2/firebase-messaging.js"></script>
初始化 Firebase：
1️⃣ 設定 firebaseConfig 物件（包含 apiKey、authDomain 等）。
2️⃣ 呼叫 firebase.initializeApp(firebaseConfig)。
3️⃣ 取得 messaging 實例：const messaging = firebase.messaging();

3️⃣ 請求使用者授權

在使用者首次載入頁面時，呼叫 messaging.requestPermission()。
若授權成功，可執行以下步驟取得 token：
1️⃣ 呼叫 messaging.getToken({vapidKey:'你的 VAPID 金鑰'}).then(token=>{ /* 儲存 token */ });

4️⃣ Service Worker 接收訊息

在 service-worker.js 加入：
// 監聽推播事件
self.addEventListener('push', event => { const data = event.data.json(); self.registration.showNotification(data.title, { body: data.body }); });

5️⃣ 後端發送訊息（以 Node.js 為例）

安裝 firebase-admin：npm install firebase-admin。
在後端取得 FCM token，使用 admin.messaging().send() 發送。
範例 payload：{ notification: { title: '新訊息', body: '這是推播內容' }, token: '目標 token' }

6️⃣ 測試與除錯

使用 Chrome 開發者工具的 Application 面板，確認 Service Worker 已註冊。
在 Console 輸入 messaging.requestPermission() 檢查是否成功。
送測試訊息後，應在畫面右上角看到通知。

小結

推播功能需要前端、Service Worker 與後端三段協同。
設定好 Firebase 並取得 token 最關鍵；若授權失敗，推播自然送不到。
定期檢查 FCM Token 變動，避免訊息遺漏。

推播功能快速起步清單

✅ 確認 PWA manifest & Service Worker 已設定。
✅ 在 Firebase 建立專案並取得 VAPID 金鑰。
✅ 加入 Firebase SDK、初始化與請求授權。
✅ 於 service-worker.js 接收 push 並顯示通知。
✅ 後端使用 firebase-admin 發送訊息。

完成以上步驟後，即可在任何裝置上收到即時推播，提升用戶回訪率與互動體驗！

快取策略：離線也不怕

在 PWA 裡，快取是讓使用者即使離線也能順暢瀏覽的重要手段。這裡分享幾種常見且實用的快取策略，並示範如何在 Service Worker 中輕鬆實作。

Cache First（優先快取）

適合靜態資源：圖片、CSS、JavaScript。流程如下：

1️⃣ 從瀏覽器快取讀取；

2️⃣ 若不存在，向網路請求並把結果存到快取。

這樣可以大幅降低重複下載。

Network First（優先網路）

用於動態資料：API 回應、文章內容等。流程：

1️⃣ 先發送網路請求；

2️⃣ 若成功，更新快取並回傳；

3️⃣ 若失敗（例如斷線），則從快取讀取。

能確保使用者看到最新資訊，同時支援離線。

Stale While Revalidate（先舊後更新）

此策略結合兩種優點：

立即回傳快取中的舊資料，讓畫面馬上顯示；
同時在背景請求網路，拿到新內容再更新快取。

適用於需要快速載入但又想保持內容相對新鮮的情境。

具體範例：Service Worker 快取設定

const CACHE_NAME = 'my-pwa-cache-v1';
const urlsToCache = ['/','/index.html','/styles.css'];

self.addEventListener('install', event => {
event.waitUntil(
caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
);
});

self.addEventListener('fetch', event => {
const request = event.request;

if(request.url.endsWith('.png') || request.url.endsWith('.jpg')){
// Cache First for images
event.respondWith(
caches.match(request).then(cached => {
return cached || fetch(request).then(response => {
const clone = response.clone();
caches.open(CACHE_NAME).then(cache => cache.put(request, clone));
return response;
});
})
);
}else{
// Network First for other resources
event.respondWith(
fetch(request).then(response => {
const clone = response.clone();
caches.open(CACHE_NAME).then(cache => cache.put(request, clone));
return response;
}).catch(() => caches.match(request))
);
}
});

小結

Cache First：快速載入靜態檔；
Network First：保證最新資料；
Stale While Revalidate：兼顧速度與更新。

挑選策略時，請考慮資源類型、使用者行為和網路不穩定的情況，這樣才能真正做到「離線也不怕」。

AMP & PWA 結合，排名翻倍

AMP 與 PWA 共存的祕笈

在網路上，AMP 與 PWA 都能提升載入速度與使用者體驗，但若想同時享有兩者優點，需要細心設計。以下是幾個關鍵步驟，教你如何讓兩種技術共存而不互相衝突。

AMP 針對內容型頁面（如部落格、新聞）提供極速載入；
PWA 則把網站變成可離線、可安裝的 App，適合頻繁使用或需要即時互動的功能。
結合兩者，可以在同一個網頁上同時呈現「快速閱讀」與「原生感受」。

1️⃣ 建立共存架構

先決條件：將 AMP 與 PWA 分開路徑，避免同一個 URL 同時回傳兩種標記。例如：example.com/article/123 用於常規頁面；amp.example.com/article/123 對應 AMP 版本；app.example.com/article/123 可作為 PWA 入口。

2️⃣ 使用 rel=canonical 與 link[rel=prefetch]

在 AMP 頁面加入 <link rel="canonical" href="https://example.com/article/123">，告訴搜尋引擎此頁是原始內容。
在 PWA 主頁面加上 <link rel="amphtml" href="https://amp.example.com/article/123">，方便搜尋器抓取 AMP 版本。

3️⃣ Service Worker 與 Cache 優化

PWA 的 Service Worker 可在離線時載入預先快取的資源；同時為 AMP 頁面設置 amp-analytics 追蹤，確保兩者都能收集使用數據。

4️⃣ 同步 SEO 標籤與結構化資料

確保 AMP 與 PWA 都包含相同的 <meta name="description">、Open Graph、Twitter Card 以及 JSON‑LD；搜尋器會根據 canonical 連結挑選最適合索引的版本。

5️⃣ 測試與監控

使用 Google Search Console 的 AMP 測試工具檢查 AMP 合規性；
利用 Lighthouse 分別測試兩個版本，確保 PWA 的離線功能不影響 AMP 的速度。

6️⃣ 小技巧：使用 `amp-iframe` 與 Web Components

在 PWA 中嵌入 AMP 元件，例如 <amp-iframe src="https://amp.example.com/video/456"></amp-iframe>，可在離線模式下仍顯示影片預覽。

7️⃣ 成功案例分享

某家新聞網站將原有 HTML 轉為 AMP，同時開發 PWA 版；結果月活躍人數提升 35%，搜尋排名平均上升兩個關鍵字位階。

抓取優先級，搜索引擎怎麼看？

抓取優先級：基礎概念

抓取優先級決定搜尋引擎爬蟲先去看哪一頁。若你想讓重要內容能快點被收錄，先設定好優先順序就很關鍵。

以下列舉幾個常見的影響因素：

網站結構（如 sitemap、robots.txt）
頁面權重（內部連結、外部連結）
更新頻率與內容新鮮度

搜尋引擎怎麼判斷抓取優先級？

搜尋引擎主要靠兩大機制：爬蟲排程 與 權重評估。

1. 爬蟲排程（Crawl Budget）

搜尋引擎會把「可用抓取資源」分配給各個網址，這叫做 crawl budget。
優先級高的頁面會被爬蟲先抓，低優先級則可能延後甚至不被抓到。

2. 權重評估

內部連結多、外部連結好、內容更新快，都能提升權重。
使用 robots.txt 的 Allow 與 Disallow 可手動調整優先級。

實際案例：兩個網站的抓取差異

網站	主要頁面	抓取頻率（天）	觀察結果
A	/blog/2025-08-01	每日	內容即時呈現
B	/archive/old-post	每週	更新緩慢，搜尋排名低

內容同步，別讓同一頁重複跑

在 AMP 與 PWA 結合的環境下，同步管理內容是關鍵。若兩個版本的 HTML 同時出現相同資料，就會產生重複索引、爬蟲混淆，甚至影響搜尋排名。

以下列舉三種常見同步問題與解決方法：

內容更新不一致，造成使用者看到舊資料。
重複的 meta 標籤讓搜尋引擎無法判斷主頁面。
同一段文字同時被 AMP 與 PWA 加載，導致重複計算分數。

步驟 1：統一資料來源

使用 CMS 或 headless API 把所有內容集中管理，AMP 與 PWA 從同一個 endpoint 拉取。

範例：WordPress REST API + Gatsby 靜態生成

步驟 2：檢查重複 meta 標籤

在兩個版本的 head 區塊中，只保留一組 canonical、og 標籤。其餘可透過 JavaScript 在 AMP 上動態寫入。

範例：在 PWA 頁面插入 <link rel="canonical" href="https://example.com/article">，AMP 則用 amp-link-rel-canonical。

步驟 3：使用 amp-analytics 與 gtag.js 只算一次

避免同一事件被兩份腳本重複執行，先判斷環境再載入。

範例：
<script>
if (document.querySelector('amp-analytics')) {
// AMP 已加載，跳過 gtag.js
} else {
// 加載 PWA 的 gtag.js
}
</script>

效益測量：數據告訴你結果

效益測量的重要性

當你把 AMP 與 PWA 結合起來，網站不只速度快、使用者體驗好，更能提升搜尋排名。但這些改進還是要靠數據來證明。沒有指標，就像開車卻看不到方向盤：你不知道自己是否在正確的路上。

常見的效益測量方式有：

流量變化：瀏覽人次、獨立訪客、頁面停留時間等。
轉換率：註冊、下載、購買或其他目標動作的完成比例。
搜尋排名：關鍵字在 SERP 上的順位與曝光量。
技術指標：首屏載入時間 (FCP)、最大內容繪製 (LCP) 以及累積佈局失調 (CLS)。

透過這些數據，你可以判斷 AMP 與 PWA 的結合是否真的「翻倍」了效果，並找出改進空間。

選擇正確的工具與指標

Google Analytics：可追蹤使用者行為、流量來源，以及轉換目標。
Search Console：提供關鍵字排名、點擊率（CTR）以及搜尋曝光數。
Lighthouse 或 PageSpeed Insights：自動測試技術指標，並給出建議。

以下是一張簡易表格，整理了常用指標與測量工具：

指標	代表意義	推薦工具	典型目標值
首屏載入時間 (FCP)	使用者看到第一個可互動內容所需時間	Lighthouse	< 1.0 秒
最大內容繪製 (LCP)	主體內容完成渲染的時機	PageSpeed Insights	< 2.5 秒
累積佈局失調 (CLS)	頁面載入過程中布局變動的影響	Lighthouse	< 0.1
轉換率	完成目標動作的比例	GA	2%~5%（視行業而定）

案例：從數據看效果翻倍

假設你在 2024 年初將網站切換為 AMP + PWA，並於 12 月完成測試。以下是關鍵指標的變化：

流量：月平均瀏覽人次由 50,000 增至 70,000（+40%）。
轉換率：註冊完成比例從 3.0% 提升到 4.2%（+1.2pp）。
排名：目標關鍵字「手機購物」在 SERP 上平均順位由第 5 名升至第 2 名。

這些數據顯示，AMP 與 PWA 的結合不僅提升了使用者體驗，也帶來實質的商業成效。若想持續優化，可再進一步：

測試不同的 PWA 功能（如離線瀏覽、推播通知）對轉換率的影響。
針對高流量頁面做 A/B 測試，確認最佳化策略。