Google AMP - 基本語法

本章將討論開始使用 Google AMP 頁面的基本要求。

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>
      
      <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 = "images/christmas1.jpg" 
            width = "300" 
            height = "300" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

必填標籤

AMP 頁面中包含一些必填標籤。本節將詳細討論這些標籤：

我們必須確保像下面這樣在 html 標籤中新增amp 或⚡

<html amp>
   OR 
<html ⚡>

我們應該將<head> 和 <body> 標籤新增到 html 頁面。

如果您遺漏任何必填元標籤，AMP 驗證可能會失敗。此處顯示一些必須新增到頁面 head 部分的必填元標籤：

<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>

您可以使用頁面 URL 末尾的 #development=1 在瀏覽器中驗證上述頁面。

現在，讓我們在瀏覽器中測試一下。我已經將頁面本地託管並將其儲存為 amppage.html。

要測試的上述 URL 是

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

示例

<!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>
      <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 = "images/christmas1.jpg" 
            width = "300" 
            height = "250" 
            layout = "responsive">
         </amp-img>
      </p>
   </body>
</html>

輸出

您可以在開發者控制檯中看到 AMP 驗證狀態，如下所示：

由於我們已為有效的 AMP 頁面新增所有必需的必填標籤，因此它顯示 AMP 驗證成功。

列印頁面