Google AMP 網頁設計、非常快，SEO 重點指標之一

2017011921:10

Accelerated Mobile Pages

官方網頁：
https://www.ampproject.org/

中英文的詳細說明：
英文 https://www.ampproject.org/learn/about-amp/
簡中 https://www.ampproject.org/zh_cn/learn/about-amp/

大致原理就是

* 當 Google 確認你的網頁符合 AMP 規格，你這頁畫面 HTML 就會存放在 Google 伺服器上面

* 當用戶以手機搜尋到你的網頁時，用戶點擊搜尋畫面上的連結，網頁的畫面是從 Google 主機傳到你的手機上，速度會非常快
**網址像這樣 https://www.google.com.tw/amp/s/mini.nidbox.com/diary/readamp/2002
**因為從 Google 主機以 HTTP2.0 傳過來所以快、且 HTML / CSS /JS 相關的語法都去除或精簡 -->顯示變快

搜尋畫面像這樣

這是一個 AMP 網頁的標準寫法:
參考：
https://www.ampproject.org/zh_cn/docs/get_started/create/basic_markup

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">     *我們常用的這種寫法 不行--> <meta http-equiv="Content-Type" content="text/html; 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>

Google Analytics

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
這段放在 </head> 之前

<body> 後加上

<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
    "account": "UA-559xxx-xx" <--這裡放你的 GA 號碼
},
"triggers": {
    "trackPageview": {
      "on": "visible",
      "request": "pageview"
    }
}
}
</script>
</amp-analytics>

AdSense

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

<amp-ad width=336 height=280 type="adsense" data-ad-client="ca-pub-121339004xxxx" data-ad-slot="21856xxxx"></amp-ad>

Youtube

<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

<amp-youtube data-videoid="mGENRKrdoGY" layout="responsive" width="480" height="270"></amp-youtube>

Components / Tags

https://www.ampproject.org/docs/reference/components

Javascript

畫面中不准含有 javascript 語法

如這樣是禁止的
<script>
alert("hello");
</script>

但引入外部是允許
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

一些常用的 html tag 都不行用

如
<i class="fa fa-plus"></i>    i 不行用
<font ...> xxx </font>    font 不行用
<div style=""></div>    style 不行用
<iframe ...</frame>    古早時代用來撥放 youtube 的語法

網頁 Tag 相關檢查表：

https://www.ampproject.org/docs/reference/spec#required-markup

測試你的網頁是否符合 AMP：

您的 AMP 網頁有效嗎？
這是 google 提供的 AMP 語法檢測工具
將你的 AMP 網址輸入即可知道測試結果！

https://search.google.com/test/amp?hl=zh-TW

**畫面會指示哪幾行語法有誤、解決的辦法

**這個檢測工具有個小麻煩，當你連續檢測 6,7 次後
系統會誤認你是機器人，會跳出 CAPTCHA 要求你確認不是機器人
而且...接下來每次檢測都要再回答我是人、人、人...

**檢測過關後，畫面上會有個【提交至 Google】按鈕，
提交出去後大約 3~6小時就可以在手機搜尋時看到 AMP的畫面
(沒提交的部分，要等 google robot 慢慢來抓資料 )
   **已確定  Googlebot 有來抓資料，等了 3~5天，在手機搜尋時部分文章有陸續出現 AMP記號 (不是每一篇日記都出現)

另外，以 Chrome 瀏覽 AMP 畫面時
若符合 AMP 的網頁，在 Developer Tools (Win 按 F12 / Mac 按 Cmd+Opt+I ) 的 Console 畫面中
會顯示 Powered by AMP HTML 字樣

#development=1

結構化資料測試工具

https://search.google.com/structured-data/testing-tool/u/0/
輸入網址會告訴你網頁中的 metadata 是否完整

Search Console

在 Google 的 Search Console 工具中的
--> 搜尋結果呈現方式 --> 加速行動版網頁
有列出 AMP 相關的檢索成功、錯誤訊息

https://www.google.com/webmasters/tools/home?hl=zh-TW