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

0

先前我們曾經分享過《介紹AMP的項目,成為一個更快、更開放的手機網站》
而今天,我們將簡易的逐步介紹AMP網頁的製作方法。但在進入正題之前,究竟…什麼是AMP ??

AMP是一種以靜態內容建置網頁的方式,能夠使頁面的讀取與呈現更快速。AMP在實際應用上由三個部分組成
l AMP HTML:透過某些規則限制或延伸,幫助您建立豐富的內容的同時,提升可靠效能並超越原本的HTML

l AMP JS:確保快速地呈現AMP HTML網頁

l Google AMP Cache:於伺服器端處理AMP HTML的頁面快取

AMP HTML
雖然AMP HTML仍然承襲大多數的HTML語法,但有些部分是由AMP特定語法標記所取代,這樣的通用模式能夠更簡單的體現效能提升。

因應行動裝置的普及,AMP專案將從技術層面提升網頁校能、改善使用者體驗,這樣的精神與SEO概念十分吻合,甚至未來有可能成為SEO演算法中的要角,所以讓我們捲起袖管,展開AMP的建造之旅吧!

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

步驟一、
下方的語法標記是AMP HTML的標準模板,也是建立最AMP網頁最佳的起始點。
首先,請將下方內容以.html格式儲存

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <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>
    <script async src="https://cdn.ampproject.org/v0.js"></script>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

我們可以發現,在< 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>,如下所示:

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

每一個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網頁。

歡迎留言給awoo

You must be logged in to post a comment.