Hướng dẫn cài đặt và cấu hình AMP cho WordPress từ A đến Z

8
302

Vào lúc này, Google AMP đã chính thức hiển thị ở Việt Nam, đã được Google cập nhật vào ngày 24/02/2016. Hãy xem bài viết Google AMP là gì nếu bạn chưa có thông tin gì về Google AMP. Vậy, làm thế nào để cài đặt và cấu hình Google AMP cho WordPress ? Ở bài viết này, mình sẽ hướng dẫn các bạn làm điều này.

Định nghĩa sơ lược về Google AMP

Google AMP là viết tắt của từ Accelerated Pages Mobile hiểu đơn giản là trang tăng tốc dành cho điện thoại di động, Google đã cập nhật tính năng Google AMPWebmaster Tool và khuyên Webmaster nên cài đặt. Google luôn hướng tới người dùng nên luôn mong muốn tạo ra một sản phẩm tối ưu nhất trên thiết bị di động khi mà ngày nay smarphone truy cập website ngang ngữa máy tính.

google-amp-blog-image-1024x482

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

Như bạn đã biết WordPress là mã nguồn mở và có rất nhiều Plugin hỗ trợ quá trình làm Web, lần này cũng không ngoại lệ khi Google Update AMP thì các lập trình viên đã tạo ra các Plugin giúp bạn làm điều nay. Theo như mình được biết, thì hiện tại đã có 2 cách cài đặt Google AMP cho WordPress, nên mình sẽ gộp 2 cách trong 1 bài viết này luôn cho thuận tiện.

Cài đặt AMP với plugin có sẵn trên WordPress.Org

Bước 1: Cài đặt các Plugin hỗ trợ AMP

Xem thêm bài viếtHướng dẫn tìm và cài đặt plugin cho WordPress 4.6.1

Bước 2: Cấu hình Plugin

Truy cập vào Mobile Formats ở đây bạn có thể cài đặt những thông số khi khách truy cập vào giao diện AMP của Website bạn. Bạn tự thiết lập nhé.

cai-dat-google-amp-wordpress

Tiếp theo bạn vào SEO -> AMP để kích hoạt AMP cho bài viết, cho trang hoặc cả 2 như hình dưới.

kich-hoat-amp-wordpress

Nhớ bấm Lưu thay đổi nhé. Vậy là xong, bạn đã cài đặt thành công, để kiểm tra thì bạn vào link web của bạn và thêm /amp vào cuối (như ví dụ bên dưới) và xem nó báo lỗi gì không? Nếu không báo lỗi thì bạn đã thành công.

Cách cài đặt này khá đơn giản nhưng còn xuất hiện khá nhiều lỗi mà bạn phải fix. Nếu gặp lỗi thì bạn để lại comment để mình và mọi người hỗ trợ nhé.

Xem thêm: Hướng dẫn kiểm tra Google AMP cho WordPress

Cài đặt và cấu hình plugin WP AMP vào WordPress của bạn

Đầu tiên, bạn cần phải mua plugin WP AMP với giá là 18$.

Sau khi mua plugin xong, bạn tải về máy tính cá nhân. Tiếp theo, bạn sẽ phải cài đặt và kích hoạt plugin WP AMP này. Nếu bạn là người mới, thì hãy xem thêm bài viết hướng dẫn tìm và cài đặt plugin wordpress nhé.

Sau khi đã kích hoạt xong, bạn truy cập vào Settings -> WP AMP. Tại đây, các bạn lần lượt cấu hình các phần như sau.

cau-hinh-wp-amp-tab-general

  • Google Analytics Code: nhập mã tracking Google Analytics của bạn.
  • Redirect Mobile Users: tự động chuyển hướng người dùng di động sang giao diện AMP.
  • AMP Content Max-Width: thiết lập độ rộng tối đa của giao diện AMP.
  • Publisher Logo for Schema.org: upload logo của bạn, sử dụng để đánh dấu dữ liệu Schema.org.
  • Default Image for Shema.org: upload hình ảnh mặc định, sử dụng để đánh dấu dữ liệu Schema.org.
  • Post Types: lựa chọn các loại nội dung bạn muốn tạo giao diện AMP.
  • Archives: lựa chọn các loại trang lưu trữ mà bạn muốn tạo giao diện AMP.
  • Enable Ads: kích hoạt tính năng hiển thị quảng cáo AdSense trên giao diện AMP.
  • Compatibility mode: kích hoạt tính năng cho phép loại bỏ code của các plugin khác, giúp khắc phục lỗi giao diện AMP trên Google Webmasters.

Tab Appearance

  • Colors :

cau-hinh-wp-amp-tab-appearence-colors

  • Header Background: chọn màu nền header.
  • Footer Background: chọn màu nền footer.
  • Page Background: chọn màu nền trang.
  • Main Title: chọn màu chữ của tiêu đề.
  • Link Text: chọn màu cho link.
  • Main Text: chọn màu chữ cho phần nội dung.
  • Header Text: chọn màu chữ header.
  • Footer Text: chọn màu chữ footer.
  • Fonts :

cau-hinh-wp-amp-tab-appearence-fonts

Phần này cho phép bạn lựa chọn font chữ cho logo, menu, tiêu đề, post peta, phần nội dung và footer.

  • Header :

cau-hinh-wp-amp-tab-appearence-headr

[su_list icon=”icon: plus”]
  • Header Menu: thiết lập menu cho giao diện AMP.
  • Logo Type: lựa chọn loại logo (chữ, hình ảnh, cả chữ và hình ảnh).
  • Logo Text: logo bằng chữ.
  • Logo Icon: logo bằng hình ảnh.
[/su_list]
  • Footer :

cau-hinh-wp-amp-tab-appearence-footer

Phần này cho phép bạn chèn nội dung cho footer, hỗ trợ code HTML.

  • Post Meta Data :

cau-hinh-wp-amp-tab-appearence-post-meta-data

  • Author: hiển thị tên tác giả bài viết.
  • Categories: hiển thị chuyên mục của bài viết.
  • Tags: hiển thị thẻ của bài viết.
  • Date Format: lựa chọn kiểu hiển thị thời gian.
  • Social Share Buttons :

cau-hinh-wp-amp-tab-appearence-social-share-button

Phần này cho phép bạn lựa chọn các nút chia sẻ mạng xã hội sẽ được hiển thị trong giao diện AMP.

Tab Template

  • Posts :

cau-hinh-wp-amp-tab-templates-posts

  • Ad Block #1: vị trí quảng cáo thứ 1.
  • Post Title: tiêu đề bài viết.
  • Featured Image: hình ảnh nổi bật của bài viết.
  • Post Meta Block: hiển thị post meta.
  • Post Content: nội dung bài viết.
  • Social Share Buttons: hiển thị nút chia sẻ mạng xã hội.
  • Related Posts: hiển thị bài viết liên quan.
  • Ad Block #2: vị trí quảng cáo thứ 2.

Các bạn có thể kéo – thả để thay đổi vị trí của các mục trong giao diện AMP.

  • 404 Page:

cau-hinh-wp-amp-tab-templates-404-page

  • 404 Page Title: tiêu đề trang 404.
  • 404 Page Content: nội dung mô tả cho trang 404.
  • Search Form: kích hoạt khung tìm kiếm cho trang 404.
  • Pages :

cau-hinh-wp-amp-tab-templates-pages

Các mục tương tự như phần Posts. Các bạn cũng có thể kéo – thả để thay đổi vị trí của chúng.

  • Search :

cau-hinh-wp-amp-tab-templates-search

  • Page Title: tiêu đề trang tìm kiếm.
  • Content Block: hiển thị ảnh thumbnail và post meta trong trang tìm kiếm.

Các bạn có thể kéo thả để thay đổi vị trí của các thành phần.

  • Blog page:

cau-hinh-wp-amp-tab-templates-blog-page

  • Blog Page Title: tiêu đề trang blog.
  • Content Block: hiển thị ảnh thumbnail và post meta trong trang blog.
  • Archives :

cau-hinh-wp-amp-tab-templates-archives

  • Archive Title: tiêu đề trang lưu trữ.
  • Description: mô tả cho trang lưu trữ.
  • Content Block: hiển thị ảnh thumbnail và post meta trong trang lưu trữ.

Các bạn có thể kéo thả để thay đổi vị trí của các thành phần.

Tab Extra CSS

cau-hinh-wp-amp-tab-extra-css

Nếu muốn tùy chỉnh CSS của giao diện AMP, bạn có thể bổ sung code vào phần này.

 

cau-hinh-wp-amp-tab-ads

Nếu muốn hiển thị quảng cáo AdSense trong giao diện AMP, các bạn sẽ phải thiết lập trong tab Ads.

  • Height: chiều cao của quảng cáo.
  • Width: độ rộng của quảng cáo.
  • Type: loại quảng cáo.
  • AdSense Client: ID AdSense của bạn.
  • Data Slot: ID quảng cáo của bạn.

Tab WooCommerce

Tab này dành riêng cho những bạn có sử dụng plugin WooCommerce và chỉ khi bạn cài WooCommercethì nó mới xuất hiện.

– Product Page

cau-hinh-wp-amp-tab-woocommerce

  • Image: hiển thị hình ảnh sản phẩm.
  • Title: tiêu đề của sản phẩm.
  • SKU: hiển thị Stock Keeping Unit.
  • Add To Cart Block: hiển thị giá, trạng thái kho hàng và nút giỏ hàng.
  • Categories: hiển thị chuyên mục của sản phẩm.
  • Tags: hiển thị thẻ của sản phẩm.
  • Short Description: hiển thị mô tả ngắn về sản phẩm.
  • Description: hiển thị phần mô tả của sản phẩm.
  • Sociak Share Buttons: hiển thị nút chia sẻ mạng xã hội.

Các bạn có thể kéo thả để thay đổi vị trí của các thành phần.

– Shop Page

cau-hinh-wp-amp-tab-woocommerce-shop-page

  • Image: hiển thị hình ảnh của sản phẩm.
  • Short Description: hiển thị mô tả ngắn về sản phẩm.
  • Add To Cart Block: hiển thị giá sản phẩm và nút thêm vào giỏ hàng.

Các bạn có thể kéo thả để thay đổi vị trí của các thành phần.

– Product Archives

cau-hinh-wp-amp-tab-woocommerce-product-archies

Các thiết lập của phần này tương tự như phần Shop Page.

– Add to Cart

cau-hinh-wp-amp-tab-woocommerce-add-to-cart

  • Add to Cart Text: tùy chỉnh nút Add To Cart trên giao diện AMP.
  • Add to Cart Behavior: lựa chọn hành động khi ai đó bấm vào nút Add To Cart.

 

Trên đây là hướng dẫn chi tiết về cách cài đặt plugin WP AMP. Hy vọng nó sẽ giúp các bạn nhanh chóng làm quen với plugin này một cách dễ dàng hơn. Ở bài viết tiếp theo, mình sẽ hướng dẫn cách kiểm tra Google AMP đã hoạt động hay chưa.

Hướng dẫn cài đặt và cấu hình AMP cho WordPress từ A đến Z
5 (100%) 1 vote

Nếu yêu thích LocDang.Com thì hãy đăng ký theo dõi để nhận tin tức mới nhất và đừng quên Like và Follow mình trên Facebook Twitter nhé.
Để lại ý kiến nhận xét tại đây !!

Có 8 bình luận cho bài viết này

    • Xin chào, khách