[教學] 要如何將網頁導入AMP的架構，讓網頁開啟速度更快速、更助於SEO排名
![梅問題－[教學] 要如何將網頁導入AMP的架構，讓網頁開啟速度更快速、更助於SEO排名](https://i0.wp.com/photo.minwt.com/img/Content/webdesign/amp-webpage/amp-webpage_00.jpg?w=640&ssl=1)
Google為了加速網頁的載入速度，因此而推出了AMP的架構，讓你的網站可以被Google暫存起來，當使用者在搜尋資料時，就可以用秒開的速度，將你的網頁給呈現出來，同時當頁面有AMP的架構時，在搜尋的列表中，前方就會出現一個閃電，這也意謂著，這個頁面就如閃電一樣的快，確是如此只要網頁有採用AMP的，頁面在開啟還真的是飛快，而要怎麼將網頁導入AMP的架構呢?當使用WordPress的朋友，只需安裝AMP的外掛，立即就可將佈景套用AMP的架構，完全不傷神。
但若你只是單純的一頁式網頁，要如何來將網頁結構，引用AMP的架構，其實AMP的架構就跟HTML5一樣，只不過這些標籤是由Google自行所定義出來的，因此瀏覽器自然看不懂這些標籤是作什麼用，所以當要引用AMP架構時，還得需要引用javascript，來解析這些標籤，這樣頁面才能在瀏覽器完整的呈現，甚至透過這些標籤，Google也才知道，那些是圖片那些是iframe或video，同時官方也有提供完整的文件，因此也可依照所需，分別的引用amp的標籤以及載入javascript，而這邊梅干就簡單來說明一下，整個AMP的網頁架構要如何來設計。
AMP
連結網址：https://www.ampproject.org/docs/reference/components
Step1
要開始設計AMP的架構前，先到官方來了解一下，當進到AMP的官方說明文件後，從左邊的選單中，共可區分成六大類。
![梅問題－[教學] 要如何將網頁導入AMP的架構，讓網頁開啟速度更快速、更助於SEO排名](https://i0.wp.com/photo.minwt.com/img/Content/webdesign/amp-webpage/amp-webpage_01.jpg?w=640&ssl=1)
Step2
當點選分類，再進到子類後，右邊就會看到，當要使用這個標籤，像是大家常用的iframe，第一步需先將javascript給引用。
![梅問題－[教學] 要如何將網頁導入AMP的架構，讓網頁開啟速度更快速、更助於SEO排名](https://i0.wp.com/photo.minwt.com/img/Content/webdesign/amp-webpage/amp-webpage_02.jpg?w=640&ssl=1)
Step3
接著下方就會有amp相關的標籤與格式，這時只需依照範例的CODE進行套用就可以了，而說真的這裡面的項目真的相當的多，所以當要使用時，可先到AMP的官網，看下文件，在知道AMP的官方的文件怎麼用後，接下來梅干就快速的說明一下，當要使用AMP架構時，網頁需加入那些的元素，現在就一塊來看看吧！
![梅問題－[教學] 要如何將網頁導入AMP的架構，讓網頁開啟速度更快速、更助於SEO排名](https://i0.wp.com/photo.minwt.com/img/Content/webdesign/amp-webpage/amp-webpage_03.jpg?w=640&ssl=1)
Step4
首先在html的標籤中，需加入amp。
<html amp>
Step5
接著在sytle的標籤中，則需加入amp-custom，同時下方amp-boilerplate這是用來設定手機版在ampd 滾動方式。
<style amp-custom>
/*CSS樣式設定*/
</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>
Step6
接著這邊很重要，需引用javascript來解析這些標籤，由於這需一開始就先進行解譯，所以建議放在head結尾的上方。
1 |
<script async src="https://cdn.ampproject.org/v0.js"></script> |
Step7
當基本框架都設定好，接下來就可開始使用amp的標籤，比方像是最常用的圖片，則從原來的img變成了amp-img了，同時使用amp-img需要指定圖片的寬高喔！否則會無法顯示。
1 |
<amp-img src="DSCF3433.jpg" width="300" height="400"></amp-img> |
#基本的AMP網頁架構
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
<!doctype html>
<html amp>
<head>
<meta charset="utf-8">
<title>AMP Basic Template</title>
<link rel="canonical" href="./regular-html-version.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<style amp-custom>
/*CSS樣式設定*/
</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>
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
<script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
</head>
<body>
<h1>Hello~AMP</h1>
<amp-img src="DSCF3433.jpg" width="300" height="400"></amp-img>
<amp-youtube
data-videoid="oOTxsRTjkNM"
layout="responsive"
width="480" height="270"></amp-youtube>
<hr>
<amp-iframe width="200" height="100"
sandbox="allow-scripts allow-same-origin"
layout="responsive"
frameborder="0"
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3614.6410600113563!2d121.51615271552346!3d25.04625248396649!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442a9723f815b43%3A0x6171a8d46dd0c5b9!2zMTAw5Y-w5YyX5biC5Lit5q2j5Y2A5b-g5a2d6KW_6Lev5LiA5q61NDHomZ8!5e0!3m2!1szh-TW!2stw!4v1522032334113">
</amp-iframe>
</body>
</html>
|