Hướng Dẫn Tạo AMP HTML

Nếu bạn đang dùng wordpress và muốn tạo phiên bản AMP tăng tốc cho thiết bị di dộng các bạn có thể tham khảo ở bài hướng dẫn sau : Cài Đặt Google AMP Cho WordPress .

Còn ở phần này mình sẽ hướng dẫn các bạn cách tạo 1 trang AMP đơn giản bằng tay. Thích hợp cho bạn nào muốn tự tay làm 1 phiên bản AMP cho riêng mình. Khi làm các bạn lưu ý tuân thủ các nguyên tắc của google kiểm duyệt trang AMP nhé. Mình có viết hướng dẫn vấn đề này ở đây: Nguyên Tắc Của Google Cho Trang Tăng Tốc AMP

Về mặt cơ bản để tạo 1 trang AMP các bạn sử dụng HMTL để tạo. Và HTML được cấu trúc gần giống như 1 trang web thường ( Phiên bản NON-AMP) . Một số yêu cầu cần có như sau.

Cũng bắt đầu bằng doctype <!doctype html>

Khai báo sử dụng AMP bằng tag <html ⚡> hoặc <html amp> ở trên cùng khi open thẻ html của bạn

Tiếp tục khai báo như bình thường bằng việc mở đóng thẻ <head> và <body>

Trong thẻ <head> các bạn khai báo một số tag và thư viện AMP như sau

<meta charset=”utf-8″> // khai báo mã code

<script async src=”https://cdn.ampproject.org/v0.js”></script> // khai báo thư viện cần dùng

<link rel=”canonical” href=”$SOME_URL” /> // khai báo link chính của phiên bản AMP ( link này thường hướng về phiên bản NON-AMP

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

Bên ngoài thẻ <head> khai báo thêm tag viewport như sau để phù hợp với thiết bị di động, giúp người dùng không thể phóng to giống như phiên bản không responsive.

<meta name="viewport" content="width=device-width,minimum-scale=1">

Khi các bạn dùng html để viết trang AMP. Hầu hết các thẻ có thể dùng cho HTML phiên bản NON-AMP đều có thể dùng cho AMP. Ngoại trừ thẻ img. Bạn dùng thẻ img dành riêng cho AMP như sau :

<amp-img src="hatuankhang.jpg" alt="Welcome" height="400" width="800"></amp-img>


Việc này không phức tạp tí nào đúng không. Các bạn chỉ việc thay thẻ <img> như thường dùng bằng thẻ <amp-img> mà thôi. Nếu bạn quan tâm đến responsive cho phiên bản AMP. Thì các bạn có thể dùng thuộc tính srcset để tạo ảnh hiện thị thích hợp với các thiết bị. Điều này khá là quan trọng bởi mình thấy đa số các phiên bản AMP hiện nay không responsive được đẹp cho lắm. Các bạn có thể custom chúng lại. Dưới đây là ví dụ: 

<amp-img
    src="/img/narrow.jpg"
    srcset="/img/wide.jpg 640w,
           /img/narrow.jpg 320w"
    width="1698"
    height="2911"
    layout="responsive"
    alt="an image">
</amp-img>

Đối với việc bố cục giao diện trang web, các bạn vẫn sử dụng CSS với những thuộc tính CSS như bình thường, nhưng các bạn khai báo riêng ra. Giúp cho thiết bị nhận riêng được style của phiên bản AMP. Để làm việc này các bạn tạo css bằng thẻ <style amp-custom> như ví dụ dưới đây

<style amp-custom>

       /* các bạn có thể custom giao diện như sau */

      body { background-color: white; } 

      amp-img { background-color: gray; border: 1px solid black;} 

</style>

Cũng giống như phiên bảng thường, các bạn gần như có tất cả các thuộc tính css hay dùng để custom. Chỉ có một điều là các bạn buộc phải nhúng css cho AMP trên trang AMP của bạn , chứ không thể gọi từ ngoài giống như css bình thường. Ngoài ra các bạn cũng phải chú ý thêm. Không được liệt kê css cho AMP inline giống như css cho trang thông thường mà các bạn vẫn hay làm.