Google AMP - 簡介

上一頁
下一頁

Google Accelerated Mobile Pages (Google-AMP) 是 Google 推出的一個新的開源專案，專門用於使用 AMP HTML 構建輕量級網頁。該專案的主要目標是確保 AMP 程式碼在所有可能的裝置（如智慧手機和平板電腦）上都能正常執行並快速載入。

AMP 只是對標準 HTML 的擴充套件。一些 HTML 標籤已更改，AMP 對其用法添加了限制。本章將列出已更改的 HTML 標籤以及對其新增的限制。處理載入外部資源（例如影像、CSS、JS、表單提交、影片、音訊等）的標籤已更改。

此外，AMP 還添加了許多新功能，例如 amp-date-picker、amp-facebook、amp-ad、amp-analytics、amp-ad、amp-lightbox 等，可以直接在 HTML 頁面中使用。其餘用於顯示的功能則保持不變。

透過所有這些更改和新功能，AMP 有望在實際環境中使用時為頁面提供更快的載入速度和更好的效能。

當您在手機上使用 Google 搜尋引擎搜尋任何內容時，在 Google 頂部輪播顯示的內容大多是 AMP 頁面，如下所示：

Accelerated Mobile Pages

點選 AMP 頁面後，您在位址列中看到的 URL 如下所示：

https://www.google.co.in/amp/s/m.timesofindia.com/sports/cricket/india-in-australia/to-hell-with-the-nets-boys-need-rest-ravi-shastri/amp_articleshow/67022458.cms
Amp Address Bar

該 URL 不是直接來自發布者，而是 Google 指向其在 Google 伺服器上的副本（快取版本），這有助於與非 AMP 頁面相比更快地呈現內容。這僅在裝置或 Google 模擬器模式下才會發生。

AMP 頁面示例

AMP 頁面的示例如下所示：

<!doctype html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Amp Sample Page</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>
         h1 {color: red}
      </style>
      <script type = application/json>{
         "vars": {
            "uid": "23870",
            "domain": "dummyurl.com",
            "sections": "us",
            "authors": "Hello World"
         }
      }
      </script>
      <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>
   </head>
   <body>
      <h1>Amp Sample Page</h1>
      <p>   
         <amp-img src = "imgurl.jpg" width = "300" height = "300" 
            layout = "responsive"></amp-img>
      </p>
      <amp-ad width = "300" height = "250" type = "doubleclick"
         data-slot = "/4119129/no-ad">
         <div fallback>
            <p style = "color:green;font-size:25px;">No ads to Serve!</p>
         </div>
      </amp-ad>
   </body>
</html>

AMP 頁面中的注意事項

讓我們瞭解程式設計師在 AMP 頁面中必須遵循的一些注意事項。

必填標籤

AMP 頁面中必須包含一些必填標籤，如下所示：

  • 我們必須確保在 html 標籤中添加了 amp 或 ⚡，如下所示：

<html amp>
   OR
<html ⚡>

  • <head> 和 <body> 標籤應新增到 HTML 頁面中。

  • 以下必填元標籤應新增到頁面的 head 部分；否則，AMP 驗證將失敗

<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, minimum-scale = 1, initial-scale = 1">

  • 在 head 標籤內新增 rel = "canonical" 連結

<link rel = "canonical" href = "./regular-html-version.html">

  • 帶有 amp-boilerplate 的 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>

  • 帶有 amp-boilerplate 的 noscript 標籤：

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none
      }
   </style>
</noscript>

  • 非常重要的是帶有 async 屬性的 amp script 標籤，如下所示：

<script async src = "https://cdn.ampproject.org/v0.js"> </script>

  • 如果您想向頁面新增自定義 CSS，請注意，我們不能在 AMP 頁面中呼叫外部樣式表。要新增自定義 CSS，所有 CSS 程式碼都必須放在這裡，如下所示：

<style amp-custom>
   //all your styles here
</style>

  • style 標籤應新增 amp-custom 屬性。

AMP 元件的指令碼

請注意，在 AMP 頁面中嚴格不允許使用帶有 src 和 type = ”text/javascript” 的 script 標籤。僅允許在 head 部分新增帶有 async 屬性並與 AMP 元件相關的 script 標籤。

本節列出了用於 AMP 元件的一些指令碼，如下所示：

amp-ad

<script async custom-element = "amp-ad" 
   src = "https://cdn.ampproject.org/v0/amp-ad-0.1.js">
</script>

amp-iframe

<script async custom-element = "amp-iframe" 
   src = "https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
</script>

請注意，該指令碼具有 async 和 custom-element 屬性以及要載入的 AMP 元件的名稱。AMP 根據 async 和 custom-element 屬性驗證 script 標籤，並且不允許載入任何其他指令碼。它確實接受我們在示例檔案中新增的 type=application/json，如下所示

<type = application/json>
{
   "vars": {
      "uid": "23870",
      "domain": "dummyurl.com",
      "sections": "us",
      "authors": "Hello World"
   }
}
</script>

如果需要，上述指令碼可以與其他 AMP 元件一起使用，例如 amp-analytics。

HTML 標籤

到目前為止，我們已經看到了 AMP 頁面中所需的必填標籤。現在我們將討論允許/不允許的 HTML 元素以及對其施加的限制。

以下是允許/不允許的 HTML 標籤列表：

序號 HTML 標籤及說明
1

img

此標籤被 amp-img 替換。在 AMP 頁面中不允許使用直接的 img 標籤
2

video

被 amp-video 替換
3

audio

被 amp-audio 替換
4

iframe

被 amp-iframe 替換
5

object

不允許
6

embed

不允許
7

form

可以使用 <form>。我們需要新增指令碼才能在 AMP 頁面中使用表單。

示例：

<script async custom-element = "amp-form"
   src = "https://cdn.ampproject.org/v0/amp-form-0.1.js">
</script>
8

輸入元素

Allowed.<input[type = image]>, 
<input[type = button]>,
<input[type = password]>, 
<input[type = file]> 
are not allowed
9

<fieldset>

允許
10

<label>

允許
11

P, div, header, footer, section

允許
12

button

允許
13

a

<a> 標籤在滿足以下條件時允許使用：href 不應以 javascript 開頭。如果存在 target 屬性，則其值必須為 _blank。
14

svg

不允許
15

meta

允許
16

Link

允許。但不允許載入外部樣式表。
17

style

允許。它需要具有 amp-boilerplate 或 amp-custom 屬性。
18

base

不允許
19

noscript

允許

註釋

條件 HTML 註釋不允許。例如：

<!--[if Chrome]>
   This browser is chrome (any version)
<![endif]-->

HTML 事件

在 HTML 頁面中使用的事件（如 onclick、onmouseover）在 AMP 頁面中不允許使用。

我們可以按如下方式使用事件：

on = "eventName:elementId[.methodName[(arg1 = value, arg2 = value)]]"

以下是在輸入元素上使用的事件示例：

<input id = "txtname" placeholder = "Type here" 
   on = "inputthrottled:
   AMP.setState({name: event.value})">

使用的事件是 input-throlled。

類

您不能在頁面中使用以 -amp- 或 i-amp- 開頭的類。此外，您可以根據需要使用類名。

ID

您不能為以 -amp 或 i-amp- 開頭的 HTML 元素設定 ID。此外，您可以根據需要為 HTML 元素使用 ID。

連結

在 AMP 頁面中不允許在 href 中使用 JavaScript。

示例

<a href = "javascript:callfunc();">click me</a>

樣式表

AMP 頁面不允許使用外部樣式表。可以在內部新增頁面所需的樣式：

<style amp-custom>
   //all your styles here
</style>

style 標籤應新增 amp-custom 屬性。

@規則

樣式表中允許使用以下 @規則：

  • @font-face、@keyframes、@media、@page、@supports。@import 不允許使用。對相同內容的支援將在未來新增。

  • 允許在 <style amp-custom> 內使用 @keyframes。如果 @keyframes 太多，最好建立 <style amp-keyframes> 標籤，並在 AMP 文件末尾呼叫此標籤。

  • 類名、ID、標籤名和屬性不應以 -amp- 和 i-amp- 為字首，因為它們在 AMP 程式碼中用於內部用途，如果在執行時也在頁面上定義，則可能導致衝突。

  • !important 屬性在樣式中不允許使用，因為 AMP 需要在必要時控制元素大小。

自定義字型

AMP 頁面允許使用自定義字型的樣式表。

示例

<link rel = "stylesheet"
   href = "https://fonts.googleapis.com/css?family=Tangerine">

可以從以下來源使用在 AMP 頁面中使用的字型：

  • Fonts.com - https://fast.fonts.net

  • Google Fonts - https://fonts.googleapis.com

  • Font Awesome - https://maxcdn.bootstrapcdn.com

  • Typekit - https://use.typekit.net/kitId.css（相應地替換 kitId）

注意 - AMP 頁面允許使用 @font-face 自定義字型。

示例

@font-face {
   font-family: myFirstFont;
   src: url(dummyfont.woff);
}

AMP 執行時

載入 AMP 核心檔案後，將確定 AMP 執行時環境：

<script async src = "https://cdn.ampproject.org/v0.js"></script>

核心檔案負責載入外部資源，確定載入它們的優先順序，並在向 AMP URL 新增 #development=1 時幫助驗證 AMP 文件。

示例

https://:8080/googleamp/amppage.html#development=1

在瀏覽器中執行上述 URL 將列出 AMP 驗證失敗的錯誤，或者如果沒有任何錯誤，則顯示 AMP 驗證成功的訊息。

AMP 元件

AMP 添加了許多 AMP 元件。它們基本上用於以有效的方式處理資源的載入。它還包含用於處理動畫、顯示資料、顯示廣告、社交小工具等的元件。

AMP 中有兩種型別的元件。

  • 內建
  • 外部

注意 - 如果添加了核心 AMP js 檔案，則可以使用 <amp-img>（內建元件）。外部元件（如 <amp-ad>、<amp-facebook>、<amp-video> 等）需要新增與該元件相關的 js 檔案。

常用屬性

幾乎所有可用的 AMP 元件都將提供 width、height、layout、placeholder 和 fallback 等屬性。這些屬性對於任何 AMP 元件都非常重要，因為它決定了元件在 AMP 頁面中的顯示方式。

本教程後面的章節將詳細討論上述所有列出的 AMP 功能。

請注意，本教程中的所有示例都在裝置上進行了測試，並使用了 Google 移動模擬器模式。現在讓我們詳細瞭解一下。

Google 移動模擬器

要使用 Google 移動模擬器，請開啟 Chrome 瀏覽器，右鍵單擊並開啟開發者控制檯，如下所示：

Google Mobile Emulator

我們可以看到 Chrome 的開發者工具，如上所示。點選您想在瀏覽器中測試的連結。注意頁面在桌面模式下顯示。

Developer Tool

要獲取上述頁面以測試裝置，請點選切換裝置工具欄，如下所示：

Toggle device toolbar

您也可以使用快捷鍵 Ctrl+shift+M。這將把桌面模式更改為裝置模式，如下所示：

desktop mode

您可以看到裝置列表，如下所示：

List Of Devices

您可以選擇要測試頁面的裝置。請注意，本教程中的所有頁面都在如上所示的 Google 移動模擬器上進行了測試。Firefox 和最近的 Internet Explorer 瀏覽器也提供相同的功能。

列印頁面
上一頁
下一頁
廣告