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. :)
Anh ơi em test thì bị lỗi này anh ơi:
Thẻ HTML bị cấm hoặc được sử dụng không hợp lệ
The attribute ‘v-bind:class’ may not appear in tag ‘div’.
1 vấn đề
The attribute ‘v-for’ may not appear in tag ‘a’.
1 vấn đề
The attribute ‘v-for’ may not appear in tag ‘span’.
1 vấn đề
The attribute ‘v-on:change’ may not appear in tag ‘select’.
1 vấn đề
The attribute ‘v-on:click’ may not appear in tag ‘i’.
2 vấn đề
The attribute ‘v-on:click’ may not appear in tag ‘span’.
1 vấn đề
The attribute ‘v-on:click.prevent’ may not appear in tag ‘input’.
1 vấn đề
The attribute ‘v-show’ may not appear in tag ‘div’.
2 vấn đề
The attribute ‘v-show’ may not appear in tag ‘p’.
3 vấn đề
The attribute ‘v-show’ may not appear in tag ‘span’.
4 vấn đề
The attribute ‘v-text’ may not appear in tag ‘i’.
2 vấn đề
The attribute ‘v-text’ may not appear in tag ‘span’.
5 vấn đề
The tag ‘option’ may only appear as a descendant of tag ‘form’.
4 vấn đề
The tag ‘rwp-score-5-star’ is disallowed.
1 vấn đề
The tag ‘rwp-tracker’ is disallowed.
1 vấn đề
The tag ‘select’ may only appear as a descendant of tag ‘form’.
1 vấn đề
The tag ‘textarea’ may only appear as a descendant of tag ‘form’.
1 vấn đề
Nhiều lỗi thế này thì nên mua plugin WP AMP đi bạn ạ. :P
chỉ có AMP của automatic mới đẹp thôi, amp của thằng kia thì được cái fix lỗi nhưng nhìn xấu vãi ra.
Muốn vừa có AMP của Automatic vừa có KK rating thiệt khó quá, mình mò mãi đủ thử cách mà chã được. Anh Hiếu cho xin 1 bài viết đi anh ơi. Cả nước ngoài người ta cũng nói lỗi KK rating đấy.
Trong hôm nay sẽ có. :P
Em thề fix được em mở 20 bài viết của a ra cho 5 sao liền :))
Có bài viết hướng dẫn rồi đó. Nhớ vote đủ 5 sao cho 20 bài nhé. Hehe. :P
Đã cho 5 sao :))
Anh Hiếu cho em hỏi chút ạ, em vào template của plugin AMP, muốn sửa cái time từ publish thành last modified thì sửa thế nào hả anh?
Hi anh, em đang cài Amp, nhưng hiện nó ăn cả vào homepage và cate. Em đang muốn hỏi cấu hình sao để cho Amp vào đúng page tin tức thôi. Web bán hàng nên nó dính vào cate và home trông rất cùi ạ
Bạn dùng plugin gì để cài giao diện AMP vậy? :P
Em cài cái plugin Amp trả phí, giao diện cũng tương tự như mấy bài hướng dẫn cài đặt trên mạng.
Em vừa khắc phục được vấn đề nó ăn vào trong cate rồi, giờ nó vẫn ăn vào trang chủ
http://thegioimu.com.vn/amp
Cái này mình cũng đang tìm hướng xử lý. :P
Em tắt cái KK Rating đi thì hết lỗi, bật lên thì cả đống lỗi liên quan. Làm thế nào để sử dụng KK với AMP đây anh ?
Ủa. Chứ bạn không đọc bài viết bên trên à? :P
Ý anh là dòng này ? Force AMP compliance by removing other plugins/functions from AMP pages.
Em tích rồi á chứ mà cũng được đâu ạ ?
Bạn clear cache sau khi tick vào mục đó chưa? :P Nếu vẫn không được thì có thể do plugin đã lâu không được cập nhật nên chức năng không tương thích với các phiên bản WordPress mới hơn. :P
Mình vẫn bị thế này xử lý thế nào dduwwocj bạn. Thank bạn
Powered by AMP ⚡ HTML – Version 1468883441627
validator.js:363 AMP validation had errors:hw @ validator.js:363
validator.js:363 The tag ‘like’ is disallowed.hw @ validator.js:363
validator.js:363 The tag ‘plusone’ is disallowed.hw @ validator.js:363
validator.js:375 See also
Bạn view source và tìm các thẻ như “like” và “plusone” rồi loại bỏ chúng thôi. Có vẻ đây là những thẻ thuộc về plugin chia sẻ mạng xã hội?
Khoản này mình hơi dốt, nhờ bạn nói rõ hơn được không. Thank bạn
Mình đã nói quá rõ rồi còn gì? :) Vấn đề nằm ở nút Like và nút Google+ của bạn. :P
làm thế nào để chỉnh bài viết trong chuyên mục khi hiển thị giao diện được gọn. thanks
Hi Trung Hiếu,
Mình đang làm một trang salepage và dàn trang bằng phần mềm instabuilder ý. Mình cài hình ảnh làm background luôn. Nhưng nó chỉ hiện full ảnh với kichs thước của máy mình. còn những máy màn hình nhỏ hơn và smartphone thì sẽ bị khuất hình ảnh.
Hiếu có các nào không, giúp mình với.
Mình không dùng Insta Builder nên chẳng biết phải chỉ cho bạn như thế nào. Không liên quan nhưng mình vào site của bạn trên Firefox bị báo lỗi Reported Attack Page! (bảo mật) nhé. :P
cho e hỏi bị lỗi này la sao bác
Uncaught Error: Extension failed: : amp-analytics is already registered. The script tag for amp-analytics is likely included twice in the page.
Uncaught (in promise) Error: Failed HTTP request for %s. [object Window](…)
Powered by AMP ⚡ HTML – Version 1463506087793
AMP validation successful.
Có vẻ bạn đang để tồn tại cùng lúc 2 mã Analytics trên giao diện AMP. :P
Chào bác Hiếu :D
Em có 2 câu hỏi là
1) Em có cài đặt plugin Custom AMP Panel và được webmasters chấp nhận rồi, nhưng em có làm theo hướng dẫn bác là thêm 1 plugin ” Facebook Instant Articles & Google AMP Pages by PageFrog ” thì theo Bác có nên bỏ 1 trong 2 cái này không ? ( Có vẻ đang để tồn tại cùng lúc 2 mã Analytics trên giao diện AMP. )
2) khi cài plugin kk star rating thì lỗi, bỏ ra hết lỗi, thì bác có phương án nào tốt không ạ ? ( có thể sử dụng plugin khác ) :D
Link demo: http://congdongxe.com/so-huu-bentley-mulsanne-speed-co-noi-dep-nhat-viet-nam/amp/#development=1
Xin cảm ơn
Lỗi plugin kk Star Ratings bạn có thể sử dụng plugin PageFrog để sửa nhé. Chỉ nên dùng 1 trong 2 plugin thôi. :P
:D cảm ơn bác nhe