搜尋

熱門關鍵字:

最新文章

  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>

amp教學, amp網頁, amp網頁設計, seo工具,