Hướng dẫn khắc phục lỗi giao diện AMP của WordPress.
Trong 2 bài viết cách đây không lâu, tôi đã giới thiệu đến các bạn Trang dành cho thiết bị di động được tăng tốc (AMP) của Google cũng như Instant Articles của Facebook. Nếu bạn đang sử dụng mã nguồn WordPress để xây dựng blog/ website của mình thì việc tạo các trang AMP là vô cùng đơn giản với sự trợ giúp của plugin AMP đến từ Automattic. Tuy nhiên, plugin này còn tồn tại khá nhiều nhược điểm khiến cho trang AMP của bạn có thể không được hoàn hảo (bị Google Webmasters báo lỗi). Vậy làm thế nào để khắc phục được những lỗi này?
Tham khảo thêm:
- Trang dành cho thiết bị di động được tăng tốc (AMP)
- Sở hữu plugin tạo giao diện AMP tốt nhất – WP AMP với giá chỉ 120k
Câu trả lời chính là sử dụng thêm plugin Facebook Instant Articles & Google AMP Pages by PageFrog. Plugin này không những hỗ trợ tạo giao diện AMP mà còn giúp bạn tạo các Instant Articles dành cho Facebook. Tuy nhiên, do đến ngày 12/04/2016, Instant Articles mới chính thức mở cửa cho tất cả Facebook page. Vậy nên, trong bài viết này, tạm thời chúng ta chỉ bàn đến AMP đã.
Hướng dẫn khắc phục các lỗi cơ bản trong giao diện AMP
1. Cài đặt, kích hoạt 2 plugin AMP và Facebook Instant Articles & Google AMP Pages by PageFrog.
2. Truy cập vào Mobile Formats => Setup => Kiểm tra xem mục Google AMP HTML đã hiển thị “Ready” hay chưa?
3. Truy cập Mobile Formats => Styling => Bổ sung logo, thiết lập màu sắc và font chữ cho giao diện AMP của bạn.
4. Truy cập Mobile Formats => Analytics => Thiết lập mã Google Analytics cho các trang AMP.
5. Truy cập Mobile Formats => Ads => Thiết lập quảng cáo Google AdSense cho các trang AMP.
6. Truy cập Mobile Formats => Settings. Đây là phần quan trọng nhất, giúp bạn khắc phục một số lỗi tồn tại khi sử dụng plugin AMP.
Trong đó:
- Pages chưa được plugin AMP của Automattic hỗ trợ nên tạm thời các bạn vô hiệu hóa (disabled) nó đi.
- Force AMP compliance by removing other plugins/functions from AMP pages: tùy chọn này giúp loại bỏ hoàn toàn chức năng, code của các plugin khác. Khi chọn nó, bạn sẽ không bị lỗi trang AMP vì code của các plugin khác nữa.
- Display Featured Image: hiển thị ảnh đại diện (nổi bật) ở đầu mỗi bài viết.
Ngoài ra, để trang AMP không bị Google Webmasters báo lỗi, các bạn cần lưu ý thêm một vài vấn đề sau:
- Bổ sung featured image cho các bài viết. Trong mỗi bài viết phải có ít nhất 1 hình ảnh.
- Không dùng các thẻ như embed, rel… trong bài viết. Nên bạn nào đã và đang sử dụng thẻ rel=”nofollow” và rel=”follow” trong bài viết thì hãy xóa ngay đi nhé.
- Không dùng các thẻ property, xmlns:v, typeof… trong mã nguồn HTML.
Kiểm tra giao diện AMP
Các bạn có thể kiểm tra xem trang AMP của mình đã hoàn toàn đạt chuẩn hay chưa bằng cách thêm “#development=1” vào sau link của trang AMP và bấm phím Enter.
Ví dụ:
wpcanban.com/kiem-tien-online/huong-dan-dang-ky-va-kiem-tien-voi-revenuehits.html/amp/#development=1
Click chuột phải vào giao diện, chọn Inspect (đối với trình duyệt Google Chrome). Chọn tiếp tab “Console“. Nếu bạn nhận được thông báo như thế này thì có nghĩa là giao diện AMP đã hoàn toàn sạch lỗi.
Còn nếu bạn vẫn nhận được các thông báo màu đỏ. Vui lòng copy và paste chúng lên đây để được hỗ trợ khắc phục nhé. Chúc các bạn thành công!
Nếu bạn thích bài viết này, hãy subscribe blog của tôi để thường xuyên cập nhật những bài viết hay nhất, mới nhất qua email nhé. Cảm ơn rất nhiều. :)
Website mình có amp. Check tools của google nó báo amp hợp lệ nhưng mình hiện không thấy khách visit vào amp. Không biết có các nào để ép index amp không Hiếu
Link amp: https://mangcapdien.vn/tin-tuc/ban-ve-cad-thang-mang-cap.html/amp
AMP là Google nó tự index mà, đâu cần phải “ép” nhỉ?
Mình chèn mã analytics khác vào amp để xem có visit không nhưng mà không hề có. Trong khi test amp thì hợp lệ. Không hiểu vì sao
Bạn cài AMP lâu chưa?
Phải từ đầu tháng 5 đến giờ đó Hiếu
Bạn thử submit link AMP của từng bài viết vào Google Search Console chưa?
Mình thử rồi. Ok hết. Trừ mỗi việc không thấy mặt nó ở index google thôi :(
Bạn search trên desktop hay trên mobile thế? :P
Mình search thử bằng Google mobile thấy có logo AMP cạnh kết quả tìm kiếm mà. :P
Key nào thế Hiếu, mình search đủ kiểu trên điện thoại không ra. Hay do thiết bị
Copy cái link bạn đưa ở trên và paste vào Google Search. :P
Cảm ơn bài viết của bạn, nhưng hiện tại mình được thông báo plugin Facebook Instant Articles & Google AMP Pages đã ngưng cung cấp từ 2019. Hiện tại có plugin nào thay thế tốt không ad?
Ngoài ra, cho mình hỏi thêm phần “TÌM KIẾM CÓ TÀI TRỢ” trên website được làm bằng cách nào trong Google Adsense? Mình đã tìm đủ chỗ trong tài khoản của mình nhưng không thấy. Cảm ơn ad hổ trợ.
Bạn thử chuyển qua dùng plugin AMP for WP xem sao nhé. Plugin đó miễn phí nhưng chất lượng rất tốt.
Ad ơi, tớ bị lỗi này “Phiên bản AMP có dữ liệu có cấu trúc không hợp lệ” nhờ ad hướng dẫn cách khắc phục được không ạ, web của mình là https://namlongemc.com, cảm ơn ad nhiều ạ
Lỗi thì bỏ luôn đi bạn ơi. Xem bài viết “Hướng dẫn gỡ bỏ AMP khỏi blog/ website WordPress” để biết thêm chi tiết.
Chào ad, wmt của em cứ báo lỗi: Lỗi nội dung không khớp lớn, mình báo cáo xử lý mà không được, ai gặp lỗi này chưa ạ?
Cái này là do các nội dung hiển thị trên giao diện desktop quá khác biệt so với nội dung hiển thị trên giao diện AMP. Cái này hồi trước mình cũng dính với trang chủ. Sau đó thì bỏ luôn AMP vì giao diện mobile của mình đủ nhanh rồi. :D
Web mình không phải là wordpress thì làm cách nào để sử dụng AMP nhỉ
Khỏi đi bạn. Mình WordPress mà còn phải bỏ AMP đi vì giao diện của nó quá chán. :P
Mình làm theo hướng dẫn của bạn rồi nhưng mà vẫn không được bạn ah? Bạn có thể kiểm tra giúp mình được không? website của mình là: http://thietkethicongnhadep.net/
Cài plugin AMP for WP đi bạn. Bỏ cái AMP kia đi. :P
Ban đầu tớ cài plugin Accelerated Mobile Pages nhưng không được tớ mới chuyển sang plugin AMP đấy bạn ah.
Nhưng bài viết mình bắt buộc phải sử dụng thuộc tính rel=”nofollow” (những bài aff) thì phải làm sao bạn?
Hiếu ơi mình cài amp và bị báo trong webmaster : “Phần tử dữ liệu có cấu trúc không hợp lệ (vấn đề Không nghiêm trọng)”. Vậy có cần sửa gì để webmaster hết báo lỗi k ?
Nếu là vấn đề không quan trọng thì có thể bỏ qua nhé. :P
Đây là một Plugin cũng khá tốt tuy nhiên nếu dùng Plugin Accelerated Mobile Pages thì tuyệt vời hơn hỗ trợ rất nhiều tính năng (nếu có tiền thì hãy mua Plugin WP AMP)
Plugin này bị tác giả bỏ rơi rồi. :D Nên không khuyến khích mọi người sử dụng nữa. :)
Vậy thì plugin AMP for WP – Accelerated Mobile Pages là lựa chọn số 1 cho những ai đang dùng miễn phí :P
Plugin AMP by Automatic bị tác giả bỏ rơi rồi hả bạn?
Lâu lâu mới cập nhật bạn ạ. Mình vẫn đang dùng plugin này kết hợp với plugin AMP for WP. :)
e có mấy trang bị lỗi như này,cách khắc phục thế nào ak ? a chỉ giúp e với :)
Failed to load resource: the server responded with a status of 400 (Bad Request)
jquery-migrate.min.js?ver=1.4.1:2 JQMIGRATE: Migrate is installed, version 1.4.1
http://atoroi.com/dich-vu-phat-to-roi/dich-vu-phat-to-roi-truong-hoc/amp/#development=1
Failed to load resource: the server responded with a status of 404 (Not Found)
css
Failed to load resource: the server responded with a status of 400 (Bad Request)