--- title: "Hướng dẫn khắc phục lỗi giao diện AMP của WordPress" author: "Trung Hiếu" date: "2016-03-21" lastmod: "2016-09-15" url: "https://wpcanban.com/wordpress/thu-thuat-wordpress/huong-dan-khac-phuc-loi-giao-dien-amp-cua-wordpress.html" --- # Hướng dẫn khắc phục lỗi giao diện AMP của WordPress Hướng dẫn khắc phục lỗi giao diện AMP của WordPress. ![huong-dan-khac-phuc-loi-giao-dien-amp-cua-wordpress](https://wpcanban.com/wp-content/uploads/2016/03/huong-dan-khac-phuc-loi-giao-dien-amp-cua-wordpress.png) 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](https://wpcanban.com/tag/amp/)*) của *Google* cũng như *Instant Articles* của *Facebook*. Nếu bạn đang sử dụng mã nguồn *[WordPress](https://wpcanban.com/category/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)](https://wpcanban.com/wordpress/thu-thuat-wordpress/trang-danh-cho-thiet-bi-di-dong-duoc-tang-toc-amp.html)* - *[Sở hữu plugin tạo giao diện AMP tốt nhất – WP AMP với giá chỉ 120k](https://wpcanban.com/khuyen-mai/plugin-tao-giao-dien-amp-tot-nhat.html)* 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](https://wordpress.org/plugins/amp/)* và *[Facebook Instant Articles & Google AMP Pages by PageFrog](https://wordpress.org/plugins/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? ![google-amp-html-ready](https://wpcanban.com/wp-content/uploads/2016/03/google-amp-html-ready.png) 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. ![thiet-lap-giao-dien-amp-cho-wordpress](https://wpcanban.com/wp-content/uploads/2016/03/thiet-lap-giao-dien-amp-cho-wordpress-3.jpg) 4. Truy cập *Mobile Formats* => *Analytics* => Thiết lập mã *Google Analytics* cho các trang *AMP*. ![thiet-lap-google-analytics-cho-trang-amp](https://wpcanban.com/wp-content/uploads/2016/03/thiet-lap-google-analytics-cho-trang-amp.png) 5. Truy cập *Mobile Formats* => *Ads* => Thiết lập quảng cáo *Google AdSense* cho các trang *AMP*. ![tich-hop-quang-cao-google-adsense-vao-trang-amp](https://wpcanban.com/wp-content/uploads/2016/03/tich-hop-quang-cao-google-adsense-vao-trang-amp.png) 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*. ![thiet-lap-amp-cho-posts-va-pages-trong-wordpress](https://wpcanban.com/wp-content/uploads/2016/03/thiet-lap-amp-cho-posts-va-pages-trong-wordpress.jpg) 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. ![giao-dien-amp-dat-chuan](https://wpcanban.com/wp-content/uploads/2016/03/giao-dien-amp-dat-chuan.png) 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.* :)