1. 總覽
在本程式碼研究室中，您將瞭解如何建構 Accelerated Mobile Pages (簡稱 AMP)。為達成這個目標，您將實作符合 AMP 規格的簡易新聞文章網頁，同時納入行動新聞網站常用的幾項典型網頁功能。
課程內容
- AMP 如何改善行動版網站的使用者體驗。
- AMP 網站的基本原理。
- AMP 的限制。
- AMP 網頁元件如何解決常見的新聞網站問題。
- 如何驗證 AMP。
- 如何為 AMP 做好加入 Google 搜尋的設定準備。
軟硬體需求
- 程式碼範例
- Python (最好是 2.7) 或 Chrome 200 OK Web Server 擴充功能
- Chrome (或可檢查 JavaScript 控制台的同類瀏覽器)
- 程式碼編輯器 (例如 Atom、Sublime、Notepad++)
2. 取得程式碼範例
您可以將所有範例程式碼下載至電腦：
...或從指令列複製 GitHub 存放區：
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git
系統會下載 ZIP 檔案，內含多個範例資源檔案和起始的 article.html 頁面。
解壓縮資料夾，然後透過電腦上的指令列前往該目錄。
3. 執行範例網頁
如要測試範例網頁，我們需要從網路伺服器存取檔案。您可以透過多種方式建立臨時本機網路伺服器，以進行測試。本程式碼研究室將提供 3 種做法的操作說明：
- Google Chrome 應用程式「Web Server for Chrome」：這是最簡單且適用於多種平台的解決方案，因此我們建議採用這種做法。注意：這個方法需要安裝 Google Chrome。
- Firebase 託管 - 如果您也想探索新的靜態資產託管平台「Firebase 託管」，這是替代選項。預設啟用 SSL。
- 本機 HTTP Python 伺服器 - 需要存取指令列。
選項 1：Web Server for Chrome
您可以在 Chrome 線上應用程式商店透過這個連結找到「Web Server for Chrome」應用程式。
安裝 Chrome 應用程式後，請透過「選擇資料夾」按鈕，將應用程式指向特定資料夾。在本程式碼研究室中，您應選取解壓縮程式碼研究室範例檔案的資料夾。
此外，請勾選「Automatically show index.html」選項，並將連接埠設為「8000」。您必須重新啟動網路伺服器，變更才會生效。
透過下列方式存取這個網址：
http://localhost:8000/article.html
如果上述網址成功載入，請繼續下一個步驟。
選項 2：Firebase 託管
如要探索全新的 Firebase 靜態網站代管服務，請按照這裡的操作說明，將 AMP 網站部署至 Firebase 代管網址。
Firebase 代管是靜態託管服務供應商，可供您快速部署及代管靜態網站及其資產，包括 HTML、CSS 和 JavaScript 檔案。由於靜態內容會快取在內容傳遞網路 (CDN) 中，而 CDN 的網路連接點 (PoP) 遍布全球，因此使用者可享有低延遲的優勢。
最後，Firebase 代管一律透過 SSL 提供服務，因此非常適合 AMP 和一般網站。如果您只想專注於 AMP，請直接忽略這個選項。
選項 3：HTTP Python 伺服器
如果您未使用 Chrome，或無法順利安裝 Chrome 擴充功能，也可以透過指令列使用 Python 啟動本機網頁伺服器。
如要從指令列執行 Python 的內建 HTTP 伺服器，只要執行下列指令即可：
python -m SimpleHTTPServer
並存取這個網址：
http://localhost:8000/article.html
4. 建立一般 HTML 網頁
下載的 ZIP 檔案中會有名為 article.html 的檔案。我們要為這篇文章建立對應的 AMP 網頁。
複製 article.html 範例中的程式碼，然後貼到新檔案中。將這個檔案儲存為 article.amp.html.
您的 article.amp.html 檔案現在應如下所示：
<!doctype html>
<html lang="en">
<head>
<title>News Article</title>
<link href="base.css" rel="stylesheet" />
<script type="text/javascript" src="base.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
</article>
<img src="mountains.jpg">
</body>
</html>
這是刻意簡化的網頁，包含常見的靜態新聞文章元素：CSS、JavaScript 和圖片標記。
目前文章的 AMP 版本只是原始文章的副本。我們將其轉換為 AMP。首先，我們會加入 AMP JavaScript 程式庫檔案，並查看開啟 AMP 驗證器時出現的錯誤。
如要加入 AMP 程式庫，請在 <head> 標記底部新增這行程式碼：
<script async src="https://cdn.ampproject.org/v0.js"></script>
現在，請透過下列連結在瀏覽器中載入新的 article.amp.html 頁面，然後透過 Menu > More Tools > Developer Tools 在 Chrome 中開啟開發人員控制台：
現在請檢查開發人員控制台中的 JavaScript 輸出內容。確認已選取「Console」(控制台) 分頁標籤：
您應該會看到下列記錄：
Powered by AMP ⚡ HTML
#development=1
例如：
http://localhost:8000/article.amp.html#development=1
您可能需要在瀏覽器中手動重新整理頁面。如要手動重新整理瀏覽器中的頁面，請按下這個按鈕：
您應該會收到多個驗證錯誤：
雖然 AMP 代表 Accelerated Mobile Pages，但可用於建構回應式網頁，在所有螢幕大小上都能適當轉譯。詳情請參閱 Google Developers 網站的「回應式網頁設計 」一節。
在 Chrome 開發人員工具中模擬行動裝置體驗。按一下手機裝置圖示：
現在請從這個選單中選取行動裝置 (例如「Pixel 2」)：
瀏覽器中應會顯示模擬的行動裝置解析度，如下所示：
現在可以開始工作了！我們將逐一說明驗證錯誤，並探討這些錯誤與 AMP 的關聯。
5. 解決驗證錯誤
必須提供字元集
首先，我們要修正下列錯誤：
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
如要正確顯示文字，AMP 必須設定網頁的字元集。此外，這個標記也必須是 head 標記的第一個子項。這是為了避免重新解讀在 meta charset 標記之前新增的內容。
新增下列程式碼做為 head 標記的第一行：
<meta charset="utf-8" />
儲存檔案，重新載入頁面，確認錯誤訊息不再顯示。
AMP 檔案必須含有 <link rel=canonical> 標記。
每個 AMP 文件都必須有參照標準網頁的連結。因此，我們來新增原始文章的連結。
請在 <meta charset="utf-8" /> 標記下方新增下列程式碼：
<link rel="canonical" href="/article.html">
現在，視需要重新啟動網頁伺服器，然後重新載入頁面。雖然仍有許多錯誤需要修正，但「AMP 檔案必須含有 <link rel=canonical> 標記」錯誤已不再出現。
必須提供 AMP 屬性
AMP 規定網頁的根 HTML 元素必須具備屬性，才能將網頁宣告為 AMP 文件：
The mandatory attribute '⚡' is missing in tag 'html ⚡ for top-level html' The mandatory tag 'html ⚡ for top-level html' is missing or incorrect.
只要在 <html> 標記中加入 ⚡ 屬性，即可解決這個問題：
<!doctype html>
<html ⚡ lang="en">
<head>
...
現在請重新載入頁面，並確認兩個錯誤都已消失。
必須設定可視區域
接下來要處理的錯誤如下：
The mandatory tag 'meta name=viewport' is missing or incorrect.
AMP 必須定義可視區域的 width 和 minimum-scale。這些值必須分別定義為 device-width 和 1。可視區域是 HTML 網頁 <head> 中常見的標記。
如要修正這個問題，請將下列 HTML 片段新增至 <head> 標記。新增下列 meta 標記：
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<link rel="canonical" href="/article.html">
<!-- The following is the meta tag and viewport information we must add to the page: -->
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
...
這些是 AMP 中 width 和 minimum-scale 的唯一有效值。定義 initial-scale 並非必要，但這是行動版網站開發中常見的項目，建議您加入。如要進一步瞭解檢視區塊和網頁設計，請參閱這篇文章。
如先前所述，請重新載入頁面，確認錯誤是否已消失。
外部樣式表
我們使用樣式表時發生下列錯誤：
The attribute 'href' in tag 'link rel=stylesheet for fonts' is set to the invalid value 'base.css'.
具體來說，這是指我們 <head> 代碼中的下列樣式表連結代碼：
<link href="base.css" rel="stylesheet" />
問題在於這是外部樣式表參照。在 AMP 中，為了盡可能縮短文件載入時間，開發人員不得加入外部樣式表。所有樣式表規則都必須內嵌在 AMP 文件中。
因此，請移除 <head> 中的連結標記，並替換為下列內嵌標記：
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
...
</style>
樣式標記的內容應直接從專案目錄中的 base.css 檔案複製。樣式標記的 amp-custom 屬性為必要屬性。
再次重新載入頁面，確認樣式表錯誤是否已消失。
第三方 JavaScript
透過內嵌，使用 AMP 重新製作樣式表相對容易，但 JavaScript 則不然。
The tag 'script' is disallowed except in specific forms.
AMP 不允許使用者產生的指令碼。AMP 允許使用指令碼，但必須符合兩項主要規定：
- 所有 JavaScript 都必須是非同步，也就是在指令碼標記中加入
async屬性。 - 只能納入 AMP 程式庫和 AMP 元件。
這表示您無法使用任何第三方 JavaScript。但 iframe 例外，可使用第三方 JavaScript。
嘗試開啟外部 base.js 檔案。你看到什麼？檔案應不含任何 JavaScript 程式碼，只包含類似這樣的資訊註解：
/* This external JavaScript file is intentionally empty. Its purpose is merely to demonstrate the AMP validation error related to the use of external JavaScript files. */
考量到這個外部 JavaScript 檔案並非我們網站的功能元件，我們可以安全地完全移除參照。
從文件中移除下列外部 JavaScript 參照：
<script type="text/javascript" src="base.js"></script>
現在請重新載入頁面，確認指令碼錯誤已消失。
AMP CSS 樣板
The mandatory tag 'noscript enclosure for boilerplate' is missing or incorrect. The mandatory tag 'head > style : boilerplate' is missing or incorrect. The mandatory tag 'noscript > style : boilerplate' is missing or incorrect.
下一個錯誤是指 <head> 標記中缺少兩個標記。每個 AMP 文件都必須包含下列標記：
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
新增上述程式碼片段至文件 <head> 標記的底部。
第一個標記會讓網頁內容隱藏起來，直到 AMP JavaScript 程式庫更新主體標記，網頁內容準備好轉譯時，才會再次顯示。AMP 這麼做是為了避免顯示尚未設定樣式的網頁內容。這樣一來，網頁內容會一次顯示，且首頁顯示的所有內容會一併算繪，使用者體驗就會感覺非常即時。如果瀏覽器停用 JavaScript，第二個標記會還原這項邏輯。
amp-img 標記
The tag 'img' may only appear as a descendant of tag 'noscript'. Did you mean 'amp-img'?
AMP 專門設計了網頁元件來取代圖片標記，稱為 amp-img：
<amp-img src="mountains.jpg"></amp-img>
請嘗試加入上述 amp-img 標記，然後再次執行驗證器。您應該會收到幾則新的錯誤訊息：
AMP-IMG# Layout not supported for: container The implied layout 'CONTAINER' is not supported by tag 'amp-img'.
為什麼 amp-img 觸發了另一個錯誤？因為 amp-img 並非傳統 HTML img 標記的直接替代項目。使用 amp-img 時，還須遵守其他規定。
版面配置系統
這項錯誤表示 amp-img 不支援「container」版面配置類型。AMP 設計最重要的概念之一，就是著重於減少網頁的 DOM 重排量。
為減少 DOM 重排，AMP 包含版面配置系統，可確保網頁版面配置在下載及算繪網頁的生命週期中，盡早盡可能保持固定。
版面配置系統可讓您以各種方式定位及縮放網頁上的元素，例如固定尺寸、回應式設計、固定高度等。
在本例中，版面配置系統會將 amp-img 的版面配置類型推斷為 container 類型。不過，容器類型適用於含有子項元素的元素，與 amp-img 標記不相容，這也是導致錯誤的原因。
為什麼系統會推斷容器類型？因為我們未指定 amp-img 標記的高度屬性。在 HTML 中，如要減少重排，請務必為網頁上的元素指定固定寬度和高度。在 AMP 中，建議您為 amp-img 元素定義寬度和高度，這樣 AMP 就能瞭解元素的長寬比。
將寬度和高度設定如下：
<amp-img src="mountains.jpg" width="266" height="150"></amp-img>
重新整理頁面並檢查驗證工具，您應該不會再看到任何錯誤！不過，圖片在網頁上的位置很奇怪，看起來不太好。如果圖片可以回應式延展並配合網頁，無論螢幕大小都能顯示，那就太棒了。
令人意外的是，定義寬度和高度並不會將元素限制為完全固定的大小。AMP 版面配置系統可透過多種方式定位及縮放元素，前提是必須知道元素的長寬比。版面配置屬性會告知 AMP 元素定位和縮放方式。
將版面配置屬性設為 responsive 即可達成此目的：
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
完成！圖片的顯示比例正確，且會自動調整大小，填滿畫面寬度。
成功！
現在，您的 AMP 文件看起來應該會像這樣：
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="/article.html">
<link rel="shortcut icon" href="amp_favicon.png">
<title>News Article</title>
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
header {
background: Tomato;
color: white;
font-size: 2em;
text-align: center;
}
h1 {
margin: 0;
padding: 0.5em;
background: white;
box-shadow: 0px 3px 5px grey;
}
p {
padding: 0.5em;
margin: 0.5em;
}
</style>
<script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>
<header>
News Site
</header>
<article>
<h1>Article Name</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam egestas tortor sapien, non tristique ligula accumsan eu.</p>
<amp-img src="mountains.jpg" layout="responsive" width="266" height="150"></amp-img>
</article>
</body>
</html>
重新整理頁面，然後查看控制台輸出內容。您應該會看到下列訊息：
AMP validation successful.
常見問題
6. 標準網址、中繼資料和搜尋
這項新 AMP 計畫的其中一環，是在 Google 搜尋結果介面中，以新的輪轉介面醒目顯示有效的 AMP 文件。這項介面可為在網路上搜尋文章的使用者提供更優質的體驗。為確保最佳體驗，除了通過 AMP 驗證器外，所含網頁也必須符合特定條件。
這個步驟會概略說明完整規定。
連結標準網頁和 AMP 文件
AMP 的目標是加快網頁速度。雖然這項專案初期較著重於靜態內容，但隨著 amp-bind 等元件的加入，AMP 適用於各種網站，例如新聞發布商、電子商務、旅遊網站、網誌等。
不過，請務必瞭解 AMP 在網站結構中的完整範圍。雖然 AMP 可用於建構整個網站，但許多發布者偏好搭配使用，也就是產生 AMP 文件，做為發布者網站上一般 HTML 文章的輔助內容。
在一般 HTML 網頁中，標準連結是常見的技術，用於聲明當多個網頁包含相同內容時，應將哪個網頁視為偏好網頁。由於 AMP 文件可與網站的傳統文章網頁一併產生，因此我們應將傳統 HTML 網頁視為「標準」網頁。
我們已在 AMP 文件中採取第一步，在 <head> 中加入連結標記，返回標準網頁：
<link rel="canonical" href="/article.html">
下一步是將標準文章連結至 AMP 網頁。如要達成這個目標，請在標準文章的 <head> 區段中加入 <link rel="amphtml"> 標記。
將下列程式碼新增至 article.html 檔案的 <head> 區段：
<link rel="amphtml" href="/article.amp.html">
下圖說明連結標記的方向：
您必須設定雙向連結，Google 搜尋檢索器才能瞭解一般 HTML 標準文件與 AMP 文件之間的關係。如果沒有提供任何連結，檢索器不一定會清楚哪些文章是標準 HTML 文件的「AMP 版本」。明確提供這些連結可確保沒有任何模糊不清之處！
Schema.org 搜尋引擎中繼資料
如要讓 AMP 文件顯示在新的輪轉介面中，還必須遵守 Schema.org 的搜尋引擎中繼資料規格。這類中繼資料會透過 application/ld+json 類型的指令碼標記，納入文件的 <head> 標記中。
在 AMP 文件的 <head> 區段底部新增下列程式碼：
<script type="application/ld+json">
{
"@context": "http://schema.org",
"@type": "NewsArticle",
"mainEntityOfPage":{
"@type":"WebPage",
"@id":"https://example.com/my-article.html"
},
"headline": "My First AMP Article",
"image": {
"@type": "ImageObject",
"url": "https://example.com/article_thumbnail1.jpg",
"height": 800,
"width": 800
},
"datePublished": "2015-02-05T08:00:00+08:00",
"dateModified": "2015-02-05T09:20:00+08:00",
"author": {
"@type": "Person",
"name": "John Doe"
},
"publisher": {
"@type": "Organization",
"name": "⚡ AMP Times",
"logo": {
"@type": "ImageObject",
"url": "https://example.com/amptimes_logo.jpg",
"width": 600,
"height": 60
}
},
"description": "My first experience in an AMPlified world"
}
</script>
在瀏覽器中重新載入頁面，並再次確認沒有出現 AMP 驗證錯誤。
現在，請在新瀏覽器視窗中開啟結構化資料驗證工具，然後按一下「測試我的標記」。然後選取「程式碼片段」分頁，複製 AMP 網頁的完整原始碼，並貼到驗證工具的文字編輯器面板，然後按一下「執行測試」：
頁面應如下所示：
如要讓 AMP 支援的新聞報導顯示在新的 Google 搜尋輪轉介面中，必須符合下列主要規定：
- 確認 AMP 文件是否有效。
- 透過 <link> 標記，從傳統 HTML 網頁參照 AMP 文件，反之亦然。
- 加入上述搜尋引擎中繼資料標記。
進一步瞭解網頁探索。
7. 恭喜！
您已完成程式碼研究室，並成功探索 AMP 文件許多基本概念。
希望您不僅瞭解如何在 AMP 文件中導入這些概念和功能，也明白 AMP 的設計方式。
以下提供一些額外主題和連結，可供您進一步探索，提升技能！