初步了解AMP

什麼是 AMP ?

Accelerated Mobile Pages

Google團隊為了讓手機頁面能快速被讀取，而採取的技術
為網站另做個cache頁 （如果要求手機版網站要做AMP的話，以後只做AMP頁面，不做手機版網站算了）

AMP基本上不希望網頁裡有使用到外部的檔案資源（圖片、影片、js、css、廣告、……），如果真有要使用到的話，要按照其規定的語法放入。而且…… css最多50k 、 絕對不能寫js

基本的AMP結構

官網 & Learn AMP by Example上都有範例了，在此就不詳細解說了。

記得! AMP 的 html tag ，基本上那些連到外部資源的 html tag ，要在前面加上 amp- ；所以， <img> 會變成 <amp-img> ， <video> 會變成 <amp-video> ，......；然後，並不會有 <amp-div> 這種鬼東西。

有點在此強調一下：AMP的網頁有官方的命名規則，同時AMP網頁&原本的非AMP網頁之間要加些語法，把2者做連結，範例如下：

• 非AMP頁面中加這行

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

或是

<link rel="amphtml" href="/article.amp.html">

• AMP頁面中加這行

<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

或是

<link rel="canonical" href="/article.html">

纂寫AMP網頁時使用的工具

工欲善其事，必先利其器

• 可驗證AMP的工具網址：

  • The AMP Validator extension for Chrome
  • The AMP Validator extension for Opera
  • The AMP Validator Web Interface

• 可於本機自動產生AMP網頁的好東西

  • googlecodelabs/advanced-interactivity-in-amp