在本程式碼研究室中，你將學會如何建立 Accelerated Mobile Pages (簡稱 AMP)，或簡稱 AMP。為此，您將實作符合 AMP 規格的簡單新聞報導網頁，並納入行動版新聞網站常用的一些一般網頁功能。
課程內容
- AMP 如何改善行動版網站的使用者體驗。
- AMP 網站的基礎。
- AMP 的限制。
- AMP 的網頁元件如何解決常見的新聞網站問題。
- 如何驗證您的 AMP。
- 如何準備 Google 搜尋的 AMP 網頁。
軟硬體需求
- 範例程式碼
- Python (建議使用 2.7) 或 Chrome 200 OK Web Server 擴充功能
- Chrome (或可檢查 JavaScript 控制台的同等瀏覽器)
- 程式碼編輯器 (例如 Atom、Sublime、Notepad++)
您可以將所有程式碼範例下載到電腦：
...或是透過指令列複製 GitHub 存放區：
$ git clone https://github.com/googlecodelabs/accelerated-mobile-pages-foundations.git您可透過 ZIP 檔案下載內含多個範例資源檔案和起始文章.html 網頁的 ZIP 檔案。
在電腦上解壓縮資料夾，然後透過指令列瀏覽至該目錄。
為了測試我們的範例網頁，我們必須從網路伺服器存取檔案。您可以透過數種方式建立臨時的本機網路伺服器來進行測試。在本程式碼研究室中，我們會提供 3 個選項的操作說明：
- 建議使用 Google Chrome 應用程式「Chrome 網路伺服器」 - 建議您使用這個方法，因為這是最簡單也最多樣的跨平台解決方案。注意：使用這種方法時必須安裝 Google Chrome。
- Firebase 代管：如果您也有興趣探索新的靜態資產代管平台「Firebase 代管」，可以選擇這個方式。預設啟用 SSL。
- 本機 HTTP Python 伺服器 - 需要存取指令列。
選項 #1：Chrome 網路伺服器
您可以前往 Chrome 線上應用程式商店的這個連結找到「Chrome 專用網路伺服器」。
安裝「Chrome 應用程式」後，您必須透過 [選擇資料夾] 按鈕，將應用程式指向特定資料夾。在本程式碼研究室中，您必須選取要解壓縮程式碼研究室範例檔案的資料夾。
此外，您必須勾選 [自動顯示 index.html] 選項，並將通訊埠設定為 "8000"。您必須重新啟動網路伺服器，這些變更才會生效。
透過以下方式存取這個網址：
http://localhost:8000/article.html
如果上述網址成功載入，請繼續下一個步驟。
選項 2：Firebase 代管
如想進一步瞭解我們新推出的 Firebase 靜態網站託管，請按照這裡的操作說明，將您的 AMP 網站部署到 Firebase 代管網址。
Firebase 託管是一種靜態主機供應商，可讓您快速部署及託管靜態網站及其資產，包括 HTML、CSS 和 JavaScript 檔案。靜態內容是在內容傳遞聯播網 (CDN) 中快取，並遍布全球各地，
最後，Firebase 代管功能一律會透過安全資料傳輸層 (SSL) 提供，因此對於 AMP 和網頁來說十分方便。如果您只想要瞭解 AMP 的特色，請略過這個選項。
選項 #3：HTTP Python 伺服器
如果您不是使用 Chrome 或無法順利安裝 Chrome 擴充功能，也可以透過指令列使用 Python 來啟動本機網路伺服器。
如要從指令列執行 Python's 內建 HTTP 伺服器，請執行下列步驟：
python -m SimpleHTTPServer
然後存取這個網址：
http://localhost:8000/article.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 輸出內容。確認已選取 [主控台] 標籤：
畫面上會出現以下記錄：
Powered by AMP ⚡ HTML
#development=1
例如：
http://localhost:8000/article.amp.html#development=1
你可能需要手動重新整理瀏覽器頁面。按下這個按鈕就能在瀏覽器中重新整理網頁：
您應該會收到數個驗證錯誤：
儘管 AMP 是 Accelerated Mobile Pages，詳情請參閱 Google Developers 網站的「回應式網頁設計」一節。
使用 Chrome 開發人員工具模擬行動裝置體驗。按一下這裡的行動裝置裝置圖示：
現在，請從這個選單中選取行動裝置 (例如「Pixel 2」)。
你應該會在瀏覽器中看到行動版模擬解析度，如下所示：
現在我們準備要開始使用了！接著請逐一完成驗證錯誤，並說明這些錯誤與 AMP 之間的關聯。
需要圖表集
首先，請修正下列錯誤：
The mandatory tag 'meta charset=utf-8' is missing or incorrect.
為了正確顯示文字，AMP 需要先設定網頁的字元集。它也必須是 head 代碼的第一個子項。原因在於避免重新解讀在中繼字元集標記之前新增的內容。
新增下列程式碼做為 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。viewport 是 HTML 網頁的 <head> 中常用的標記。
建議您在 <head> 標記中加入下列 HTML 程式碼片段，以解決這個問題。新增下列 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" />這個問題是針對 external 樣式表參照。在 AMP 中，為了盡可能讓文件盡可能縮短文件載入時間，開發人員不得納入外部樣式表。所有樣式表規則都必須在 AMP 文件中內嵌。
因此，請在 <head> 中移除連結標記，然後將其替換為內嵌標記，例如：
<style amp-custom>
body {
width: auto;
margin: 0;
padding: 0;
}
...
</style>樣式標記的 contents 應從專案目錄中的 base.css 檔案中直接複製。樣式標記上的 amp-custom 屬性為 mandatory。
請再次重新載入頁面，檢查樣式表中的資訊是否消失。
第三方 JavaScript
雖然 AMP 可透過內嵌在 AMP 上以相輔相成的方式輕鬆完成，但 JavaScript 也是如此。
The tag 'script' is disallowed except in specific forms.
不得在 AMP 中使用使用者產生的指令碼。AMP 指令碼必須符合下列兩項主要規定：
- 所有 JavaScript 都必須是非同步的，也就是在指令碼標記中加入
async屬性。 - 只能納入 AMP 程式庫和 AMP 元件。
這樣就能有效排除所有第三方 JavaScript 的使用情形。有一種例外情況：第三方 JavaScript 可用於 iframe。
請嘗試開啟外部 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.
常見問題
在 AMP 新計劃中，有一部分是特別注意：由於 Google 搜尋結果介面採用了新的輪轉介面介面，其中標明瞭有效的 AMP 文件。這個介面能為在網路上搜尋文章的使用者提供更優質的使用者體驗。為了提供最佳體驗，收錄的網頁必須符合特定條件，不能通過 AMP 驗證工具。
這個步驟可讓您全面瞭解完整需求。
連結標準網頁和 AMP 文件
AMP 的目標是提升網頁載入速度，雖然該專案在幾天前就著重在靜態內容，但新增 amp-bind 等元件則適合用於新聞發布者、電子商務、旅遊網站、網誌等各種網站。
但是，瞭解 AMP 對於網站結構的整體影響仍相當重要。雖然 AMP 可用於建立整個網站，但許多發布商偏好採用 AMP 文件，以便搭配 AMP 文件的形式使用，因為這類網頁可與發布者網站上一般的 HTML 文章結合。
當一般的 HTML 網頁中有標準連結時，如果有多個網頁包含相同內容，通常可以用來指明應該優先採用哪個網頁。由於系統能夠產生 AMP 文件，並與網站的傳統文章網頁一併提供，因此我們會將傳統 HTML 網頁視為「標準網頁」。
我們已在 AMP 文件中導入第一個步驟，透過在 <head>. 中加入連結標記，回到 AMP 網頁：返回標準網頁：
<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 網頁複製完整的原始碼並貼到驗證工具的文字編輯器面板中，然後按一下「執行測試」：
您應該會看到如下網頁：
新版 Google 搜尋輪轉介面中採用 AMP 技術的新聞報導有以下幾個重要規定：
- 確認您的 AMP 文件已通過驗證。
- 透過 <link> 標記從傳統 HTML 網頁參照您的 AMP 文件，反之亦然。
- 請加入上述的「搜尋引擎中繼資料」標記。
進一步瞭解網頁探索功能。
您已完成程式碼研究室，並成功探索 AMP 文件的許多基本概念。
希望您已瞭解到如何在 AMP 文件中實作這些概念和功能，也瞭解 AMP 的設計方式為何。
以下提供其他主題和連結，歡迎進一步運用這些技巧！