什麼是 AMP ?
Accelerated Mobile Pages
Google團隊為了讓手機頁面能快速被讀取,而採取的技術
為網站另做個cache頁 (如果要求手機版網站要做AMP的話,以後只做AMP頁面,不做手機版網站算了)
AMP基本上不希望網頁裡有使用到外部的檔案資源(圖片、影片、js、css、廣告、……),如果真有要使用到的話,要按照其規定的語法放入。而且…… css最多50k 、 絕對不能寫js
官網 & Learn AMP by Example上都有範例了,在此就不詳細解說了。
記得! AMP 的 html tag ,基本上那些連到外部資源的 html tag ,要在前面加上 amp-
;所以, <img>
會變成 <amp-img>
, <video>
會變成 <amp-video>
,......;然後,並不會有 <amp-div>
這種鬼東西。
有點在此強調一下:AMP的網頁有官方的命名規則,同時AMP網頁&原本的非AMP網頁之間要加些語法,把2者做連結,範例如下:
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">
或是
<link rel="amphtml" href="/article.amp.html">
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">
或是
<link rel="canonical" href="/article.html">
工欲善其事,必先利其器
可驗證AMP的工具網址:
可於本機自動產生AMP網頁的好東西
很好的題目!
希望可以談及AMP未來的發展和業界的看法。
好主意,之前沒想到要談到這一塊
期待中...