iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 1
0
Modern Web

AMP系列 第 1

AMP(Lession 1) - 初步了解AMP

  • 分享至 

  • xImage
  •  

初步了解AMP

什麼是 AMP ?

Accelerated Mobile Pages

Google團隊為了讓手機頁面能快速被讀取,而採取的技術
為網站另做個cache頁 (如果要求手機版網站要做AMP的話,以後只做AMP頁面,不做手機版網站算了)

AMP基本上不希望網頁裡有使用到外部的檔案資源(圖片、影片、js、css、廣告、……),如果真有要使用到的話,要按照其規定的語法放入。而且…… css最多50k絕對不能寫js

基本的AMP結構

官網 & Learn AMP by Example上都有範例了,在此就不詳細解說了。

記得! AMP 的 html tag ,基本上那些連到外部資源的 html tag ,要在前面加上 amp- ;所以, <img> 會變成 <amp-img><video> 會變成 <amp-video> ,......;然後,並不會有 <amp-div> 這種東西。

有點在此強調一下:AMP的網頁有官方的命名規則,同時AMP網頁&原本的非AMP網頁之間要加些語法,把2者做連結,範例如下:

  • 非AMP頁面中加這行
<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

或是

<link rel="amphtml" href="/article.amp.html">
  • AMP頁面中加這行
<link rel="canonical" href="https://www.example.com/url/to/full/document.html">

或是

<link rel="canonical" href="/article.html">

纂寫AMP網頁時使用的工具

工欲善其事,必先利其器


下一篇
AMP(Lession 2) - AMP網頁中的Schema
系列文
AMP30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
marlin12
iT邦研究生 5 級 ‧ 2018-10-01 20:38:09

很好的題目!
希望可以談及AMP未來的發展和業界的看法。

majo2013 iT邦新手 4 級 ‧ 2018-10-03 23:04:36 檢舉

好主意,之前沒想到要談到這一塊

marlin12 iT邦研究生 5 級 ‧ 2018-10-06 17:38:27 檢舉

期待中.../images/emoticon/emoticon37.gif

我要留言

立即登入留言