1. 首頁
  2. »
  3. 網頁開發
  4. »
  5. 網頁設計
  6. »
  7. [教學] 要如何將網頁導入AMP的架構,讓網頁開啟速度更快速、更助於SEO排名

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

2018/03/28
梅問題-[教學] 要如何將網頁導入AMP的架構,讓網頁開啟速度更快速、更助於SEO排名

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

 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>