vi
new
+1
Avatar
Bút Chì @nguyen.thanh.tuanb
226 10 11
Đã đăng vào thg 7 19, 2017 4:02 SA 7 phút đọc
1.3K

Tìm Hiểu về Accelerated Mobile Pages một sản phẩm của Google

Cũng giống như Facebook, Google và các công ty công nghệ lớn luôn tạo ra được những thay đổi nhằm nâng cao trải nghiệm người dùng trên các sản phẩm của họ. Vào ngày 24/2/2016 Google đã chính thức công bố thuật ngữ Google AMP nhắm đến việc tối ưu kết quả tìm kiếm trên thiết bị di động. Vậy sản phẩm AMP của Google là gì? APM viết tắt của Accelerated Pages Mobile, nó là 1 dự án mới của google nhằm tăng khả năng đáp ứng và hiển thị của trang web khi chạy trên các thiết bị di động (Accelerated Mobile Pages Project). Khi cấu trúc website của bạn thỏa điều kiện của AMP project, nó sẽ được tối ưu, từ đó tăng tốc độ load trang trên các thiết bị di động, làm cho các trang web tải nhanh và có giao diện đẹp trên thiết bị di động, thậm chí khi mạng chậm.

Google cũng tuyên bố rằng nếu trang web của bạn tuân thủ AMP thì sẽ có lợi cho các trang này trong kết quả tìm kiếm của Google.

Lợi ích của APM

Nhiều bạn thắc mắc rằng: “Website của tôi đã tích hợp responsive, nó đã hiển thị tốt trên các thiết bị di động rồi, vậy tích hợp AMP nữa thì có lợi gì nữa hay không?”. Xin trả lời rằng: thực chất, responsive chỉ là khả năng tùy biến giao diện theo các kích thước màn hình, nó hoàn toàn không ảnh hưởng đến tốc độ load trang web. Vậy Lợi ích của AMP, hay nói đúng hơn là lợi ích khi website của bạn load nhanh hơn khi truy cập bằng di động

Tác dụng của AMP đối với SEO

Tuy không có công bố chính thức, nhưng rõ ràng việc tốc độ load trang nhanh cũng giúp ích cho các spider bot của google index trang web của bạn nhanh hơn, và cũng không có gì lạ khi nó ưu tiên đánh giá cao trang web của bạn hơn. Hơn nữa, không có lý do gì AMP project lại được google đưa vào custom search (google web master tool) mà lại không ảnh hưởng đến điểm chất lượng của website cả.

Nguyên lý cơ bản

Các trang AMP được xây dựng dựa trên 3 thành phần chính: 1. AMP HTML AMP HTML là HTML mở rộng với các thuộc tính AMP tùy chỉnh. Mặc dù hầu hết các thẻ trong trang AMP HTML đều là các thẻ HTML thông thường, một số thẻ HTML được thay thế bằng các thẻ AMP cụ thể. Những yếu tố tùy chỉnh này được gọi là các thành phần HTML của AMP. Ví dụ, thẻ amp-img cung cấp đầy đủ srcset ngay cả trong các trình duyệt không hỗ trợ nó. Các trang AMP được phát hiện bởi các công cụ tìm kiếm và các nền tảng khác thông qua thẻ HTML <link rel = “”>. 2. AMP JavaScript Thư viện AMP JS đảm bảo việc hiển thị nhanh các trang AMP HTML. Thư viện AMP JS đảm bảo việc hiển thị nhanh các trang AMP HTML, quản lý tài nguyên tải và cung cấp cho bạn các thẻ tùy chỉnh được đề cập ở trên, tất cả vì mục đích hiển thị nhanh trang của bạn. 3. AMP Cache Bộ nhớ Google AMP cache có thể sử dụng để phục vụ các trang HTML lưu trữ trong bộ nhớ cache. Bộ nhớ cache của Google là mạng phân phối nội dung dựa trên proxy để phân phối tất cả các tài liệu AMP hợp lệ. Nó tìm nạp trang AMP HTML, cải thiện hiệu suất trang một cách tự động. Khi sử dụng bộ nhớ cache của Google AMP, tài liệu, tất cả các tệp JS và tất cả các hình ảnh tải từ cùng một nguồn sử dụng HTTP 2.0 để có hiệu quả tối đa.

Cách Tạo Một AMP HTML

Mẫu code

<!doctype html>
<html ⚡>
  <head>
    <meta charset="utf-8">
    <title>Sample document</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/ld+json">
    {
      "@context": "http://schema.org",
      "@type": "NewsArticle",
      "headline": "Article headline",
      "image": [
        "thumbnail1.jpg"
      ],
      "datePublished": "2015-02-05T08:00:00+08:00"
    }
    </script>
    <script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></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>Sample document</h1>
    <p>
      Some text
      <amp-img src=sample.jpg width=300 height=300></amp-img>
    </p>
    <amp-ad width=300 height=250
        type="a9"
        data-aax_size="300x250"
        data-aax_pubname="test123"
        data-aax_src="302">
    </amp-ad>
  </body>
</html>

Điều kiện phải có – Bắt đầu với <!doctype html> : chuẩn HTML5 – Chứa thẻ <html ⚡> hoặc <html amp> : xác định nội dung trang là AMP. – Chứa thẻ <head> và <body> – Chứa thẻ <meta charset="utf-8"> là phần tử con đầu tiên trong thẻ <head> – Chứa thẻ <script async src="https://cdn.ampproject.org/v0.js"></script> là phần tử con thứ hai trong thẻ <head> : tải thư viện AMP JS. – Chứa thẻ <link rel="canonical" href="$SOME_URL" /> bên trong <head>. – Chứa thẻ <meta name="viewport" content="width=device-width,minimum-scale=1"> bên trong thẻ <head> để tương thích với các thiết bị di động. Khuyến cáo thêm initial-scale=1. – Chứa đoạn mã AMP đặc biệt trong thẻ <head>

HTML Tags

  • script: Bị cấm trừ khi là application/ld+json
  • img : Đổi thành amp-img
  • video : Đổi thành amp-video
  • audio : Đổi thành amp-audio
  • iframe : Đổi thành amp-iframe
  • style bắt buộc sử dụng thuộc tính amp-custom
  • Cấm một số tags : frame, frameset object paramapplet embed

Classes Tên Class AMP mà bên trong Class có tiền tố -amp- và i-amp- không được phép trong AMP HTML. Cách đặt đúng trong AMP sẽ là amp-{Tên Class} . Việc sử dụng các lớp này được cho phép và có ý nghĩa để cho phép tùy biến một số tính năng của thời gian chạy và tiện ích AMP. ID Tương tự như Class Liên kết các trang với thẻ <link> Để xác định rằng một trang không phải là AMP và một trang AMP là một cặp, chúng ta thêm thông tin về trang AMP vào trang không phải AMP và ngược lại bằng cách chèn thẻ <link> vào trong <head> Thêm phần sau vào trang không phải AMP:

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

Và phần sau vào trang AMP

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

Điều gì xảy ra nếu chúng ta chỉ có một trang? Nếu bạn chỉ có một trang, và đây là một trang AMP, bạn phải thêm link với thuộc tính rel=”canonical”

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

Css

<style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

  body {
    font-family: "Bitstream Vera Serif Bold", serif;
  }
</style>

Image

<amp-img alt="AMP"
  src="images/amp.jpg"
  width="320"
  height="256"
  heights="(min-width:500px) 200px, 80%">
</amp-img>

Kết Luận

Trên đây là một số chia sẻ về AMP chắc cũng giúp các bạn phần nào hiểu được kiến trúc cơ bản và những lợi ích của AMP cho việc load page trên điện thoại di dộng. Xin cảm ơn các bạn đã ghé thăm !


All rights reserved

Mục lục


Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí