[教學] 要如何將網頁導入AMP的架構，讓網頁開啟速度更快速、更助於SEO排名

梅干 2018/03/28 3 分鐘閱讀

　　Google為了加速網頁的載入速度，因此而推出了AMP的架構，讓你的網站可以被Google暫存起來，當使用者在搜尋資料時，就可以用秒開的速度，將你的網頁給呈現出來，同時當頁面有AMP的架構時，在搜尋的列表中，前方就會出現一個閃電，這也意謂著，這個頁面就如閃電一樣的快，確是如此只要網頁有採用AMP的，頁面在開啟還真的是飛快，而要怎麼將網頁導入AMP的架構呢?當使用WordPress的朋友，只需安裝AMP的外掛，立即就可將佈景套用AMP的架構，完全不傷神。

　　但若你只是單純的一頁式網頁，要如何來將網頁結構，引用AMP的架構，其實AMP的架構就跟HTML5一樣，只不過這些標籤是由Google自行所定義出來的，因此瀏覽器自然看不懂這些標籤是作什麼用，所以當要引用AMP架構時，還得需要引用javascript，來解析這些標籤，這樣頁面才能在瀏覽器完整的呈現，甚至透過這些標籤，Google也才知道，那些是圖片那些是iframe或video，同時官方也有提供完整的文件，因此也可依照所需，分別的引用amp的標籤以及載入javascript，而這邊梅干就簡單來說明一下，整個AMP的網頁架構要如何來設計。

AMP

網站名稱：AMP
連結網址：https://www.ampproject.org/docs/reference/components

Step1
要開始設計AMP的架構前，先到官方來了解一下，當進到AMP的官方說明文件後，從左邊的選單中，共可區分成六大類。
梅問題－[教學] 要如何將網頁導入AMP的架構，讓網頁開啟速度更快速、更助於SEO排名

Step2
當點選分類，再進到子類後，右邊就會看到，當要使用這個標籤，像是大家常用的iframe，第一步需先將javascript給引用。
梅問題－[教學] 要如何將網頁導入AMP的架構，讓網頁開啟速度更快速、更助於SEO排名

Step3
接著下方就會有amp相關的標籤與格式，這時只需依照範例的CODE進行套用就可以了，而說真的這裡面的項目真的相當的多，所以當要使用時，可先到AMP的官網，看下文件，在知道AMP的官方的文件怎麼用後，接下來梅干就快速的說明一下，當要使用AMP架構時，網頁需加入那些的元素，現在就一塊來看看吧！
梅問題－[教學] 要如何將網頁導入AMP的架構，讓網頁開啟速度更快速、更助於SEO排名

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網頁架構

<!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樣式設定*/
<span style="color: #007700">&lt;/style&gt;</span>
<span style="color: #007700">&lt;style </span><span style="color: #0000CC">amp-boilerplate</span><span style="color: #007700">&gt;body</span>{<span style="color: #333333">-</span>webkit<span style="color: #333333">-</span>animation<span style="color: #333333">:-</span>amp<span style="color: #333333">-</span>start <span style="color: #6600EE; font-weight: bold">8s</span> steps(<span style="color: #6600EE; font-weight: bold">1</span><span style="color: #333333">,</span>end) <span style="color: #6600EE; font-weight: bold">0s</span> <span style="color: #6600EE; font-weight: bold">1</span> <span style="color: #008800; font-weight: bold">normal</span> <span style="color: #008800; font-weight: bold">both</span>;<span style="color: #333333">-</span>moz<span style="color: #333333">-</span>animation<span style="color: #333333">:-</span>amp<span style="color: #333333">-</span>start <span style="color: #6600EE; font-weight: bold">8s</span> steps(<span style="color: #6600EE; font-weight: bold">1</span><span style="color: #333333">,</span>end) <span style="color: #6600EE; font-weight: bold">0s</span> <span style="color: #6600EE; font-weight: bold">1</span> <span style="color: #008800; font-weight: bold">normal</span> <span style="color: #008800; font-weight: bold">both</span>;<span style="color: #333333">-</span>ms<span style="color: #333333">-</span>animation<span style="color: #333333">:-</span>amp<span style="color: #333333">-</span>start <span style="color: #6600EE; font-weight: bold">8s</span> steps(<span style="color: #6600EE; font-weight: bold">1</span><span style="color: #333333">,</span>end) <span style="color: #6600EE; font-weight: bold">0s</span> <span style="color: #6600EE; font-weight: bold">1</span> <span style="color: #008800; font-weight: bold">normal</span> <span style="color: #008800; font-weight: bold">both</span>;animation<span style="color: #333333">:-</span>amp<span style="color: #333333">-</span>start <span style="color: #6600EE; font-weight: bold">8s</span> steps(<span style="color: #6600EE; font-weight: bold">1</span><span style="color: #333333">,</span>end) <span style="color: #6600EE; font-weight: bold">0s</span> <span style="color: #6600EE; font-weight: bold">1</span> <span style="color: #008800; font-weight: bold">normal</span> <span style="color: #008800; font-weight: bold">both</span>}<span style="color: #008800; font-weight: bold">@-webkit-keyframes</span> <span style="color: #007700">-amp-start</span>{<span style="color: #007700">from</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">hidden</span>}<span style="color: #007700">to</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">visible</span>}}<span style="color: #008800; font-weight: bold">@-moz-keyframes</span> <span style="color: #007700">-amp-start</span>{<span style="color: #007700">from</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">hidden</span>}<span style="color: #007700">to</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">visible</span>}}<span style="color: #008800; font-weight: bold">@-ms-keyframes</span> <span style="color: #007700">-amp-start</span>{<span style="color: #007700">from</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">hidden</span>}<span style="color: #007700">to</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">visible</span>}}<span style="color: #008800; font-weight: bold">@-o-keyframes</span> <span style="color: #007700">-amp-start</span>{<span style="color: #007700">from</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">hidden</span>}<span style="color: #007700">to</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">visible</span>}}<span style="color: #008800; font-weight: bold">@keyframes</span> <span style="color: #007700">-amp-start</span>{<span style="color: #007700">from</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">hidden</span>}<span style="color: #007700">to</span>{<span style="color: #008800; font-weight: bold">visibility</span><span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">visible</span>}}<span style="color: #007700">&lt;/style&gt;&lt;noscript&gt;&lt;style </span><span style="color: #0000CC">amp-boilerplate</span><span style="color: #007700">&gt;body</span>{<span style="color: #333333">-</span>webkit<span style="color: #333333">-</span>animation<span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">none</span>;<span style="color: #333333">-</span>moz<span style="color: #333333">-</span>animation<span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">none</span>;<span style="color: #333333">-</span>ms<span style="color: #333333">-</span>animation<span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">none</span>;animation<span style="color: #333333">:</span><span style="color: #008800; font-weight: bold">none</span>}<span style="color: #007700">&lt;/style&gt;&lt;/noscript&gt;</span>
<span style="color: #007700">&lt;script </span><span style="color: #0000CC">async</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">&quot;https://cdn.ampproject.org/v0.js&quot;</span><span style="color: #007700">&gt;&lt;/script&gt;</span>
<span style="color: #007700">&lt;script </span><span style="color: #0000CC">async</span> <span style="color: #0000CC">custom-element=</span><span style="background-color: #fff0f0">&quot;amp-iframe&quot;</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">&quot;https://cdn.ampproject.org/v0/amp-iframe-0.1.js&quot;</span><span style="color: #007700">&gt;&lt;/script&gt;</span>
<span style="color: #007700">&lt;script </span><span style="color: #0000CC">async</span> <span style="color: #0000CC">custom-element=</span><span style="background-color: #fff0f0">&quot;amp-youtube&quot;</span> <span style="color: #0000CC">src=</span><span style="background-color: #fff0f0">&quot;https://cdn.ampproject.org/v0/amp-youtube-0.1.js&quot;</span><span style="color: #007700">&gt;&lt;/script&gt;</span>

</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>