AMP Validation
Kiểm tra kỹ thuật để đảm bảo trang AMP tuân thủ đầy đủ quy tắc HTML, JS và cấu trúc bắt buộc của AMP Project.
AMP Validation là gì?
AMP Validation (Kiểm tra tính hợp lệ của AMP) là quá trình kiểm tra kỹ thuật nhằm xác minh trang web được xây dựng theo chuẩn AMP (Accelerated Mobile Pages) có tuân thủ đúng tất cả quy tắc bắt buộc về cấu trúc HTML, giới hạn JavaScript, cách khai báo tài nguyên và định dạng thẻ meta. Đây không phải là kiểm tra hiệu năng hay tốc độ tải trang, mà là kiểm tra tính tuân thủ chuẩn kỹ thuật do dự án AMP Project công bố.
Tại sao quan trọng trong SEO?
AMP Validation ảnh hưởng trực tiếp đến khả năng hiển thị và xếp hạng trên thiết bị di động — đặc biệt với Google. Nếu trang không vượt qua kiểm tra, nó sẽ không được đánh dấu là 'AMP hợp lệ', dẫn đến:
- Không xuất hiện trong thanh cuộn tin tức AMP trên Google Search (AMP Carousel);
- Không được lưu trong bộ nhớ cache AMP của Google (Google AMP Cache), làm mất lợi ích về tốc độ và độ tin cậy;
- Nguy cơ bị loại khỏi chỉ mục AMP hoặc bị xử lý như trang thường — giảm khả năng tiếp cận người dùng di động;
- Ảnh hưởng gián tiếp đến trải nghiệm người dùng (UX), từ đó tác động tiêu cực đến các tín hiệu SEO như tỷ lệ thoát, thời gian ở lại.
Lưu ý: Từ tháng 6/2021, Google đã ngừng ưu tiên hiển thị riêng biệt kết quả AMP trong tìm kiếm, nhưng việc duy trì trang AMP hợp lệ vẫn cần thiết nếu bạn đang sử dụng AMP cho nội dung tin tức, blog hoặc sản phẩm yêu cầu tích hợp với nền tảng phân phối nội dung (ví dụ: Google News).
Cách hoạt động
AMP Validator là một công cụ mã nguồn mở, chạy trên trình duyệt hoặc dưới dạng thư viện Node.js. Nó phân tích mã nguồn HTML của trang theo một tập hợp quy tắc cố định được cập nhật liên tục tại amp.dev/spec. Quy trình gồm ba bước chính:
- Phân tích cú pháp: Kiểm tra cấu trúc HTML có hợp lệ (well-formed), bao gồm thẻ mở/đóng đúng, không trùng lặp thẻ bắt buộc;
- Kiểm tra ngữ nghĩa: Đảm bảo chỉ dùng các thành phần được phép (ví dụ:
<amp-img>thay vì<img>), không có script tùy chỉnh, không dùng CSS inline ngoài giới hạn 75KB; - Xác minh thuộc tính bắt buộc: Kiểm tra sự tồn tại và giá trị đúng của thẻ
<html ⚡>hoặc<html amp>,<meta name='viewport'>,<script async src='https://cdn.ampproject.org/v0.js'></script>, v.v.
Nếu bất kỳ quy tắc nào bị vi phạm, validator trả về lỗi cụ thể kèm vị trí dòng và mô tả rõ ràng — giúp nhà phát triển sửa nhanh.
Hướng dẫn thực hiện
Dưới đây là 4 cách phổ biến để kiểm tra AMP Validation, từ đơn giản đến chuyên sâu:
- Thêm
#development=1vào URL: Mở trang AMP trên trình duyệt (Chrome/Firefox), thêm đoạn này vào cuối địa chỉ (ví dụ:https://example.com/bai-viet/#development=1). Mở DevTools → Console — nếu hợp lệ, không có thông báo lỗi; nếu sai, hiện thông báo màu đỏ kèm chi tiết. - Sử dụng trình mở rộng Chrome 'AMP Validator': Cài từ Chrome Web Store, nhấn biểu tượng khi xem trang AMP — hiển thị trạng thái ngay lập tức.
- Dùng công cụ trực tuyến: Truy cập https://validator.ampproject.org, dán URL hoặc dán mã HTML trực tiếp.
- Kiểm tra qua dòng lệnh (CLI): Cài đặt
amphtml-validatorbằng npm (npm install -g amphtml-validator), sau đó chạyamphtml-validator index.html.
Với website lớn, nên tích hợp kiểm tra tự động vào quy trình CI/CD (ví dụ: GitHub Actions) để đảm bảo mọi bản cập nhật đều đạt chuẩn trước khi deploy.
Lỗi thường gặp
Dưới đây là 5 lỗi phổ biến nhất và cách khắc phục:
| Lỗi | Mô tả | Cách sửa |
|---|---|---|
The mandatory tag 'html ⚡' is missing or incorrect. |
Thẻ <html> thiếu thuộc tính ⚡ hoặc amp. |
Thay <html> bằng <html ⚡> hoặc <html amp> — hai cách đều hợp lệ. |
Custom JavaScript is not allowed. |
Dùng thẻ <script> không phải từ CDN AMP hoặc chứa mã tùy chỉnh. |
Xóa toàn bộ <script> ngoại trừ <script async src="https://cdn.ampproject.org/v0.js"></script>; thay tương tác bằng thành phần AMP như <amp-bind>, <amp-lightbox>. |
The attribute 'width' may not appear in tag 'amp-img'. |
Thẻ <amp-img> thiếu thuộc tính bắt buộc width và height. |
Thêm đầy đủ hai thuộc tính với giá trị số nguyên dương (ví dụ: width="600" height="400"). |
Invalid URL protocol for attribute 'src' in tag 'amp-img'. |
Ảnh dùng giao thức http:// trong môi trường HTTPS. |
Chuyển sang https:// hoặc dùng đường dẫn tương đối (/images/photo.jpg). |
The mandatory tag 'meta charset='utf-8'' is missing. |
Thiếu thẻ khai báo mã hóa ký tự. | Thêm <meta charset='utf-8'> ngay sau <head>. |
Ví dụ thực tế
Một trang tin tức có URL https://baodantri.com.vn/amp/kinh-te/20240415102321527.htm được kiểm tra bằng #development=1. Console hiển thị:
AMP validation successful.
Tuy nhiên, sau khi thêm một plugin chat hỗ trợ (dùng <script> bên thứ ba), kiểm tra lại thấy lỗi:
[Error] The tag 'script' is disallowed except in specific forms.
Đội ngũ kỹ thuật loại bỏ script đó và thay bằng <amp-sidebar> + <amp-iframe> (nếu bắt buộc tích hợp). Sau khi cập nhật, trang quay lại trạng thái 'valid' — đảm bảo tiếp tục được lưu trong Google AMP Cache và xuất hiện trong Google News.
Câu hỏi thường gặp
AMP Validation có ảnh hưởng đến SEO trên desktop không?
Không. AMP chỉ áp dụng cho phiên bản di động và các nền tảng phân phối nội dung di động (như Google News). Trang desktop không cần tuân thủ AMP Validation — miễn là trang chuẩn (non-AMP) hoạt động tốt và tối ưu cho thiết bị lớn.
Một trang có thể vừa là AMP vừa là non-AMP không?
Có. Đây là mô hình 'paired AMP': trang AMP và trang thường tồn tại song song, liên kết qua thẻ <link rel='amphtml'> (trên trang thường) và <link rel='canonical'> (trên trang AMP). Đây là cách khuyến nghị để đảm bảo tính linh hoạt và khả năng index đầy đủ.
AMP Validation có thay đổi theo thời gian không?
Có. Các quy tắc được cập nhật định kỳ bởi AMP Project. Một số thay đổi gần đây bao gồm: giảm giới hạn kích thước CSS từ 50KB lên 75KB (từ 2022), cho phép <amp-script> trong một số trường hợp nhất định (tùy trường hợp). Nhà phát triển nên theo dõi trang amp.dev/status để cập nhật kịp thời.