AMP的基本製作概念
BY kate │
如何製作一頁AMP?AMP基於獨特的寫法，因此在製作上必須遵循AMP規範
一個簡單的AMP網頁應該是這樣
語法範例
關於css
css僅能寫入於html裡面，無法使用外連檔案，除非是AMP特別認可的css字體白名單網址
* !important 不可以使用
* 禁止外連css檔案
關於內容語法
在<body></body>裡面的內容需要注意幾件事，禁止使用部分標籤，這是為了加速載入速度。若會用到相關物件，需要使用amp的專用語法。
例如圖片標籤需要改成 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
一個簡單的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>
語法解釋
表格來解釋上方這些程式碼的作用(這些都是必須的，缺少任何元素都不行，位置也不能亂放)
注意! 在原本的一般網頁中也必須在<head>放入連結AMP版的語法如: 表格來解釋上方這些程式碼的作用(這些都是必須的，缺少任何元素都不行，位置也不能亂放)
| 語法 | 解釋 |
| <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>前面 |
<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
