AMP là gì và làm sao để tích hợp AMP cho website?

Tháng Ba 21, 2022

XDIGI

AMP (Accelerated Mobile Pages) là một dự án do Google đưa ra nhằm giúp việc truy cập website từ thiết bị di động thông qua trang tìm kiếm được nhanh nhất. Thông thường một trang AMP sẽ được loại bỏ rất nhiều thứ trên website, thậm chí là các liên kết không nằm trong nội dung nhằm cung cấp chính xác những gì người dùng cần với một tốc độ nhanh nhất có thể. Dưới đây mình sẽ đi qua các bước để tạo một trang AMP để bạn có thể hiểu hơn.

Một trang AMP của TUANDC.COM

Tạo một trang AMP HTML

Đoạn HTML mẫu về một trang AMP như sau:

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Đây là một trang AMP</title>
    <link rel="canonical" href="http://example.ampproject.org" />
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "http://schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </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>
  </head>
  <body>
    <h1>Xin chảo bạn đến với TUANDC.COM</h1>
  </body>
</html>

Các thành phần quen thuộc mình sẽ không giải thích nữa, mình sẽ giải thích những thứ thuộc về AMP như sau:

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

Đoạn trên dùng để load thư viện JS của ampproject.

Đoạn script tiếp đó là dữ liệu json khai báo cấu trúc Schema. Nó được google chấp nhận trong trang AMP.

Những đoạn style thì được để trong cặp thẻ style amp-boilerplate, những trình duyệt không hỗ trợ javascript thì thực hiện đoạn nằm trong thẻ <noscript>.

Cơ bản thì một trang AMP chỉ có vậy thôi. Sau đây mình sẽ giới thiệu qua các phần khác của AMP.

Định dạng hình ảnh trong trang AMP

Bạn không thể sử dụng thẻ <img src=”….”/> trên trang AMP được, mặc dù nó vẫn có thể hiển thị nhưng google sẽ không xem trang của bạn là một trang AMP và dĩ nhiên tốc độ sẽ không được cải thiện.

Trong AMP thẻ <img> được thay bằng thẻ <Amp-img> và yêu cầu phải có kích thước đầy đủ. Ví dụ:

<amp-img src = "hinhanh.jpg" width = "250" height = "96" >

Như trên mình có import vào một thư viện JS của AMP thì thẻ Amp-img này mới thực thi và được hiển thị, nếu như người người dùng mà tắt đi javascript thì nó sẽ không hiển thị. Thay vào đó bạn có thể đưa thêm thẻ <img> vào nhưng phải để trong cặp thẻ <noscript> đoạn mẫu cụ thể như sau:

<amp-img src = "hinhanh.jpg" width = "250" height = "96">
  <noscript>
      < img src = "hinhanh.jpg" width = "250" height = "96" />
  </ noscript >
 </amp-img >

Định dạng video trong trang AMP

Tương tự như hình ảnh, video cũng có một thẻ đặc biệt riêng. Tuy nhiên trong những trị duyệt không hỗ trợ HTML thì đáng tiết là video trong AMP sẽ không hỗ trợ. Một đoạn code mẫu về HTML như sau.

<amp-video width="400" height="300" src="https://tuandc.com/videos/myvideo.mp4" poster="hinhdaidien.jpg">
   <div fallback>
        <p>Trình duyệt không hỗ trợ HTML5 video</p>
   </div>
</amp-video>

Định dạng âm thanh trong trang AMP

Mặc dù rất ít được sử dụng một cách thẳng đường dẫn, nhưng nếu muốn trang của mình là một trang AMP bạn buột phải đưa cả đường dẫn âm thanh lên như thế này:

<Amp-audio width = "400" height = "300" src = "https://yourhost.com/audios/myaudio.mp3"> 
   <div fallback> 
       <p> Trình duyệt của bạn không hỗ trợ HTML5 audio </p> 
   </div> 
   <source type = "audio / mpeg" src = "foo.mp3"> 
   <source type = "audio / ogg" src = "foo.ogg">
</Amp-audio>

Sử dụng CSS trong trang AMP

Không phải thuộc dạng nặng như hình ảnh, video, âm thanh nhưng css vẫn là thành phần bắt buột sử dụng các thẻ theo yêu cầu của AMP nếu không trang bạn sẽ vi phạm AMP. Cấu trúc đơn giản của nó như sau.

<style amp-custom>
   body {
      background-color: white;
   }
   amp-img {
      background-color: gray;
      border: 1px solid black;
   }
</style>

Bạn có thể sử dụng thuộc tính media để phần thử như hình ảnh, hay video được hiển thị theo kích thước màng hình, ví dụ về 2 tấm hình như sau:

<amp-img
   media="(min-width: 650px)"
   src="hinhnho.jpg"
   width=466
   height=355
   layout="responsive">
</amp-img>

<amp-img
   media="(max-width: 649px)"
   src="hinhlon.jpg"
   width=527
   height=193
   layout="responsive">
</amp-img>

Tùy vào kích thước màng hình đáp ứng thuộc tính media thì cái đó sẽ được hiển thị.

Liên kết giữa các trang AMP và không AMP

Đây là một yếu tố rất quan trọng trong SEO, Google sẽ nhầm lẫn rằng bạn có 2 trang có cùng nội dung, và nó sẽ không biết trang nào AMP của trang này, và rất khó để nó tìm chính xác. Chính vì thế nên bạn cần liên kết 2 phiên bản này với nhau bằng cách sau:

Ở trang không phải là AMP, bạn phải có một liên kết về trang AMP ở thẻ <head> như sau:

<link rel = "amphtml" href = "https://www.example.com/url/to/amp/document.html">

Ở trang AMP bạn cũng phải có một link liên kết về trang không AMP ở thẻ <head> như sau:

<link rel = "canonical" href = "https://www.example.com/url/to/full/document.html">

May mắn thay là nếu bạn dùng WordPress và cài Plugin AMP thì bạn không cần phải lo lắng điều này.

Các phần trên là những phần cơ bản nhất mình chia sẻ với bạn về AMP, thật ra cách chia sẻ này chỉ dành cho các website sử dụng code thuần, còn nếu sử dụng WordPress thì bạn nên sử dụng Plugin thì tốt hơn.

Chúc bạn thành công.