HTML AMP, Tổng quan
AMP là viết tắt của Accelerated Mobile Pages và là một sáng kiến open-souce do Google đưa ra nhằm tạo ra một cách thống nhất giúp các trang web tải nhanh hơn trên thiết bị di động theo một mức độ. AMP phải chứng tỏ là một cách tốt để cải thiện web trên thiết bị di động, đặc biệt là đối với những trang có kết nối chậm.
AMP hạn chế một số phần nhất định của HTML, CSS và JavaScript đảm bảo trải nghiệm nhanh. Để bù đắp cho những hạn chế bổ sung, nó cũng đi kèm với các thành phần để cho phép bạn thực hiện những việc như nhúng video, tích hợp băng chuyền và nhiều thứ gọn gàng khác. AMP sẽ được các cửa hàng như Twitter, Pinterest và Google sử dụng để liên kết đến version siêu nhanh của trang trên thiết bị di động. Hãy thử bản trình diễn các trang AMP trong Google tại đây .
Bắt đầu
Bắt đầu các trang HTML AMP của bạn như sau:
<!doctype html>
<html ⚡>
<head>
<meta charset="utf-8">
<link rel="canonical"
href="https://path/to/regular/page">
<meta name="viewport"
content="width=device-width,
minimum-scale=1,initial-scale=1">
<style amp-boilerplate></style>
Một số điều cần ghi nhớ:
- Lưu ý việc sử dụng ⚡ với thẻ html mở để cho biết rằng đây là trang HTML AMP.
- Cũng lưu ý việc sử dụng thẻ chuẩn để cho biết vị trí của trang thông thường không phải AMP.
- Đừng quên bộ mã meta ngay sau thẻ mở đầu.
- Tải thời gian chạy AMP JS ngay trước thẻ đóng. Lưu ý việc sử dụng async, điều này rất quan trọng ở đây. Tất cả các tập lệnh cần tải không đồng bộ để trang xác thực dưới dạng HTML AMP.
- Cho ngắn gọn, kiểu bảng soạn sẵn không có trong đoạn mã trên, nhưng đây là mã đầy đủ cho nó:
<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>
Với bảng soạn CSS nội tuyến này, nội dung sẽ bị ẩn lúc đầu, sau đó được hiển thị khi nội dung được tải. Bằng cách này, bạn sẽ ngăn chặn sự xuất hiện của nội dung chưa được định kiểu (FOUC) xảy ra khi tải phông chữ không đồng bộ.
Nội dung & Thành phần
Sau phần đầu, các trang HTML AMP của bạn chủ yếu sẽ chỉ là html cũ đơn thuần, với một vài ngoại lệ chính. Ví dụ: thẻ img không được hỗ trợ và amp-img nên được sử dụng thay thế:
<amp-img src="../alligator.svg"
width="400"
height="150"
layout="responsive"
alt="Dead Gator">
</amp-img>
Đối với amp-img, bạn xác định cả chiều rộng và chiều cao. Các trình duyệt sẽ đủ thông minh để giảm kích thước tương ứng nếu cần.
Dưới đây là danh sách một số thành phần khác có sẵn với HTML AMP: amp-accordion, amp-instagram, amp-sidebar, amp-youtube, amp-audio…
Đối với hầu hết các thành phần bổ sung này, bạn cần tải thêm một file JavaScript trong phần đầu. Ví dụ: đối với thành phần amp-instagram:
<script async
custom-element="amp-instagram"
src="https://cdn.ampproject.org/v0/amp-instagram-0.1.js">
Kiểm tra, gỡ lỗi và xuất bản
Để các trang HTML AMP của bạn được phân phát, trước tiên chúng cần phải hợp lệ. Chỉ cần thêm # development = 1 vào cuối trang AMP và console JavaScript sẽ ở chế độ gỡ lỗi và cho bạn biết nếu có gì sai.
Bước tiếp theo là đảm bảo bạn bao gồm thẻ rel trên trang root trỏ đến version AMP như sau:
<link rel=”amphtml”
href=”https://alligator.io/some-post.amp.html" />
Tìm hiểu thêm + Tài nguyên
Dưới đây là một số tài nguyên tốt để tìm hiểu thêm về HTML AMP và tham gia:
Các tin liên quan
Cách bảo vệ trang web WordPress của bạn khỏi Genericons Example.html Lỗ hổng XSS2015-05-07
