Hướng dẫn tạo một trang AMP Page thân thiện Google

Hướng dẫn tạo một trang AMP Page thân thiện Google

05:37
Cách xây dựng một phiên bản AMP, AMP là gì và tại sao website cần có phiên bản AMP là những câu hỏi dạo này khá sôi nổi trên các diễn đàn wap/webmaster. Vì vậy hôm nay mình viết bài này hướng dẫn mọi người cách xây dựng một phiên bản AMP cho website.


Bạn cần phải biết trước khi xây dựng AMP version !

Nếu bạn chưa biết AMP là gì thì vui lòng đọc lại bài này và cả ảnh hưởng của AMP đối với SEO nếu bạn quan tâm nó ở khía cạnh SEO.

Vậy, website của tôi đã có phiên bản di động (responsive web design - RWD) có cần xây dựng thêm phiên bản AMP không ? (xem thêm hướng dẫn xây dựng phiên bản di động cho website ) - Câu trả lời của mình là tùy quan điểm của bạn.

Mình nói nhanh thế này:

- Responsive Web Design (RWD) là phương thức tổ chức và thiết kế một trang web để nó hoạt động trên bất kỳ một thiết bị nào: từ máy tính bàn đến thiết bị di động. Có thể nói RWD tập trung vào tính linh hoạt trên thiết bị.
- Accelerated Mobile Pages (AMP) là một khuôn khổ web được thiết kế để tập trung vào việc cung cấp nội dung cho người dùng di động ngay lập tức. Một cách nhanh chóng, chúng ta có thể nói AMP tập trung vào tốc độ cung cấp nội dung trên thiết bị di động.

Vậy, site đã có RWD rồi thì có cần AMP không ?

Nếu bạn hỏi mình thì mình sẽ trả lời là không cần vì với tốc độ mạng hiện nay, việc này là không cần thiết ! Tuy nhiên, nếu bạn muốn tăng cường trải nghiệm người dùng, hoặc muốn có thêm một vài yếu tố tốt cho SEO thì ...tùy bạn. Lợi ích của AMP mình đã nói ở các bài bên trên nên mình sẽ không nhắc lại.

Bạn thấy cần làm ? Ok ! Let's go ! Chúng ta sẽ bắt đầu xây dựng phiên bản AMP.

Hướng dẫn xây dựng phiên bản AMP

Trong bài viết này mình sẽ tập trung vào việc hướng dẫn bạn làm một trang đúng chuẩn AMP - tùy theo từng mã nguồn, từng cách tư duy hệ thống mà bạn dựa vào đây xây dựng từng trang riêng lẻ. Bài này chỉ cung cấp cho các bạn kiến thức tổng quát về cách bổ sung và xây dựng AMP.
[​IMG] ​
Warning: bạn nào không phải dân dev hoặc không biết HTML & CSS, không hiểu rõ mã nguồn của mình thì tốt nhất không nên đọc tiếp, tránh tình trạng làm banh ta lông cái web mà không giải quyết được gì cả. Cách tốt nhất là bạn copy link bài này gửi cho bạn kĩ thuật của bạn.
Phần tài liệu dưới đây được cung cấp bởi Google và được cung cấp tại đây nên bạn hoàn toàn có thể đọc từ bản gốc (tiếng Anh).

1. Tạo một trang AMP HTML
Chúng ta tiến hành tạo một trang như sau:
HTML:
<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="http://example.ampproject.org/article-metadata.html" />
    <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>Welcome to the mobile web</h1>
  </body>
</html>
Đoạn mã trên là một đoạn mã HTML tạo một webpage đơn thuần nên có một số thay đổi nhỏ được khai báo cho AMP. Chúng ta sẽ tiến hành khảo sát những thay đổi:
  • Chúng ta bắt đầu một document với <!doctype html>
  • Thẻ html trên cùng (top level) chúng ta sử dụng <html ⚡> hoặc tag <html amp> đều được - đây là bước đầu tiên khai báo phiên bản AMP và được chấp nhận ở hầu hết các trình duyệt.
  • Thẻ <head> và thẻ <body> không có gì đặc biệt.
  • Đoạn mã <script async src="https://cdn.ampproject.org/v0.js"></script> trong thẻ head giúp tải thư viện AMP từ Google. Đoạn mã này là cần thiết để có thể triển khai AMP (không có thư viện khỏi làm việc nghen).
  • Thẻ <link rel="canonical" href="SOME_URL" /> thì chắc ai cũng biết: khai báo Canonical để chỉ định bản gốc của văn bản. Nếu bạn không có, bạn có thể khai báo URL là chính tài liệu hiện tại.
  • Thẻ <meta name="viewport" content="width=device-width,minimum-scale=1"> chắc bạn nào đọc bài hướng dẫn làm RWD đã gặp. Chúng được dùng để khai báo initial-scale=1.
  • Đoạn mã còn lại:
    HTML:
    <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>
    hơi dài dòng và dùng để khai báo một số hiệu ứng cho AMP.
Đơn giản vậy thôi, bạn đã tạo ra một trang AMP đầu tiên (chưa bao gồm nội dung gì cụ thể).
Đây có thể xem là khai báo cần thiết và quan trọng trước khi chúng ta tiến hành tinh chỉnh những nội dung cần thiết trên website.

2. Xử lý hình ảnh

Trên phiên bản web, chúng ta sử dụng thẻ <img> để hiển thị một hình ảnh trên web, còn trong phiên bản AMP, chúng ta sử dụng thẻ
<amp-img> </amp-img> thay cho thẻ <img>. Cách sử dụng như sau:
HTML:
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>
Tại sao Google lại thay thẻ img thành amp-img ? Nguyên nhân là:
  • Google cần hiểu cách bố trí trang trước khi tải các tài nguyên. Điều này rất quan trọng để tìm và nạp khung nhìn đầu tiên.
  • Google cần điều khiển được các network request để tải không đồng bộ và điều khiển các nguồn tài nguyên tải xuống một cách hiệu quả.
3. Tùy chỉnh bố cục và trình bày

3.1 Tùy chỉnh trình bày
Bạn có thể tùy chỉnh bố cục và cách trình bày trên phiên bản AMP một cách dễ dàng tương tự như cách bạn sử dụng CSS. Một đặc điểm khác chút xíu là chúng ta thay thẻ <style> bằng thẻ <style amp-custom>. Ví dụ:
HTML:
<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>
3.2 Tùy chỉnh bố cục
Tôi tách riêng phần này ra vì muốn nhấn mạnh với bạn: AMP quy định chặt chẽ các yếu tố bố cục trên trang. Đối với một trang HTML bình thường, bạn hầu như có thể sử dụng CSS để định bố cục trang dễ dàng. Nhưng vì lý do tối ưu tốc độ trang, AMP đòi hỏi bạn phải xác định kích thước và bố cục ngay từ đầu khi tải xuống - nghĩa là đừng mơ mà chỉnh bố cục bằng CSS :D

4. Xem và kiểm tra lại
Google có một trang để bạn kiểm tra xem phiên bản AMP mà bạn mới xây dựng đã chuẩn chưa. Bạn có thể sử dụng link sau:

Mã:
https://search.google.com/search-console/amp
Nếu xảy ra lỗi, hãy tiến hành khắc phục.

5. Phân phối trang AMP
Sau khi tất cả các lỗi được khắc phục, bạn cần giúp Google hiểu được trang nào là phiên bản AMP tương ứng với phiên bản web trên máy tính bằng cách chỉ định chúng với nhau.

Ở trang phiên bản máy tính, bạn thêm vào:
HTML:
<link rel="amphtml" href="http://duong_dan_den_amp_document.html">
Ngược lại, ở trang AMP vừa xây dựng, bạn cũng cần canonical để báo với Google nó là phiên bản AMP của phiên bản gốc (trên máy tính):
HTML:
<link rel="canonical" href="http://duong_dan_den_phien_ban_goc/document.html">
Nếu bạn không có phiên bản trên máy tính, bạn có thể trỏ canonical về chính phiên bản AMP - cái này đã nói ngay từ đầu rồi :D

6. Have fun

Xây dựng phiên bản AMP cho website không phải là việc làm quá phức tạp và khó khăn. Chỉ cần bạn có kiến thức về HTML & CSS cộng với một chút kiến thức về mã nguồn của mình là làm được ngay. Tuy nhiên đối với các website có nhiều page nội dung thì việc này cũng khá lằng nhằng do số lượng page lớn, bạn cần hiểu rõ cấu trúc để dẫn dắt nội dung.

Với các bạn đang sử dụng mã nguồn Wordpress, bạn có thể sử dụng plugin để xây dựng phiên bản AMP nhanh chóng mà không phải tốn nhiều công sức.

Cách nào cũng được, miễn sao có phiên bản AMP là được.

Chúc các bạn nghịch code vui vẻ :D
Next
« Prev Post
Previous
Next Post »
Đăng ký: Đăng Nhận xét (Atom)