Skip to content
WONGCW 網誌
  • 首頁
  • 論壇
  • 微博
  • 壁紙下載
  • 免費圖床
  • 視頻下載
  • 聊天室
  • SEO工具
  • 支援中心
  • 表格製作
  • More
    • 在線名片
    • 網頁搜索
    • 天氣預報
    • 二維碼生成器
  • Search Icon

WONGCW 網誌

記錄生活經驗與點滴

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

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

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

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

 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>

分享此文:

  • 按一下即可分享至 X(在新視窗中開啟) X
  • 按一下以分享至 Facebook(在新視窗中開啟) Facebook
  • 分享到 WhatsApp(在新視窗中開啟) WhatsApp
  • 按一下以分享到 Telegram(在新視窗中開啟) Telegram
  • 分享到 Pinterest(在新視窗中開啟) Pinterest
  • 分享到 Reddit(在新視窗中開啟) Reddit
  • 按一下即可以電子郵件傳送連結給朋友(在新視窗中開啟) 電子郵件
  • 點這裡列印(在新視窗中開啟) 列印

相關


教學資源

Post navigation

PREVIOUS
[SEO] Google 搜尋引擎最佳化 (SEO) 入門指南,線上教你怎麼作SEO
NEXT
Chrome 60.0版限定!Lighthouse 專為網站健檢,網站效能、使用經驗、SEO構架

發表迴響取消回覆

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

More results...

Generic filters
Exact matches only
Search in title
Search in content
Search in excerpt
Filter by 分類
網站公告
Featured
限時免費
Windows 軟件下載
系統軟件
辦公軟件
圖像處理
影音媒體
網絡軟件
應用軟件
Mac 軟件下載
安卓軟件下載
網絡資訊
Mac資訊
Linux資訊
VPS資訊
NASA資訊
WordPress資訊
WeChat資訊
PHP資訊
教學資源
開源程序
網頁工具
SEO工具
醫療健康
其他資訊
Content from
Content to
2018 年 10 月
一 二 三 四 五 六 日
1234567
891011121314
15161718192021
22232425262728
293031  
« 9 月   11 月 »

分類

  • 網站公告
  • 限時免費
  • Windows 軟件下載
  • 系統軟件
  • 辦公軟件
  • 圖像處理
  • 影音媒體
  • 網絡軟件
  • 應用軟件
  • Mac 軟件下載
  • 安卓軟件下載
  • 網絡資訊
  • Mac資訊
  • Linux資訊
  • VPS資訊
  • NASA資訊
  • WordPress資訊
  • WeChat資訊
  • PHP資訊
  • 教學資源
  • 開源程序
  • 網頁工具
  • SEO工具
  • 醫療健康
  • 其他資訊

彙整

近期文章

  • 索尼又鎖區過百國家無法遊玩《星刃》 2025-05-16
  • 育碧將下架多款經典遊戲公司稱其有權這麼做 2025-05-16
  • 川普急簽中東AI大單惹惱對華強硬派 2025-05-16
  • 美教授AI講義漏洞百出大學生怒討8000美元學費 2025-05-16
  • 奧特曼嘲諷馬斯克AI翻車:追求真相的AI卻在輸出陰謀論 2025-05-16
  • 東南亞人群基因體研究領域取得里程碑突破 2025-05-16
  • 雷軍最新演講曝光:一場意外給小米帶來巨大質疑不再是產業新人 2025-05-16
  • “中東矽谷”?美國、阿聯酋宣布將聯手打造5吉瓦超級AI園區 2025-05-16
  • Google One訂閱服務的用戶數量達1.5億 2025-05-16
  • 巴菲特第一季大幅減持銀行股蘋果仍是最大重倉股 2025-05-16

熱門文章與頁面︰

  • 您可以在Windows 11 24H2 中找回WordPad
  • AI破解遠古密碼:消失百萬年的巨型蜥蜴曾稱霸北美
  • 打車叫到特斯拉不會開門很尷尬?官方介紹開關門方法
  • “中東矽谷”?美國、阿聯酋宣布將聯手打造5吉瓦超級AI園區
  • 川普希望蘋果停止將iPhone生產轉移到印度轉而提高美國產量
  • 科學家發現人類能發出的微弱的可見光但死後會消失
  • 巴菲特盛贊接班人阿貝爾:真正卓越的人才極為罕見
  • Shein將在越南租賃大型倉庫旨在應對美國關稅
  • 知名經濟學家警告:波音巨額飛機交易將推高美國通膨和利率
  • 人民日報痛批智能客服不智能轉人工怎麼這麼難?

投遞稿件

歡迎各界人士投遞稿件到admin@wongcw.com

請提供以下資料:

1.你的名字

2.你的電郵

3.分類目錄

4.文章標題

5.文章摘要

6.文章內容

7.文章來源

 

聯繫我們

查詢,投稿,商務合作:
​admin@wongcw.com
​技術支援:
​support@wongcw.com
​客户服務:
​cs@wongcw.com

QQ群:833641851

快帆

MALUS

極度掃描

DMCA.com Protection Status

WONGCW 網誌

  • 免責聲明
  • 捐助我們
  • ThemeNcode PDF Viewer
  • ThemeNcode PDF Viewer SC
  • Events

服務器提供

本站使用之服務器由ikoula提供。

聯繫我們

查詢,投稿,商務合作:
​admin@wongcw.com
​技術支援:
​support@wongcw.com
​客户服務:
​cs@wongcw.com

QQ群:833641851

© 2025   All Rights Reserved.