AMP là gì và Cách bắt đầu với Google AMP bạn cần biết

AMP hoạt động như thế nào?

Khung AMP bao gồm ba thành phần cơ bản:

1. HTMLAMP
2. AMPJavaScript
3. Bộ nhớ đệm AMP

HTMLAMP

AMP HTML là HTML có một số hạn chế nhất định để đảm bảo các trang tải nhanh. Nó loại bỏ hoặc sửa đổi một số thành phần và thuộc tính có thể làm chậm trang web. Một tệp HTML đơn giản có thể trông như thế này: Về cơ bản, tài liệu HTML AMP phải:

• Bắt đầu bằng   (để gửi thông tin đến trình duyệt về loại tài liệu mong đợi)
•  Bao gồm thẻ  cấp cao nhất 
   (để chỉ ra đó là trang HTML AMP)
• Bao gồm 
   và 
   gắn thẻ (để xác định nội dung của tài liệu, tức là tiêu đề, đoạn văn, hình ảnh, siêu liên kết, bảng, v.v.)
• Bao gồm 
   (để chỉ ra phiên bản HTML thông thường của trang hoặc liên kết đến chính nó nếu không có trang thông thường nào tồn tại)
• Bao gồm một 
   thẻ (để chỉ định mã hóa ký tự)
• Bao gồm một 
   thẻ (để cung cấp cho trình duyệt hướng dẫn về cách kiểm soát kích thước của trang)
• Bao gồm một  thẻ (để thêm phần mở rộng vào thư viện cơ sở)
• Bao gồm mã mẫu AMP  ( head > style[amp-boilerplate]và noscript > style[amp-boilerplate]) trong thẻ head

Để biết thêm chi tiết về các thẻ, thuộc tính và mẫu đặc biệt, hãy xem tài liệu HTML AMP chính thức của AMP .

AMPJavaScript

JavaScript khá phức tạp vì quá nhiều JS có thể khiến trang web chậm và không phản hồi. Tuy nhiên, thư viện JavaScript của AMP chứa các khung và thành phần cho phép bạn xây dựng trang nhanh chóng mà không cần viết JS hoặc nhập thư viện của bên thứ ba. Tất cả đều rất quan trọng đối với trải nghiệm của người đọc.

Bộ nhớ đệm AMP

AMP Cache là mạng phân phối nội dung (CDN) dựa trên proxy, có chức năng tải trước và hiển thị trước các trang AMP trước khi người dùng yêu cầu. Và nó sẽ thay đổi hoàn toàn tốc độ trang web. Tại sao? Bởi vì nó cho phép trang web của bạn tải nhiều phần từ nhiều máy chủ khác nhau cùng một lúc. Và nó cũng cho phép khách truy cập tải trang web của bạn từ máy chủ gần họ nhất. Nghĩa là trang web của bạn tải cực nhanh đối với nhiều người hơn. Và hiện tại có hai nhà cung cấp AMP Cache chính:

• Bộ nhớ đệm AMP của Google
• Bộ nhớ đệm Bing AMP

Các nền tảng này sẽ lưu trữ đệm các trang của bạn khi bạn sử dụng định dạng AMP. Ví dụ: nhà cung cấp bộ nhớ đệm có thể khám phá trang AMP của bạn thông qua thẻ  hoặc  và lưu trữ nội dung của trang đó vào bộ nhớ đệm. Hoặc nhà xuất bản có thể tự tay thêm trang vào Bộ đệm AMP (chỉ áp dụng cho Bộ đệm AMP của Google ). Các nền tảng khác có thể truy cập các trang AMP được lưu trong bộ nhớ đệm thông qua URL của chúng. Ví dụ, nếu bạn đặt /amp vào cuối bất kỳ tin tức nào trên The Guardian, bạn sẽ thấy phiên bản AMP. Bắt đầu bằng cách thêm tên miền của bạn và nhấp vào “ Bắt đầu kiểm tra ”. Sau đó, hãy chuyển đến tab “ Thống kê ” trong bảng điều khiển và bạn sẽ thấy một hàng có nội dung “Liên kết AMP”. Giống như thế này:

Ưu điểm và hạn chế của trang AMP là gì?

Mặc dù AMP có thể cải thiện hiệu suất trang và trải nghiệm người dùng nhưng nó cũng có một số nhược điểm nhất định. Hãy cùng xem xét ưu và nhược điểm của các trang AMP:

Ưu điểm của AMP

• Tải trang gần như ngay lập tức
• Các trang dễ xây dựng
• Cải thiện trải nghiệm người dùng trên thiết bị di động
• Cho phép thiết kế tùy chỉnh
• Nhiều nền tảng, bao gồm Google và Bing hỗ trợ nó

Giới hạn của AMP

• Google không còn hiển thị biểu tượng huy hiệu AMP để chỉ ra nội dung AMP
• Các yếu tố thiết kế rất hạn chế
• Các trang AMP chỉ cho phép một thẻ quảng cáo trên mỗi trang

Cách thiết lập AMP trên trang web của bạn

Bạn có thể tạo các trang AMP bằng cách làm theo mã HTML hoặc sử dụng CMS (thông qua plugin hoặc chức năng tùy chỉnh).

Tạo trang HTML AMP của bạn

Mã cơ bản

Để bắt đầu, đây là đánh dấu của một trang AMP cơ bản: