, nếu có thì chỉ sử dụng code mà nó cung cấp sẵn, ngay cả CSS nếu dùng không đúng cũng sẽ báo lỗi. Ví dụ, trong thẻ
<div> sẽ không được dùng <div style="...">Nên trong quá trình thiết kế hoặc ngay cả khi đăng bài viết lên, lúc nào mình cũng luôn kiểm tra xem nó đã hợp lệ AMP chưa, nếu chưa thì phải kiểm tra xem nó bị lỗi gì và ở đâu để kịp thời giải quyết nó. Vì dù gì các bạn cũng đã biết được lợi ích của AMP là để Google Index tốt hơn, tải trang nhanh hơn... và còn nhiều hơn nữa. Nên bỏ chút công sức ra sửa code cũng đáng phải không nào?
Vậy làm cách nào để phát hiện được lỗi AMP hay trang web của bạn đã hợp lệ AMP chưa? Đây là những công cụ để bạn kiểm tra, mời bạn cùng tìm hiểu nha.
Browser Developer Console (Bảng điều khiển dành cho nhà phát triển trình duyệt)
Đầu tiên, là phải nói đến công cụ có sẵn của trình duyệt, những nhà phát triển web luôn dùng công cụ này để kiểm tra lỗi, và mình cũng không phải ngoại lệ, mình rất hay dùng nó để xem mình viết code đã tốt chưa, chỉnh sửa CSS với nó là số 1, và code AMP cũng thế.- Bước 1: Bạn mở website của bạn trong trình duyệt.
- Bước 2: Để mở Browser Developer Console sẽ có 3 cách:
+ Nhấn F12
+ Nhấn Ctrl + Shift + I
+ Nhấp phải chuột trên trình duyệt --> chọn Kiểm tra
- Bước 3: Nó sẽ xuất hiện hộp thoại Developer Console (Công cụ dành cho nhà phát triển) --> chọn tab Console. Nó hiện như hình bên dưới là website của bạn đã đúng chuẩn AMP.
Browser Extension (Tiện ích mở rộng của trình duyệt)
Đây là công cụ mình thấy hay và tiện lợi hơn, bằng cách cài đặt nó vào trình duyệt, mỗi khi chạy bất cứ trang web nào nó cũng đều kiểm tra cho mình và cho ra kết quả là trang đó có đáp ứng đủ điều kiện và hợp lệ hay không. Nếu không thì nó sẽ báo lỗi.Bạn truy cập vào đường dẫn bên dưới để cài đặt tiện ích xác thực AMP dành cho Chrome và Opera.
Khi cài đặt xong nó sẽ hiện biểu tượng như hình bên dưới, nếu hiện màu xám là trang web đó không sử dụng AMP.
Ví dụ, trong trang mình có 1 cảnh báo, không phải là lỗi nha. Nó cảnh báo rằng trong trang có sử dụng tiện ích Javascript amp-youtube. Nhưng lại không thấy sử dụng code
<amp-youtube>Bạn nhấn vào chữ Debug, nó sẽ đưa bạn đến trang báo lỗi để cho bạn biết lỗi của nó nằm ở đâu. Như trong ví dụ trên thì nó nằm ở dòng 975, cột 6. Muốn sửa lỗi đó thì chỉ cần xóa đoạn Javascript đó đi, hoặc bạn có thể thêm 1 video youtube nào đó vào, hoặc bạn vẫn để như vậy vẫn không sao. Vì nó chỉ là cảnh báo chứ không phải lỗi.
Trang web dùng để kiểm tra website hợp lệ AMP
Bạn chỉ cần đánh địa chỉ website của bạn vào 2 trang bên dưới là có thể kiểm tra được có hợp lệ AMP hay chưa. Nếu đã hợp lệ thì nó sẽ hiện chữ PASS.1. https://search.google.com/search-console/amp
2. https://validator.ampproject.org/
Vậy là mình đã hướng dẫn bạn kiểm tra được website bạn đã hợp lệ AMP hay chưa. Hi vọng bài viết này sẽ giúp ích cho bạn trong việc thiết kế giao diện AMP. Nếu thấy hay thì chia sẻ cho bạn bè cùng xem nha. Chúc bạn thành công.
Nguồn: wWw.chiasetools.com
Comments
Post a Comment