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?
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.