AMP là gì?
AMP (trước đây được gọi là Accelerated Mobile Pages) là framework HTML mã nguồn mở giúp tạo các trang web tối ưu cho thiết bị di động và tải nhanh.
Vì vậy, về cơ bản, trang AMP là phiên bản tinh giản của một trang web thông thường.
Và trang này có thể trông như sau:
Google khởi xướng dự án mã nguồn mở này để cạnh tranh với Facebook Instant Articles và Apple News.
Cả hai đều cho phép nhà xuất bản tạo nội dung tải nhanh và dễ tiếp nhận.
Google lần đầu hiển thị trang AMP trong kết quả tìm kiếm trên thiết bị di động vào năm 2016. Khi đó, chúng chỉ xuất hiện trong mục “Top Stories” ở đầu SERP.
Ví dụ:
Ban đầu, AMP được thiết kế dành cho các nhà xuất bản tin tức, nhưng sau đó đã mở rộng để áp dụng cho mọi loại trang web.
AMP hoạt động như thế nào?
Framework AMP gồm ba thành phần cơ bản:
- AMP HTML
- AMP JavaScript
- AMP Cache
AMP HTML
AMP HTML là HTML có một số hạn chế nhất định nhằm đảm bảo trang tải nhanh. Thành phần này loại bỏ hoặc điều chỉnh một số phần tử 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ư sau:
Về cơ bản, tài liệu AMP HTML phải:
- Bắt đầu bằng
<!doctype html>(để gửi thông tin cho trình duyệt về loại tài liệu cần hiển thị) - Bao gồm thẻ cấp cao nhất
<html ⚡>hoặc<html amp>(để cho biết đây là trang AMP HTML) - Bao gồm
<head>và<body>(để xác định nội dung tài liệu, chẳng hạn như heading, đoạn văn, hình ảnh, hyperlink, bảng, v.v.) - Bao gồm
<link rel="canonical" href="URL">(để chỉ phiên bản HTML thông thường của trang hoặc liên kết đến chính trang đó nếu không có phiên bản thông thường) - Bao gồm
<meta charset="utf-8">(để chỉ định mã hóa ký tự) - Bao gồm
<meta name="viewport" content="width=device-width">(để hướng dẫn trình duyệt cách kiểm soát kích thước trang) - Bao gồm
<script async src="https://cdn.ampproject.org/v0.js"><script>(để thêm các tiện ích mở rộng vào thư viện nền tảng) - Bao gồm AMP boilerplate code (
head > style[amp-boilerplate]vànoscript > style[amp-boilerplate]) bên trong thẻ head
Để biết thêm thông tin về các thẻ, thuộc tính và mẫu đặc biệt, hãy xem tài liệu AMP HTML chính thức của AMP.
AMP JavaScript
JavaScript khá phức tạp vì quá nhiều JS có thể khiến webpage tải chậm và không phản hồi.
Tuy nhiên, thư viện JavaScript của AMP bao gồm các framework và component cho phép bạn nhanh chóng xây dựng trang mà không cần viết JS hay nhập thư viện của bên thứ ba.
Tất cả những yếu tố này đều rất quan trọng đối với trải nghiệm của người đọc.
AMP Cache
AMP Cache là một mạng phân phối nội dung (CDN) dựa trên proxy, tải trước và kết xuất trước các trang AMP trước khi người dùng yêu cầu.
Và điều này tạo ra khác biệt lớn về tốc độ website.
Vì sao?
Vì công nghệ này cho phép website tải nhiều thành phần từ các máy chủ khác nhau cùng lúc. Đồng thời, khách truy cập có thể tải website từ máy chủ gần họ nhất.
Nhờ đó, website của bạn tải cực nhanh với nhiều người hơn.
Hiện có hai nhà cung cấp AMP Cache chính:
Các nền tảng này lưu cache cho trang của bạn khi bạn sử dụng định dạng AMP.
Ví dụ: nhà cung cấp cache có thể phát hiện trang AMP của bạn thông qua thẻ <html ⚡> hoặc <html amp> và lưu cache nội dung của trang.
Hoặc nhà xuất bản có thể thêm trang vào AMP Cache theo cách thủ công (chỉ áp dụng cho Google AMP Cache).
Các nền tảng khác có thể truy cập những trang AMP đã lưu cache thông qua URL của trang.
Ví dụ: nếu thêm /amp vào cuối bất kỳ bài viết tin tức nào trên The Guardian, bạn sẽ thấy phiên bản AMP.
Ví dụ như sau:
Mẹo hữu ích: Nếu không chắc website của mình có trang AMP hay không, bạn có thể kiểm tra bằng Site Audit Tool.
Trước tiên, hãy thêm tên miền của bạn rồi nhấp vào “Start Audit.”
Sau đó, vào tab “Statistics” trong dashboard. Bạn sẽ thấy một hàng có nội dung “AMP Links.”
Ví dụ như sau:
Ưu điểm và hạn chế của trang AMP là gì?
AMP có thể cải thiện hiệu suất trang và trải nghiệm người dùng, nhưng cũng có một số nhược điểm.
Hãy cùng xem những ưu và nhược điểm của trang AMP:
Ưu điểm của AMP
- Trang tải gần như tức thì
- Dễ xây dựng trang
- Cải thiện trải nghiệm người dùng trên mobile
- Cho phép tùy chỉnh thiết kế
- Được nhiều nền tảng hỗ trợ, bao gồm Google và Bing
Hạn chế của AMP
- Google không còn hiển thị biểu tượng AMP để nhận biết nội dung AMP
- Các yếu tố thiết kế bị hạn chế đáng kể
- 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 website
Bạn có thể tạo trang AMP bằng cách làm theo HTML markup hoặc sử dụng CMS (thông qua plugin hay chức năng tùy chỉnh).
Tạo trang AMP bằng HTML
Code cơ bản
Để bắt đầu, đây là markup của một trang AMP cơ bản:
<!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="https://amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/"><meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"><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 id="hello">Hello AMPHTML World!</h1></body></html>
Như bạn thấy, nội dung trong body khá đơn giản, nhưng phần head có thêm một số đoạn mã.
Mẹo: hãy dùng “playground” của snippet để thử nghiệm và thực hành với đoạn mã.
Thêm hình ảnh
Nếu muốn thêm hình ảnh, bạn cần thay thẻ HTML thông thường bằng thẻ tương ứng của AMP.
Trong trường hợp này, hãy dùng thẻ <amp-img> thay vì thẻ <img>.
Để thử, hãy sao chép và dán đoạn mã sau vào phần <body> của trang.
<amp-img src="https://source.unsplash.com/random/600x400" width="600" height="400"></amp-img>
Thêm kiểu dáng
Bước tiếp theo là thêm kiểu dáng.
Mọi kiểu dáng đều phải được thiết lập bằng các thuộc tính CSS. Tuy nhiên, AMP quy định rằng toàn bộ CSS phải được đặt trong một thẻ tùy chỉnh có tên <style amp-custom> trong <head> của tài liệu.
Ví dụ, hãy thử thêm kiểu dáng sau vào trang của bạn:
<style amp-custom>h1 {margin: 1rem;} body {background-color: green;}</style>
JavaScript
AMP cho phép sử dụng JavaScript tùy chỉnh thông qua <amp-script> component.
Thành phần này cho phép bạn viết và chạy JS của riêng mình mà vẫn duy trì các cam kết về hiệu suất của AMP. Bạn cũng có thể nhanh chóng tạo trang mà không cần viết JavaScript hoặc dùng thư viện bên ngoài.
Để tìm hiểu chi tiết hơn, hãy đọc hướng dẫn sử dụng JavaScript tùy chỉnh của AMP và làm theo hướng dẫn AMP JS để bắt đầu.
Kiểm tra và xác thực
Trang AMP hợp lệ là trang tuân thủ các nguyên tắc nghiêm ngặt, nhờ đó đủ điều kiện được lưu vào bộ nhớ đệm và mang lại trải nghiệm người dùng tuyệt vời.
Trước khi xác thực trang AMP, hãy đảm bảo bạn tuân theo các phương pháp hay nhất sau:
- Nếu đang tối ưu cho Google, hãy tuân theo nguyên tắc dành cho trang AMP
- Liên kết các trang AMP của bạn với các trang canonical (phiên bản không dùng AMP hoặc chính trang AMP đó)
- Sử dụng cùng một structured data markup trên trang AMP và trang canonical
- Xác minh structured data hoạt động bằng cách sử dụng Rich Results Test
- Xác minh tệp robots.txt của bạn không chặn trang AMP
- Tuân theo các nguyên tắc hreflang của International SEO
Khi đã sẵn sàng kiểm tra, hãy dùng AMP Test Tool để đảm bảo trang của bạn đáp ứng mọi yêu cầu.
Để xem hướng dẫn chi tiết hơn, hãy tham khảo hướng dẫn chính thức của AMP về cách xác thực trang AMP.
Nếu mới làm quen với phát triển web, hãy tham khảo các khóa học của AMP hoặc AMP foundations codelab của Google.
Tạo trang AMP bằng CMS
Nếu quản lý nội dung thông qua CMS, bạn có thể sử dụng Drupal, Joomla, hoặc WordPress.
Ví dụ, hãy xem cách thực hiện với AMP for WP.
Sau khi kích hoạt plugin trên WordPress, bạn có thể bắt đầu tạo Accelerated Mobile Pages.
Trước tiên, hãy thêm một trang mới hoặc bài viết mới.
Sau đó, nhấp vào “Start the AMP Page Builder.”
Bạn có thể chọn dùng bố cục dựng sẵn hoặc tự tạo bố cục bằng cách kéo thả các thành phần.
Sau đó, nhấp vào biểu tượng bánh răng để chỉnh sửa các thành phần trên trang.
Và lưu từng mô-đun khi thực hiện.
Sau khi xuất bản trang, bạn có thể xem phiên bản AMP bằng cách thêm “amp” vào cuối URL của trang.
Theo dõi và cải thiện trang AMP
Một trong những cách tốt nhất để theo dõi và cải thiện trang AMP là định kỳ audit website. Việc này giúp bạn phát hiện các vấn đề về HTML, mẫu trang, kiểu dáng và bố cục.
Trước tiên, hãy chạy website qua công cụ Site Audit .
Mẹo: Tạo tài khoản Semrush miễn phí và crawl tối đa 100 URL của bất kỳ domain, subdomain hoặc subfolder nào.
Sau khi crawl website, hãy chuyển đến tab “Statistics”. Bạn sẽ thấy các vấn đề trong hàng có nhãn “AMP Links.”
Công cụ này kiểm tra hơn 40 lỗi phổ biến nhất liên quan đến trang AMP và hướng dẫn cách khắc phục.
Hãy khắc phục mọi vấn đề càng sớm càng tốt. Chúng có thể ảnh hưởng đến cách search engine phân phối nội dung của bạn cho người tìm kiếm.
Đưa góc nhìn thành kế hoạch.
Chia sẻ website và mục tiêu để LionTech tư vấn giải pháp phù hợp.
Đăng ký tư vấn ↗