AMP là gì ? Cài đặt Google AMP cho wordpress

Bạn có muốn tốc độ tải trang trên blog hay website của bạn vù vù không ?. AMP chính là giải pháp mà Google đưa ra. Vậy AMP là gì ?. Tại sao chúng ta nên sử dụng nó cho trang web wordpress của mình. Hãy cùng mình tìm hiểu rõ hơn trong bài viết này để biết được AMP là gì.

AMP là gì ?

Hiểu như thế này. AMP là một ý tưởng được đưa ra nhằm mục đích tối ưu những nội dung được cung cấp trên thiết bị di động. Hay nói cách khác thì AMP chính là giao diện dành riêng cho thiết bị di động. Khi sử dụng AMP, tốc độ tải trang rất nhanh, từ đó có thể cải thiện được lượng người truy cập vào website hay blog của bạn thông qua các thiết bị di động. Đến đây bạn đã biết AMP là gì rồi đúng không nào.

Chưa dừng lại ở đó, một thông tin rất tốt đối với website hay blog sử dụng mã nguồn wordpress. Để có được giao diện AMP, bạn chỉ cần sử dụng plugin. Việc cài đặt rất đơn giản, chỉ một vài thao tác nhỏ thì website wordpress của bạn sẽ có ngay một giao diện dành cho thiết bị di động với plugin AMP này.

Ưu và nhược điểm

Ưu điểm: Tạo một trang dành cho thiết bị di động, tối ưu và tăng tốc tối đa tốc độ tải trang. Làm cho trải nghiệm người dùng khi truy cập trang web của bạn trang thiết bị di động được tốt hơn.

Nhược điểm: Do để tăng tốc độ tải trang một cách tốt nhất, AMP sẽ hạn chế tối đa HTML, JavaScript và CSS. Hạn chế người quản trị thêm các tính năng vào giao diện dành cho di động của trang web.

Vậy thật ra đến đây ta vẫn chưa rõ được AMP là gì, và giao diện của nó như thế nào, thì hãy cùng mình đến tiếp phần tiếp theo sẽ được trình bày cụ thể phía dưới đây.

Tải và cài đặt plugin AMP

amp là gì ?

Đầu tiên bạn chọn Plugin –> Add New, tìm tên AMP của nhà cung cấp Automatic. Chọn Install Now đợi tải về rồi chọn Active để kích hoạt.

amp là gì

Sau đó bạn chọn Appearance –> AMP để mở plugin.

amp là gì ? cách tải và cài đặt amp

Như bạn thấy sau khi mở plugin AMP. Thì đây là giao diện để ta tùy chỉnh giao diện.

  • Header Text Color: Chọn màu chữ cho phần header cho giao diện AMP.
  • Header Background & Link Color: Chọn màu nền cho header giao diện AMP.
  • Color Scheme: gồm có LightDark, chọn màu sáng hay tối cho phần hiển thị bài viết cho AMP.

Sau khi tùy chỉnh như vậy xong, bạn chọn “Save Changes” ở phía trên để lưu lại.

Bây giờ chúng ta ra ngoài trang chủ hay một trang web nào đó trong website của mình và kiểm tra thử đã có chưa nhé.

Bằng cách như sau: Bạn truy cập vào một trang cụ thể nào đó, sau đó thêm đuôi /amp/ vào phía cuối URL để kiểm tra.

VD như thế này

https://vntien.com/wordpress-4-7-co-gi-moi-va-hap-dan.html/amp/

Và kết quả như hình dưới đây.

amp là gì

Chưa hết, bây giờ bạn nhấn F12 trên bàn phím lên. Mở qua mục Console để kiểm tra, xem có thông báo như hình dưới đây không nhé.

amp là gì ? cài đặt amp cho wordpress

Nếu hiển thị như vậy thì trang web của bạn đã có giao diện AMP rồi đấy.

Lỗi 404

Đến đây sẽ có một số trường hợp bị lỗi 404. Để khắc phục lỗi này, bạn chỉ cần vào phần Setting –> Permalinks trong trang quản trị wordpress. Chọn “Save Changes”, nhớ là chỉ lưu lại thôi nhé, đừng chỉnh sửa bất kì một cái gì trong phần này cả. Sau đó chúng ta ra lại trang để kiểm tra đã hết lỗi chưa.

Tùy chỉnh nhiều hơn cho giao diện AMP

Nếu bạn đang sử dụng plugin Yoast SEO. Bạn có thể tải thêm plugin Glue for Yoast SEO & AMP để có thể tùy chỉnh thêm giao diện cho AMP. Sau khi cài đặt và kích hoạt, ta mở plugin lên.

amp là gì ? tải và cài đặt amp

Dưới đây là giao diện của plugin. Tại đây có 3 mục: Post, Design, Analytics. Chúng ta sẽ tùy chỉnh cho từng mục.

Post types

amp là gì ? cách cài đặt amp

Chúng ta sẽ Enabled cho PostsPages. Còn Media thì chọn là Disabled. Sau đó chọn “Save Changes” để lưu lại cài đặt.

Design

tùy chỉnh giao diện amp

Tại đây mình sẽ giải thích các mục bạn cần thiết lập như sau:

Images

  • AMP icon: Tức là một biểu tượng nhỏ sẽ hiển thị phía bên trái trên phần header của giao diện AMP đấy. Như cái này đây nè. Lựa chọn Upload Image, có thể chọn từ thư viện hoặc tải từ máy tính lên. Kích thước ảnh yêu cầu tối thiểu là 32×32 pixel nha.

amp là gì, giao diện amp cho wordpress

  • Default Images: Mục này được sử dụng cho trường hợp nếu như bài viết của bạn không có Featured Image (hình ảnh đại diện). Thì nó sẽ hiển thị ảnh mà bạn đã tải lên và sẽ mặc định cho tất cả những bài viết không có hình ảnh mặc định đó. Featured Image giống như thế này nè các bạn.

cài đặt giao diện di động cho wordpress

Content colors

  • AMP header color: Chọn màu nền cho phần header
  • Title color: Chọn màu cho tiêu đề trang.
  • Text color: chọn màu chữ cho trang.
  • Post meta info color: chọn màu cho các thông tin như ngày tháng năm, author…

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

Link

  • Text color: Màu chữ của những đường link được chèn vào trong trang.
  • Hovor color: Màu của chữ khi rê chuột vào các đường link đó.
  • Underline/No Underline: gạch dưới và không gạch dưới đường link

Block Quotes

  • Text color: Màu chữ trên các khối hay button chia sẻ …
  • Background color: Màu nền các khối hay button…
  • Border color: Màu đường viền của các khối…

Extra CSS

Thêm các tùy chỉnh bằng CSS để tùy chỉnh hay trang trí thêm giao diện cho AMP.

Extra code

giao diện amp

Cho phép thêm các thẻ meta hay thẻ link vào <head></head> của giao diện.

Như vậy sau khi đã thiết lập hết các mục tại phần Design, bạn chọn “Save Changes” để lưu lại.

Analytics

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

Phần này bạn có thể thêm tracking code theo của Analytics vào để theo dõi các số liệu thống kê cho wordpress. Sau đó chọn “Save Changes” để lưu lại.

Cuối cùng ra ngoài  thêm đuôi /amp/ phía sau URL của trang để kiểm tra lại và tận hưởng thành quả của mình.

Kiểm tra AMP trên Google Search Console

Để xem các trang AMP trên website của bạn có được lập chỉ mục hay không, ít hay nhiều, hay chỉ đơn giản là xem có lỗi gì hay không. Thì ta có thể truy cập Google Search Console để kiểm tra.

tăng tốc cho website

Tại mục Giao diện tìm kiếm (Appearance) –> Trang đã tối ưu cho thiết bị di động (Accelerated Mobile Pages).

Nếu vào đến đây mà thấy như hình trên đây thì cũng đừng lo lắng gì hết nhé. Vì Google cần thời gian để lập chỉ mục các trang AMP trên website của bạn. Sau đó nó sẽ hiển thị dữ liệu.

Lời kết

Như vậy là quá trình cài đặt plugin AMP đến đây xem như thành công, đến đây chắc hẳn bạn đã biết AMP là gì rồi nhỉ. Trên đây là một số hướng dẫn của mình về cách cài đặt và sử dụng plugin để tạo trang AMP cho wordpress. Còn bạn thì sao ?. Bạn đã có một giao diện trên điện thoại cho trang web của mình chưa. Nếu chưa, thì hãy thực hiện ngay đi nhé.

AMP là gì ? Cài đặt Google AMP cho wordpress
5 (100%) 1 vote

Bài viết liên quan Bài viết cùng tác giả

1 Comment

  1. Ur.My nói

    A lot of thanks for all your labor on this web page. My mom loves conducting internet research and it’s
    really easy to understand why. Most of us know all about the powerful way you
    provide both interesting and useful thoughts through your web site and encourage response from other people about this matter so my daughter is certainly learning
    a lot of things. Have fun with the remaining portion of the year.

    You’re the one doing a splendid job.

Leave A Reply

Phần bình luận được kiểm duyệt bởi Admin. Vì vậy khi sử dụng bình luận, bạn vui lòng không viết từ khóa vào mục "Tên của bạn". Rất cảm ơn và mong bạn thông cảm về sự bất tiện này.

ĐĂNG KÝ NHẬN BẢN TIN

Khi bạn đăng ký, bạn sẽ nhận được thông báo từ VNTIEN Blog khi có bài viết mới. Các thủ thuật cũng như hình thức kiếm tiền online hiệu quả, an toàn. Ngoài ra còn rất nhiều quà tặng cũng như Deal Hot hấp dẫn được mình cập nhật thường xuyên

%d bloggers like this: