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. :)
Bạn kiểm tra giúp mình với. Có báo lỗi đỏ khi làm hết các bước hướng dẫn cài đặt ở trên.
cdn.ampproject.org/v0.js:318 Powered by AMP ⚡ HTML – Version 1462305134738
cdn.ampproject.org/v0.js:71 must have a valid `as` value
validator.js:397 AMP validation successful.
chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js Failed to load resource: net::ERR_FAILED
VM2271:1 ‘webkitIDBDatabase’ is deprecated. Please use ‘IDBDatabase’ instead.
chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js Failed to load resource: net::ERR_FAILED
Đó không phải lỗi giao diện AMP mà là lỗi do Chrome Extension bạn nhé. Cứ thấy thông báo “AMP validation successful” là được. :P
Chỉ cho mình cách fix lỗi cấu trúc như hình được không :)
Bài viết của bạn rất hữu ích . Cảm ởn bạn.
Không có chỗ để đăng hình :)
Bạn check bằng https://developers.google.com/structured-data/testing-tool/
giúp mình với . Site của mình canho12h.com
Chân thành cảm ơn.
Mình đang ở quê nghỉ lễ nên không có máy tính để check. :)
Vậy hả bạn? mình không biết nhiều về web cái này thì vào đâu tìm để khắc phục được bạn, mong mọi người chỉ giúp.
Trân trọng!
Mình cài xong và chỉnh sửa như bạn nhưng chỉ có riêng mục “ads” là mình không có kết nối với Choose AdSense Account được(mình chưa có tài khoản ad Sense)
– Mình kiểm tra thì thấy báo 3 lỗi này nhờ bạn chỉ giúp.
www-embed-player.js:608 GET chrome-extension://enhhojjnijigcajfphajepfemndkmdlo/cast_sender.js net::ERR_FAILEDyj @ www-embed-player.js:608zj @ www-embed-player.js:609(anonymous function) @ www-embed-player.js:609c.onerror @ www-embed-player.js:607
www-embed-player.js:608 GET chrome-extension://fmfcbgogabcbclcofgocippekhfcmgfj/cast_sender.js net::ERR_FAILEDyj @ www-embed-player.js:608zj @ www-embed-player.js:609(anonymous function) @ www-embed-player.js:609c.onerror @ www-embed-player.js:607
www-embed-player.js:610 GET chrome-extension://fjhoaacokmgbjemoflkofnenfaiekifl/cast_sender.js net::ERR_FAILED
Cái này là lỗi JS mà. Đâu phải lỗi cấu trúc giao diện AMP? :P
Trong Google Webmaster báo lỗi AMP của trang này
http://2tgroup.com.vn/contact/amp/
Lỗi cú pháp không xác định và Lỗi trong schema.org Article
Sửa như thế nào đây anh Hiếu ?
Đây là pages nên mình cũng không biết tùy chỉnh lại như thế nào luôn :3
Cái này là lỗi dữ liệu có cấu trúc (Structured Data) rồi. Bạn thử dùng plugin này https://wordpress.org/plugins/all-in-one-schemaorg-rich-snippets/ xem có khắc phục được không. :P
Mình có làm theo bạn mà vào xem web trên moblie chưa hiện giao diện như demo.
Nó không tự động redirect mà Google sẽ hiển thị link AMP trên kết quả tìm kiếm nhé. Người dùng sẽ click vào link AMP để truy cập vào site của bạn. Còn bình thường, nếu muốn kiểm tra giao diện AMP trông như thế nào, bạn thêm /amp vào sau link bài viết là được. :)
Thêm vài cái khi mình cài đặt không biết Hiếu có gặp chưa.
– Giao diện AMP với cái plugin facebook amp làm nặng khi viết bài, mình mỗi lần đưa ảnh hay gì vào bài viết là phải chờ (gỡ ra chạy vèo vèo) – Nên giờ mình nghĩ chỉ cài cái amp của automatic thui.
– Ai dùng Plugin kkstar để thêm vote vào google thì các bạn lấy plugin chèn quảng cáo rồi bỏ code kkstar vào bải viết sẽ không bị lỗi thuộc tính trong trang amp.
:D – Bài viết mang tính đóng góp hjhj
Xin phản hồi 2 thắc mắc của bạn như sau:
1. Đúng là plugin của PageFrog này có làm ảnh hưởng đến hiệu suất của blog/ website, thậm chí là conflict với một số theme, nhưng ngược lại, nó khắc phục được hoàn toàn các lỗi còn tồn tại trên plugin AMP của Automattic. Hơn nữa, nó hỗ trợ cả việc chèn quảng cáo AdSense, Google Analytics vào giao diện AMP + hỗ trợ Instant Articles. :)
2. Đây là một ý kiến hay. Cảm ơn bạn đã góp ý. :D
Chèn cái KK đó cụ thể như nào vậy anh Hiếu. Chỉ em rõ rõ 1 tí với ^^!
Mình có viết bài hướng dẫn cụ thể rồi mà. Bạn search thử sẽ thấy nhé. :P
Ý em là chèn trong cái AMP này này chứ ko phải là chèn ở trang bt a ơi
ý 2 là điều mà mình bị kẹt bửa giờ. Bạn hoặc a Hiếu có thể nói rõ hơn được không? plugin quảng cáo gì vậy ạ?
Cái này mình sẽ viết bài hướng dẫn cụ thể nhé. Mình đã tìm ra giải pháp khắc phục vấn đề kk Star Ratings trong giao diện AMP rồi. :P
Sao em tưởng bác bảo cần cài thêm cái gi quan trọng nữa mà? Nếu chỉ cần cài thêm cái plugin kia thì trước đó em làm đúng mà?http://vuvanhon.com/huong-dan-cai-trang-danh-cho-thiet-bi-di-dong-amp.html
:) Phần quan trọng nhất của plugin này là Settings nhưng bạn lại bỏ qua mất. :D
Ủa thím! Cái này em chưa hiểu lắm, tức là khi nó thấy người dùng sử dụng mạng dữ liệu chậm thì nó tự chuyển hướng qua link này, hay nó index cái link này lên luôn =.=! Hay bla bla :3
Google nó sẽ index trang AMP và hiển thị link truy cập vào nó trong trường hợp cần thiết (mạng chậm chẳng hạn). :P
Sao em chọn hình ảnh đại diện rồi mà nó không hiện nhỉ :|
Thử vào phần Settings thiết lập lại một lần nữa xem sao? Nếu không được thì chắc do chú ăn ở không tốt rồi. :D :P
Mấy cái trước tại ăn ở rồi không lẽ lần này tại ăn ở nữa :(((((( :V
Ăn ở không tốt thì tất cả mọi việc đều không thuận lợi thôi. :D Đùa chứ có thể nó bị conflict với plugin nào đó rồi. :P
Ủa thím, gia hạn host gửi tiền xong có cần thông báo gì không thím :()
Có chứ. Không thông báo với nhân viên kinh doanh thì làm sao họ biết là ai chuyển tiền và gia hạn cho dịch vụ nào. :P
Online chat được không thím, chụp hình gửi qua mệt quá =.=!
Được. Nhân tiện add Skype kaiderella73 anh có chút việc nhờ chú nhé. :P
À được rồi, em hỏi ngu chút, sao nhiều người xài skype thế nhỉ :3
Dùng cho bớt “ngu” đó. :D :P
Đù, :))) Bày đặt xài ngoặc kép :3
(y) hay lắm ad