AMP的基本製作概念

AMP的基本製作概念
如何製作一頁AMP?AMP基於獨特的寫法,因此在製作上必須遵循AMP規範

一個簡單的AMP網頁應該是這樣
語法範例
<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<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">

<style amp-custom>
/* any custom style goes here */
body {background-color: white;}
amp-img {background-color: gray;border: 1px solid black;}
</style>
<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>
</head>
<body>
<h1>Welcome to the mobile web</h1>
</body>
</html>

語法解釋
表格來解釋上方這些程式碼的作用(這些都是必須的,缺少任何元素都不行,位置也不能亂放)
語法 解釋
<html amp lang="en"> 宣告此頁面是AMP頁,也可以用 <html ⚡>或是 <html amp>
<script async src="https://cdn.ampproject.org/v0.js"></script> 載入AMP的JS資料庫
<link rel="canonical" href="$SOME_URL"> 連結回原本的一般網頁的網址,讓google可以發現是哪一頁的amp版
<meta name="viewport" content="width=device-width,minimum-scale=1"> 為了讓手機上有較佳的瀏覽效果的響應式語法
<style amp-custom>...</style> 自訂義的css寫在這裡面,不允許外部載入css
<style amp-boilerplate>body...</noscript> AMP樣板code,必須放到</head>前面
注意! 在原本的一般網頁中也必須在<head>放入連結AMP版的語法如:
 <link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">


關於css
css僅能寫入於html裡面,無法使用外連檔案,除非是AMP特別認可的css字體白名單網址
* !important 不可以使用
* 禁止外連css檔案

關於內容語法
在<body></body>裡面的內容需要注意幾件事,禁止使用部分標籤,這是為了加速載入速度。若會用到相關物件,需要使用amp的專用語法。
例如圖片標籤需要改成 amp-img
<img src="..."> → <amp-img></amp-img>


圖片語法範例(寬高一定要有數值):
<amp-img alt="A view of the sea"src="images/sea.jpg"width="900"height="675"layout="responsive"></amp-img>

以下標籤需要更改為amp的語法
其他像是影音、聲音、崁入常用的iframe也是被禁止使用的,如果要用類似的功能,需要使用amp的專用語法,並要載入執行的js檔案
禁止使用<video>須改為 <amp-video></amp-video>
禁止使用<iframe>須改為<amp-iframe></amp-iframe> (如果是youtube影片有另外的專用語法)
禁止使用<form>須改為<amp-form></amp-iframe>
詳細使用方式在之後的文章會一一介紹

基本的AMP頁面製作完成後,可以到測試頁面貼上網址測試看看
原始文章參考:Create your first AMP page
 

更多文章:

  1. 每個AMP頁面都必須有非AMP版本嗎?
  2. AMP教學-amp-bind 增加網頁互動
  3. AMP頁面只適合使用在靜態網站上面嗎?
  4. AMP只適合在手機裝置上觀看嗎?
  5. AMP教學-Tab分頁切換

回應