本頁使用了標題或全文手工轉換

Accelerated Mobile Pages

維基百科,自由的百科全書
跳至導覽 跳至搜尋

Accelerated Mobile Pages(簡稱AMP,意為「加速行動頁面」)是Google帶領開發的開源專案,目的是為提升行動裝置網站的存取速度[1]。AMP也可指其衍生的標準和等專案成果。AMP在HTML等廣泛使用的網路技術基礎上進行改良,它的核心稱作AMP HTML,是HTML的一種。服務於技術預覽期結束後的2016年2月正式發布[2][3][4]

構成[編輯]

AMP大致可分為AMP HTMLAMP JSAMP Cache三部分[5]

AMP HTML是描述網頁所用的標記式語言,相當於普通網頁使用的HTML之亞種。AMP HTML在圖像顯示等方面使用與HTML不同的專用標籤,另外還限制了HTML部分功能的使用。

AMP JS是一套JavaScript,保證AMP HTML的正確和快速顯示。除此之外,AMP JS還負責在只支援普通HTML的瀏覽器中擔任橋樑,使其能正確支援AMP HTML的專用功能。AMP HTML中可以呼叫該函式庫。

AMP Cache是快取並傳輸AMP頁面的CDN,進一步提高AMP網頁的效能。用戶在搜尋引擎中點擊AMP網頁時,實際上存取的是最佳化後的快取頁面。Google的AMP Cache名為Google AMP Cache

AMP HTML[編輯]

與建立普通網頁時建立的HTML類似,建立AMP頁面時是以AMP HTML的方式建立,寫法上大部分與HTML相同。副檔名亦同樣是.html[6],但也有人選擇.amp.html以示區別。

AMP專案網站上有AMP HTML的詳細標準,以下為其中獨特的部分。

頭部[編輯]

AMP HTML的頭部格式如下。

<!doctype html>
<html amp lang="zh">
    <head>

其中DOCTYPE聲明英語Document type declaration與普通的HTML5完全一樣,但起始標籤<html>改為<html amp>或包含繪文字的<html ⚡>

<head>標籤須含有的元素包括charsetviewport元標籤,格式固定的<style>元素,以及讀取AMP JS庫的<script>元素等(其中一部分順序也有規定)。此外,通過加入JSON-LD英語JSON-LD形式的結構化資料[7]等,頁面可以包含向搜尋引擎等工具傳遞合適資訊的元資料

自訂元素[編輯]

除普通HTML元素外,AMP HTML還可使用一些獨有元素(標籤),即自訂元素。例如用於顯示圖像的<amp-img>(取代普通的<img>元素),顯示布局側邊欄的<amp-sidebar>,顯示外部站點內容的<amp-facebook><amp-twitter>,等等。

AMP中不可使用用戶JavaScript,但有作為代替的自訂元素,代表性的有顯示廣告的<amp-ad>和用於存取分析日語アクセス解析<amp-analytics>

部分自訂元素要求使用時添加一些附加JavaScript庫(在<head>標籤內)。

樣式[編輯]

AMP頁面與普通頁面一樣,使用CSS進行樣式布局。但CSS不能用外部檔案表示,也不能在各元素的style屬性中分別定義,必須寫在AMP HTML開始部分<head>標籤中的單一<style>元素中(可在伺服器端動態生成CSS後嵌入AMP HTML)。包括媒體查詢器和多數的屬性選擇器在內,大部分CSS功能都可在AMP中使用,禁用的則有!important限定符和*選擇器等。

另外,AMP允許通過元素的layout屬性控制布局。例如,自適應圖像可通過<amp-img layout="responsive">表示。

HTML限制[編輯]

部分HTML元素和屬性的使用受到限制,特別是圖像和媒體方面,這些均由AMP自有的自訂元素替換。

指令碼[編輯]

AMP中,用戶自己的JavaScript,以及jQueryAngularJS這類普通JavaScript庫原則上不能使用。作為代替方案,可使用AMP HTML的自訂元素製作互動式網頁。

優點[編輯]

使用AMP的網頁可快速讀取並顯示,用戶(網頁存取者)在點擊連結後無需等待即可看到頁面內容。根據Google發布的資料,網頁若是存取速度過慢,多數用戶會放棄並關閉網頁[8],快速載入的頁面對網站製作者也有利。

Google搜尋結果中,妥善建立的AMP網頁旁會出現AMP標誌,對新聞等部分內容還會採用輪播(carousel)的特殊樣式[9]

應用[編輯]

部分媒體已開始使用AMP,包括CNN美國廣播公司福斯新聞。安裝第三方外掛程式後,WordPress部落格也可使用AMP[10]

2017年3月7日,Google宣布百度搜狗Yahoo! JAPAN搜尋將支援AMP[11];其中百度在搜尋結果中將AMP頁面標註為「MIP」(行動網頁加速器),一個百度主導、與AMP類似的專案[12]

參考文獻[編輯]

  1. ^ Google、モバイルWeb高速化のオープンイニシアチブ「AMP」立ち上げ Twitterや大手メディアが参加. ITmedia日語ITmedia NEWS. 2015-10-08 [2017-03-07]. (原始內容存檔於2017-03-07) (日語). 
  2. ^ What Is Accelerated Mobile Pages? From Code To SEO. Malika Sharma. 2016-02-19. (原始內容存檔於2016-03-09) (英語). 
  3. ^ Christopher Ratcliff. Google has launched Accelerated Mobile Pages. Search Engine Watch. 2016-02-23 [2016-04-03]. (原始內容存檔於2016-03-22) (英語). 
  4. ^ Implement Accelerated Mobile Pages (AMP) and Optimize the Website to Next Level. MUS Tips. 2016-03-05 [2016-04-19]. (原始內容存檔於2016-04-26) (英語). 
  5. ^ Overview. Accelerated Mobile Pages Project. [2017-03-07]. (原始內容存檔於2017-03-07) (日語). 
  6. ^ AMP HTML ページを作成する. Accelerated Mobile Pages Project. [2017-03-08]. (原始內容存檔於2017-03-08) (日語). 
  7. ^ ついに始まった、Google AMP(Accelerated Mobile Pages)を試してみよう!. CodeZine. 2016-04-15 [2017-03-07]. (原始內容存檔於2017-03-07) (日語). 
  8. ^ Googleの検索結果で上位表示されるAccelerated Mobile Pagesに、はてブやLINEも対応表明. @IT日語@IT. 2016-04-18 [2017-03-07]. (原始內容存檔於2017-03-07) (日語). 
  9. ^ Use AMP HTML. Google Developers. [2017-03-07]. (原始內容存檔於2017-03-07) (英語). 
  10. ^ Jyoti Prakash Ray. How to Setup Google AMP on WordPress Site (Using AMP Plugin). Wpmyweb.com. 2017-02-07 [2017-03-07]. (原始內容存檔於2017-02-10) (英語). 
  11. ^ AMP grows its footprint – Accelerated Mobile Pages Project. www.ampproject.org. [2017-03-08]. (原始內容存檔於2017-03-08) (英語). 
  12. ^ MIP官网_移动网页加速器_MIP(Mobile Instant Pages). www.mipengine.org. [2017-03-08]. (原始內容存檔於2017-02-19) (中文(中國大陸)‎). 

外部連結[編輯]