建立屬於您的第一個AMP網頁

awoo Intelligence

2016-10-03

(更新日期: 2023-12-28)

先前我們曾經分享過《介紹AMP的項目，成為一個更快、更開放的手機網站》
而今天，我們將簡易的逐步介紹AMP網頁的製作方法。但在進入正題之前，究竟…什麼是AMP ??
AMP是一種以靜態內容建置網頁的方式，能夠使頁面的讀取與呈現更快速。AMP在實際應用上由三個部分組成
l AMP HTML：透過某些規則限制或延伸，幫助您建立豐富的內容的同時，提升可靠效能並超越原本的HTML
l AMP JS：確保快速地呈現AMP HTML網頁
l Google AMP Cache：於伺服器端處理AMP HTML的頁面快取
AMP 手機搜尋結果
AMP HTML
雖然AMP HTML仍然承襲大多數的HTML語法，但有些部分是由AMP特定語法標記所取代，這樣的通用模式能夠更簡單的體現效能提升。
因應行動裝置的普及，AMP專案將從技術層面提升網頁校能、改善使用者體驗，這樣的精神與SEO概念十分吻合，甚至未來有可能成為SEO演算法中的要角，所以讓我們捲起袖管，展開AMP的建造之旅吧！
建立屬於您的第一個AMP網頁
步驟一、
下方的語法標記是AMP HTML的標準模板，也是建立最AMP網頁最佳的起始點。
首先，請將下方內容以.html格式儲存

<!doctype html>
    Hello, AMPs
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
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}}

body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}

Welcome to the mobile web

我們可以發現，在< body >中的內容目前為止還十分的淺顯易懂 (沒錯，其實就只有一個<h1>標記)，但在< head >區塊當中出現了不少無法立即看懂的程式，接著就讓我們來認識這些AMP HTML的必要標記吧
AMP HTML檔案”一定要有”的需求標記：
l 以<! doctype html>為起始
l 以<!html >或<!html amp>作為頂層標記
l 必須包含<head>以及<body>標記 (在原始的HTML當中這兩者是可以選擇而非必需的)
l <head>區塊中務必要有<link rel=”canonical” href=”_URL”>標記，透過canonical標記指出AMP網頁所對照的原始HTML頁面，若沒有原始的HTML頁面則將”_URL”設定為此頁面
l 必須將<meta charset=”utf=8”>標記設為<head>區塊的第一個子標記
l 必須包含<meta name=”viewport” content=”width=device-width,minimum-scale=1″>標記在<head>區塊當中，同時我們也推薦您加上 initial-scale=1
l 必須包含<script async src=”https://cdn.ampproject.org/v0.js”></script>標記，將此標記設置為<head>區塊的最後一個元素(這個<script>透過AMP JS Library載入)
l 請您於<head>區塊中加入
<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>
以上就是AMP HTML務必存在的需求標記
除了最基礎的需求，範例中我們還包含了Schema.org所定義的標記於當中，雖然這個部分不是硬性規定的AMP需求標記，但這個項目有助於將您的內容散布出去
恭喜您，完成並了解上面的內容就是建立AMP頁面的第一步，即使是只有一行內容的網頁，但這已經具備了AMP HTML的必要元素，也就是說，這是一個貨真價實的AMP網頁咯！
步驟二、
載入圖片
大多數原始的HTML標記語法是能夠直接使用於AMP HTML當中的，然而如<img>等部分標記被以等值甚至更為提升的AMP常用標記所取代，以下是一個AMP HTML內載入圖片的程式片段：
<amp-img src=”welcome.jpg” alt=”Welcome” height=”400″ width=”800″></amp-img>
如果需要更詳細了解<amp-img>取代<img>及更多的用法，請點選這裡
步驟三、
修改樣式與法
AMP HTML中任何頁面與元素的呈現樣式都源自於CSS屬性定義，他們所呼叫的類別與選取器都被定義在<head>區塊當中，我們將AMP的樣式表稱之為<style amp-custom>，如下所示：

  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }

每一個AMP頁面僅能嵌入一個樣式表，且某些選取器是不被允許使用的哦！
控制呈現樣式
在一般的網頁上，我們幾乎為個別元素定義各自的CSS，但根據效能需求，AMP網頁必須從一開始就嚴謹的定義每一個元素的大小與形式。
步驟四、
預覽與驗證
預覽AMP網頁的方式如同預覽一般的靜態網頁，不需要特別的建置步驟和預先處理程序。
l 以離線檔形式透過瀏覽器直接開啟(然而網頁中部分元素可能因此無法運作)
l 使用Apache2、Nginx等本地網站伺服器開啟(執行python –m SimpleHTTPServer)
接著，讓我們確認您製作的AMP頁面是貨真價實的Accelerated Mobile Page，亦或是如Google搜尋等分散的第三方平台。請參考驗證如下：
1.以瀏覽器開啟您的AMP頁面
2.請為您的網址加上 #development=1，例如：http://localhost:8000/released.amp.html#development=1
3.參考Chrome DevTools console並確認驗證錯誤訊息
步驟五、
有些時候，您會需要為一個網頁同時擁”AMP“與”非AMP“兩種版本，例如一篇新的文章。
必須考慮到一個情況：如果Google搜尋檢索了非AMP的版本，我們應該如何讓Google搜尋知道我們為同一個頁面準備了AMP的版本頁面呢？
使用<link>語法連結
為了解決這個問題，我們增加了關於AMP網頁與非AMP網頁相互指向的標記資訊，請於<head>區塊中加入<link>標記
l 將下方程式片段加入非AMP頁面
<link rel=”amphtml” href=”https://www.example.com/url/to/amp/document.html”>
l 將下方程式片段加入AMP頁面
<link rel=”canonical” href=”https://www.example.com/url/to/full/document.html”>
如果我只有AMP版本的頁面呢？
當您只有一種版本，而且正好是AMP的頁面，仍必須為這頁加上canonical連結，明確的指出頁面本身
<link rel=”canonical” href=”https://www.example.com/url/to/amp/document.html”>
完成上述步驟
恭喜！您已經初步完成了一個簡易的AMP網頁囉。
更多AMP相關技術可以參考ampproject.org及關注我們的SEO部落格，帶領您逐步的完成並發布AMP網頁。