Google AMP - Cú pháp cơ bản

Trong chương này, chúng ta sẽ thảo luận về các yêu cầu cơ bản để bắt đầu với các trang AMP của Google.

Trang Amp mẫu

Dưới đây là một ví dụ cơ bản cho một trang 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>

Thẻ bắt buộc

Có một số thẻ bắt buộc phải có trong trang amp. Phần này thảo luận chi tiết về chúng -

Chúng tôi phải đảm bảo rằng chúng tôi thêm amp hoặc ⚡ vào thẻ html như hình dưới đây

<html amp>
   OR 
<html ⚡>

Chúng ta nên thêm thẻ <head> và <body> vào trang html.

Xác thực Amp có thể không thành công nếu bạn bỏ lỡ bất kỳ thẻ meta bắt buộc nào. Một số thẻ mets bắt buộc được thêm vào phần đầu của trang được hiển thị ở đây -

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

Liên kết của rel = "canonical" sẽ được thêm vào bên trong thẻ head

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

Thẻ kiểu với amp-boilerplate -

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

Thẻ Noscript với amp-boilerplate -

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

Thẻ tập lệnh amp với không đồng bộ được thêm vào nó như được hiển thị bên dưới. Đây là thẻ quan trọng nhất -

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

Bạn nên sử dụng thẻ này trong trường hợp bạn muốn thêm css tùy chỉnh vào trang. Xin lưu ý ở đây chúng tôi không thể gọi bảng định kiểu bên ngoài trong các trang amp. Để thêm css tùy chỉnh, tất cả css của bạn phải truy cập vào đây -

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

Bạn có thể xác thực trang trên trong trình duyệt của mình bằng cách sử dụng # developmentement = 1 ở cuối url trang.

Bây giờ, chúng ta hãy thử nghiệm tương tự trong trình duyệt. Tôi đã lưu trữ trang cục bộ và lưu nó dưới dạng amppage.html.

Url cho ở trên để được kiểm tra là

http://localhost/googleamp/amppage.html#development=1

Thí dụ

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

Đầu ra

Bạn có thể thấy trạng thái xác thực amp trong bảng điều khiển dành cho nhà phát triển như sau:

Nó giúp chúng tôi xác thực AMP thành công vì chúng tôi đã thêm tất cả các thẻ bắt buộc cần thiết cho một trang amp hợp lệ.