Cài đặt Google AMP chuẩn cho website WordPress

5 tháng ago, Hướng dẫn WordPress, Views
Cài đặt Google AMP chuẩn cho website WordPress

Giới thiệu về Google AMP và tầm quan trọng của việc cài đặt chuẩn cho WordPress

Google Accelerated Mobile Pages (AMP) là một dự án mã nguồn mở được thiết kế để tăng tốc độ tải trang web trên thiết bị di động. Trong bối cảnh người dùng di động ngày càng gia tăng, việc tối ưu hóa trải nghiệm người dùng trên điện thoại thông minh trở nên vô cùng quan trọng. AMP giúp cải thiện đáng kể tốc độ tải trang, giảm tỷ lệ thoát trang, và tăng thứ hạng trên kết quả tìm kiếm của Google.

Việc cài đặt Google AMP chuẩn cho website WordPress của bạn mang lại nhiều lợi ích thiết thực, bao gồm:

  • Cải thiện tốc độ tải trang trên thiết bị di động.
  • Nâng cao trải nghiệm người dùng, đặc biệt là trên các thiết bị có kết nối internet chậm.
  • Tăng khả năng hiển thị trên kết quả tìm kiếm của Google, đặc biệt là trong các khu vực AMP được ưu tiên hiển thị.
  • Giảm tỷ lệ thoát trang và tăng thời gian người dùng ở lại trên trang web.
  • Tăng lượng truy cập và doanh thu cho website (nếu có).

Các bước cài đặt Google AMP chuẩn cho WordPress

Có nhiều cách để cài đặt Google AMP cho WordPress, nhưng cách phổ biến nhất là sử dụng plugin. Dưới đây là hướng dẫn chi tiết từng bước:

1. Chọn và cài đặt plugin AMP

Có một số plugin AMP phổ biến và được đánh giá cao dành cho WordPress. Hai plugin được khuyến nghị sử dụng là:

  • Official AMP Plugin for WordPress: Plugin chính thức từ đội ngũ phát triển AMP, đảm bảo tuân thủ các tiêu chuẩn AMP mới nhất.
  • AMP for WP – Accelerated Mobile Pages: Plugin có nhiều tính năng tùy biến và hỗ trợ nhiều loại nội dung khác nhau.

Trong ví dụ này, chúng ta sẽ sử dụng “Official AMP Plugin for WordPress”. Để cài đặt, hãy thực hiện các bước sau:

  1. Đăng nhập vào trang quản trị WordPress của bạn.
  2. Truy cập mục “Plugins” -> “Add New”.
  3. Tìm kiếm “Official AMP Plugin for WordPress”.
  4. Nhấn “Install Now” và sau đó “Activate”.

2. Cấu hình plugin AMP

Sau khi kích hoạt plugin, bạn cần cấu hình để đảm bảo AMP hoạt động đúng cách. Plugin “Official AMP Plugin for WordPress” thường có cấu hình mặc định phù hợp, nhưng bạn vẫn nên kiểm tra và tùy chỉnh theo nhu cầu của mình.

Truy cập mục “AMP” trong menu quản trị WordPress. Tại đây, bạn sẽ thấy các tùy chọn cấu hình như:

  • Template Mode: Chọn chế độ hoạt động của AMP. “Standard” là chế độ khuyến nghị để tạo ra các trang AMP độc lập và thay thế hoàn toàn các trang gốc trên thiết bị di động. “Transitional” và “Reader” là các chế độ cũ hơn và có thể không tối ưu bằng.
  • Supported Templates: Chọn các loại trang bạn muốn kích hoạt AMP (ví dụ: bài viết, trang, danh mục).
  • Design: Tùy chỉnh giao diện của các trang AMP, bao gồm màu sắc, phông chữ, logo, và các yếu tố khác.
  • Analytics: Kết nối AMP với các công cụ theo dõi như Google Analytics để theo dõi hiệu suất của các trang AMP.
  • SEO: Tùy chỉnh các thiết lập SEO cho trang AMP, bao gồm thẻ meta, mô tả, và các yếu tố khác.

Hãy dành thời gian để tìm hiểu và cấu hình các tùy chọn này theo nhu cầu của bạn. Lưu ý rằng việc tùy chỉnh quá nhiều có thể ảnh hưởng đến tính tương thích của trang AMP, vì vậy hãy tuân thủ các tiêu chuẩn AMP.

3. Kiểm tra và xác thực trang AMP

Sau khi cài đặt và cấu hình plugin AMP, bạn cần kiểm tra xem các trang AMP của bạn có hợp lệ hay không. Google cung cấp một số công cụ để kiểm tra tính hợp lệ của trang AMP:

  • Google Search Console: Trong Google Search Console, bạn có thể tìm thấy báo cáo AMP để xem các lỗi và cảnh báo liên quan đến trang AMP của bạn.
  • AMP Test Tool: Truy cập https://search.google.com/test/amp và nhập URL của trang bạn muốn kiểm tra. Công cụ này sẽ hiển thị các lỗi và cảnh báo (nếu có).
  • AMP Validator Browser Extension: Cài đặt tiện ích mở rộng AMP Validator cho trình duyệt Chrome để kiểm tra tính hợp lệ của trang AMP trực tiếp trên trang web.

Nếu bạn phát hiện bất kỳ lỗi nào, hãy sửa chữa chúng theo hướng dẫn của các công cụ kiểm tra. Các lỗi thường gặp bao gồm:

  • Sử dụng các thẻ HTML không được phép trong AMP.
  • Sử dụng JavaScript không hợp lệ.
  • Thiếu các thuộc tính bắt buộc.
  • Sử dụng hình ảnh không được tối ưu hóa.

4. Tối ưu hóa nội dung cho AMP

Để đảm bảo trang AMP của bạn hoạt động tốt nhất, bạn cần tối ưu hóa nội dung theo các tiêu chuẩn AMP. Một số điều cần lưu ý:

  • Sử dụng các thẻ AMP-HTML: Thay thế các thẻ HTML truyền thống bằng các thẻ AMP tương ứng (ví dụ: <img> thành <amp-img>, <video> thành <amp-video>).
  • Tối ưu hóa hình ảnh: Sử dụng hình ảnh có kích thước phù hợp và được nén để giảm dung lượng.
  • Sử dụng CSS Inline: CSS phải được viết inline (trong thẻ <style amp-custom>) và không được vượt quá 75KB.
  • Hạn chế sử dụng JavaScript: Chỉ sử dụng JavaScript khi thực sự cần thiết và sử dụng các thành phần AMP để thay thế (ví dụ: <amp-carousel>, <amp-lightbox>).
  • Sử dụng AMP Ad: Nếu bạn hiển thị quảng cáo trên trang web, hãy sử dụng <amp-ad> để đảm bảo quảng cáo hiển thị nhanh chóng và không ảnh hưởng đến hiệu suất của trang AMP.

Các lỗi thường gặp khi cài đặt AMP và cách khắc phục

Việc cài đặt AMP có thể gặp một số khó khăn. Dưới đây là một số lỗi thường gặp và cách khắc phục:

  1. Lỗi “The attribute ‘width’ in tag ‘amp-img’ is missing or invalid” (Thiếu hoặc thuộc tính ‘width’ không hợp lệ trong thẻ ‘amp-img’): Đảm bảo rằng tất cả các thẻ <amp-img> đều có các thuộc tính width và height được xác định rõ ràng.
  2. Lỗi “The tag ‘script’ is disallowed except in specific forms” (Thẻ ‘script’ không được phép trừ khi ở các dạng cụ thể): AMP không cho phép sử dụng các thẻ <script> tùy ý. Hãy sử dụng các thành phần AMP tương ứng hoặc gỡ bỏ các đoạn mã JavaScript không cần thiết.
  3. Lỗi “CSS syntax error in tag ‘style amp-custom'” (Lỗi cú pháp CSS trong thẻ ‘style amp-custom’): Kiểm tra cú pháp CSS của bạn cẩn thận. Đảm bảo rằng bạn không sử dụng các thuộc tính CSS không được hỗ trợ trong AMP.
  4. Lỗi “Custom JavaScript is not allowed” (JavaScript tùy chỉnh không được phép): AMP hạn chế sử dụng JavaScript tùy chỉnh. Hãy cố gắng sử dụng các thành phần AMP có sẵn để thay thế.
  5. Lỗi “Canonical link is missing” (Thiếu liên kết canonical): Đảm bảo rằng mỗi trang AMP đều có một thẻ <link rel="canonical" href="URL_TRANG_GỐC"> trỏ đến trang gốc tương ứng.

Nếu bạn gặp bất kỳ lỗi nào khác, hãy tham khảo tài liệu chính thức của AMP hoặc tìm kiếm trên các diễn đàn và cộng đồng trực tuyến để được hỗ trợ.

Kết luận

Việc cài đặt Google AMP chuẩn cho website WordPress là một việc làm quan trọng để cải thiện tốc độ tải trang và trải nghiệm người dùng trên thiết bị di động. Mặc dù quá trình cài đặt có thể đòi hỏi một chút kỹ thuật, nhưng những lợi ích mà nó mang lại là rất lớn. Hãy làm theo hướng dẫn trong bài viết này để cài đặt AMP cho website của bạn và tận hưởng những lợi ích mà nó mang lại.

Chúc bạn thành công!

, , , ,

..