網頁設計, 網頁資源

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

梅干2018/03/28
梅問題-[教學] 要如何將網頁導入AMP的架構,讓網頁開啟速度更快速、更助於SEO排名
  Google為了加速網頁的載入速度,因此而推出了AMP的架構,讓你的網站可以被Google暫存起來,當使用者在搜尋資料時,就可以用秒開的速度,將你的網頁給呈現出來,同時當頁面有AMP的架構時,在搜尋的列表中,前方就會出現一個閃電,這也意謂著,這個頁面就如閃電一樣的快,確是如此只要網頁有採用AMP的,頁面在開啟還真的是飛快,而要怎麼將網頁導入AMP的架構呢?當使用WordPress的朋友,只需安裝AMP的外掛,立即就可將佈景套用AMP的架構,完全不傷神。
  但若你只是單純的一頁式網頁,要如何來將網頁結構,引用AMP的架構,其實AMP的架構就跟HTML5一樣,只不過這些標籤是由Google自行所定義出來的,因此瀏覽器自然看不懂這些標籤是作什麼用,所以當要引用AMP架構時,還得需要引用javascript,來解析這些標籤,這樣頁面才能在瀏覽器完整的呈現,甚至透過這些標籤,Google也才知道,那些是圖片那些是iframe或video,同時官方也有提供完整的文件,因此也可依照所需,分別的引用amp的標籤以及載入javascript,而這邊梅干就簡單來說明一下,整個AMP的網頁架構要如何來設計。
AMP
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>