Hướng dẫn cài đặt AMP cho WordPress

Hướng dẫn cài đặt & SEO AMP cho WordPress

Written by takisi

February 11, 2019

AMP là một chuẩn hiển thị cho các thiết bị điện thoại mới của Google. Bài đăng này giải thích AMP là gì và nhằm mục đích làm gì, hướng dẫn cài đặt AMP và SEO sao cho đúng.

AMP là gì?

AMP là viết tắt của Accelerated Mobile Pages tạm dịch là “tăng tốc cho trang di động”. Dự án này được thực hiện bởi Google như là một chuẩn mới hiển thị cho các thiết bị di động nhằm mục đích làm cho các trang trong một website được tải ngay lập tức trên điện thoại di động. Trên thực tế, tốc độ internet của nhiều người còn rất chậm, chẳng hạn những người dùng 2G & 3G trên các thiết bị di động. Từ đó mà AMP được ra đời.

Để làm cho các trang tải ngay lập tức, AMP hạn chế những gì bạn có thể làm trong các trang HTML. Nhiều thiết kế sẽ được loại bỏ theo hướng có lợi cho tốc độ. Các trang AMP giống như một phiên bản rút gọn của các trang web bình thường, nhưng chỉ chứa các nội dung quan trọng. Sau đây là một số lưu ý:

  • Một số quảng cáo sẽ hoạt động trên AMP.
  • Một số các công cụ phân tích website sẽ không hoạt động trên AMP.
  • Tất cả các nội dung ngoài không liên quan đến bài đăng, một số các liên kết đọc thêm sẽ biến mất khi chuyển sang AMP.

Trên thực tế, do về cơ bản AMP sẽ loại bỏ phần lớn các thiết kế nên thường AMP chỉ được cài đặt với các bài đăng (post). Đặc biệt nếu website của bạn chuyên về tin tức bạn cần tham khảo Các lưu ý SEO cho website tin tức và cài đặt AMP vì Google có lẽ rất quan tâm về dự án AMP, bạn cũng dễ dàng thấy đánh giá AMP đã được tích hợp trong Google Search Console.

Hướng dẫn cài đặt AMP

Tải và cài đặt plugin AMP do Automattic đội ngũ phát triển WordPress phát hành.

hướng dẫn cài đặt & SEO amp cho website wordpress

Khi bạn enable/active plugin, tất cả các URL bài đăng trên trang web của bạn sẽ có thê một phiên bản với đường dẫn /amp/. Vì vậy, bạn có thể đi đến bất kỳ bài đăng nào ở chế độ amp bằng cách thêm /amp/ vào cuối URL. Ngoài ra plugin còn thêm một thẻ meta tiêu chuẩn vào đầu các trang bình thường để Google và những người khác có thể nhận ra webiste có chế độ AMP. Bạn hãy thử bật chuẩn AMP ở bài viết này bằng cách thêm /amp/ vào cuối url của bài viết này nhé !

Chúng tôi xin dùng một ví dụ với 1 blog tin tức, bạn có thể dễ dàng so sánh giữa 2 phiên bản có và không có AMP, rất nhiều nội dung, liên kết và quảng cáo đã được loại bỏ khi bài việt bật chuẩn AMP.

Bài viết ở chế độ bình thường

Bật chuẩn/chế độ AMP

SEO với AMP như thế nào?

Rất may mắn, khi bạn đã sử dụng Plugin Yoast SEO, bạn chỉ cần cài thêm một plugin nhằm chuyển đổi các SEO từ trang thường cho phù hợp với trang AMP thông qua  Glue for Yoast SEO.

Một số cài đặt với Glue for Yoast SEO

Về mặc định, plugin AMP sẽ có các tuỳ chọn như hình bên dưới, bạn không cần phải làm gì thêm cả.

Việc cần làm là bạn hãy điều hướng sang SEO -> AMP

Một tuỳ chọn về màu chủ đạo khi website chuyển sang phiên bản AMP xuất hiện:

Tuỳ vào màu và phong cách thiết kế của website bạn, hãy biến đổi và tuỳ chỉnh màu sắc của phiên AMP phù hợp với theme của bạn nhé.

AMP một số lỗi thường gặp, chẩn đoán và khắc phục

Trong quá trình thực hiện Chúng tôi đã nhận được khá nhiều lỗi trong báo cáo AMP của Google Search Console, khi mới thực hiện AMP các bạn rất có thể sẽ gặp các lỗi tương tự và biểu đồ AMP sẽ có dạng tương tự sau:

Lỗi: Missing featured images

Lỗi này thông báo bạn đang thiếu hình đại diện. Nguồn gốc lớn nhất của vấn đề này nằm ở việc bạn không thêm ảnh đại diện (featured image) cho bài đăng, nếu bạn đã thêm hình đại diện rồi nhưng lỗi vẫn xuất hiện ở bài đăng đó thì nguyên nhân là do Schema.Plugin WordPress AMP sau khi cài đặt chỉ xuất ra các thẻ Schema.org JSON + LD mà thiếu hình ảnh đó và gây ra lỗi.

Cách khắc phục : hãy đợi thêm một thời gian vì nhiều khi đó là lỗi thu thập AMP của Google, nếu lỗi vẫn còn tiếp tục xuất hiện:

Thêm hình ảnh mặc định cho bài đăng ở phiên bản AMP với plugin Glue for Yoast SEO :

Điều hướng SEO -> AMP
Chọn mục design và đăng ảnh ở default image

Với việc chọn hình ảnh mặc định, mỗi khi xảy ra lỗi với Schema một hình ảnh thay thế cho AMP sẽ được thay thế và hạn chế tình trạng lỗi, thông thường lỗi chủ yếu nằm ở việc index của Google. Sau một thời gian nếu bạn chắc rằng các bài viết của mình đã có hình đại diện, thì bạn không cần phải lo gì cả, lỗi sẽ tự động biến mất.

Lỗi: Missing site logo

Lỗi này thông báo bạn đang thiếu logo cho trang web của mình. Lỗi này có cách giải thích tương tự như lỗi Missing featured images. Nếu bạn đã đảm bảo rằng mình đã upload logo cho website thì bạn không cần phải lo lắng, một thời gian Google sẽ index lại lần nữa và lỗi sẽ biến mất.

Cách khắc phục: trong trường hợp lỗi vẫn tiếp tục các bạn làm như sau theo ảnh:

Điều hướng SEO -> AMP
Chọn mục design và đăng ảnh ở AMP icon

Ở bài viết này chúng tôi đã loại bỏ một số lỗi không còn tồn tại nữa ở các phiên bản cập nhật mới của plugin AMPGlue for Yoast SEO. Hãy đảm bảo rằng bạn luôn cập nhật phiên bản mới nhất của 2 plugin này.

Thực nghiệm với Plugin khác

Chúng tôi cũng đã test plugin AMP for WP – Accelerated Mobile Pages với khoảng thời gian gần 6 tháng, về mặt tuỳ chỉnh, plugin này có khả năng tuỳ chỉnh cao hơn rất nhiều, đặc biệt là khả năng tự động điều hướng sang AMP (thêm /amp/ ở cuối URL) khi bạn lướt web trên thiết bị di động. Nhưng, trong suốt 6 tháng thử nghiệp, lỗi liên tục xuất hiện và rất khó để khắc phục và phải tìm đến đội ngũ support của họ, tuy nhiên bạn cần chi trả chi phí để họ khắc phục các lỗi cho bạn.

Với sự bất cập kể trên, nên chúng tôi chọn plugin AMP để giới thiệu về cài đặt và SEO AMP cho website WordPress.

Tổng kết

AMP là một chuẩn mới do Google phát triển và dần được Google biến chuẩn này trở nên quan trọng hơn. AMP giúp các bài viết của bạn được load nhanh hơn rất nhiều trên thiết bị di động với kết nối internet 2G & 3G. AMP tăng tính tập trung cho người đọc bằng việc loại bỏ các yếu tố, liên kết, quảng cáo không cần thiết và chỉ để lại nội dung chính. Bạn nên triển khai thử AMP cho website của mình đối với các bài viết (post) và càng chú trọng chuẩn này hơn nếu website của bạn chuyên về tin tức.

Tạ Trung Tín | Bài viết sử dụng 1 phần nội dung và 1 số hình ảnh của Yoast SEO.

Có thể bạn quan tâm

TOP 10 website giúp bạn học lập trình web

TOP 10 website giúp bạn học lập trình web

Nếu bạn đang muốn học lập trình web (website developer) online, thì bài viết này dành chon bạn. Sau đây là top 10 website (miễn phí & tính phí) giúp bạn học lập trình web online tốt nhất. Tại...

0 Comments