Bạn đã biết AMP là gì chưa? Và đang tìm cách cài đặt Google AMP trên WordPress ?
AMP sẽ giúp website bạn tải với tốc độ “Ánh Sáng” trên thiết bị di động
Người dùng sẽ có trải nghiệm tuyệt vời hơn trên website.
Và tất nhiên kéo theo là tăng lượt truy cập cho bạn.
Ngay bây giờ tôi sẽ hướng dẫn bạn cài đặt AMP trên WP.
AMP là gì?
AMP, hay Accelerated Mobile Pages là một free open-source framework, cho phép các nội dung trên các thiết bị được tải nhanh hơn. Ban đầu nó được hỗ trợ bởi các công ty công nghệ như Google và Twitter.
Nó có thể bao gồm HTML, JS, và bộ nhớ đêm. Với các tiện ích mở rộng bạn có thể tăng tốc độ tải trang với các loại nội dung khác như infographic, PDF, audio, video.
Với rất nhiều người dùng trên di động, việc đọc nội dung trên web thường bị chậm hơn.
Phần lớn các trang nhiều nội dung sẽ tốn vài giây để tải. Mặc dù các developer đã tốn bao nhiêu công sức để tăng tốc website của họ.
AMP sử dụng HTML đơn giản và limited Javascript. Điều này cho phép nội dung được host trên Google AMP Cache.
Google sau đó có thể ngay lập tức, đưa phiên bản được lưu trữ này đến người dùng.
Khi họ nhấp chuột vào đường link của bạn trong các kết quả tìm kiếm.
Điều này khá tương tự như Facebook Instant Articles .
Tuy nhiên, Instant Articles bị giới hạn chỉ trên nền tảng Facebook, cụ thể là đối với ứng dụng di động của họ.
AMP không quan trọng đó là nền tảng gì và có thể được sử dụng bởi bất cứ ứng dụng, trình duyệt hoặc web viewer nào.
Gần đây, nó được sử dụng bởi Google, Twitter, LinkedIn, Reddit và nhiều hơn nữa.
Tại sạo AMP lại quan trọng ?
AMP quan trọng vì nó giúp website bạn tải nhanh hơn.
Nâng cao trải nghiệm người dùng, và sẽ kéo họ ở lại lâu hơn trên website bạn.
Và bạn cũng biết rằng, bây giờ là thởi buổi mobile-first-index ( ưu tiên trên thiết bị di động trước).
Cho nên GG rất cọi trọng tốc độ tải trên thiết bị di động.
Biết đâu được nó sẽ là một yếu tố xếp hạng trong tương lai
Có nhất thiết phải sử dụng AMP không ?
Câu trả lời ở đây là: TÙY THUỘC VÀO BẠN!
Trước khi đưa ra câu trả lời có sử dụng AMP hay không ?
Hãy nhìn qua những ưu nhược điểm của việc sử dụng AMP.
Ưu điểm AMP
#1 Tăng tốc độ tải trang web
Điều này bạn có thể thấy ngay bằng mắt thường. Không có yếu tố thừa thãi nào trong AMP.
Phiên bản AMP rất gọn gàng, nhẹ nhàng và nhanh chóng.
Không một người dùng nào muốn phải chờ đợi.
Về cơ bản AMP sẽ giúp bạn có nhiều lượt truy cập hơn.
#2 Tăng thứ hạng trên Mobile
Mặc dù AMP không phải một trong yếu tố xếp hạng, nhưng nó lại có ảnh hưởng tích cực đến tốc độ tải trang trên thiết bị di động.
Và Google hiện đã ưu tiên hơn trên các thiết bị di động.
Cũng có khả năng GG sẽ quan tâm hơn đến AMP, và nó sẽ có tác dụng với kết quả tìm kiếm.
#3 Nâng cao hiệu suất server
Nếu bạn có rất rất nhiều lượt truy cập từ thiết bị di động.
AMP sẽ giảm tải và cải thiện hiệu suất của chúng (vì những bản cache này được lưu trên server GG).
Nhưng sẽ bạn sẽ bị một số nhược điểm ở đây ( đọc nhược điểm thứ 3)
Nhược điểm AMP
#1 Doanh thu từ quảng cáo bị giảm
Mặc dù AMP có hỗ trợ ads (hiển thị quảng cáo). Nhưng số tiền bạn kiếm được từ ads, sẽ bị ảnh hưởng nghiêm trọng.
Và nó giới hạn chỉ hỗ trợ vài nền tảng quảng cáo.
#2 Analytic sẽ gặp khó khăn hơn
AMP có hỗ trợ Google Analytics, nhưng sẽ phải dùng một tag khác.
Nó sẽ phải được triển khai trên tất cả các trang có AMP.
Sẽ mất nhiều thời gian cho việc này đó,
#3 Tốc độ tuyệt vời này đạt được là nhờ bộ nhớ đệm
Sự thật mà nói, thì GG không sử dụng bất kỳ công nghệ đặc biệt nào để web bạn load nhanh hơn,
Những gì Google làm là, lưu lại các trang AMP trong bộ nhớ đệm.
Khi có người truy cập những trang đó.
Đơn giản nó show những gì đã được lưu lại.
AMP cho phép bạn tải nhanh hơn trên các thiết bị di động, UX tốt hơn.
Nhưng bạn sẽ phải hy sinh nhiều hiệu ứng, với một giao diện rất tối giản trên mobile.
Đôi khi nó làm website bạn trở nên đơn giản và kém hấp dẫn.
Nhưng có vài câu hỏi cần đặt ra trước khi bạn quyết định cài nó.
- Bạn có đặt quảng cáo trên site không? Nếu có sẵn sàng giảm doanh thu vì AMP?
- Nhớ là việc cài đặt GG Analytics trên AMP rất mất thời gian.
- Giao diện sẽ bị lược bỏ đi một số phần.
- Và cuối cùng là: Bạn có muốn phụ thuộc vào bộ nhớ đệm của GG
Cài đặt Google AMP trên WordPress
Bạn có thể cài đặt plugin miễn phí: AMP plugin.
Hoặc sử dụng plugin trả phí: WP AMP (Hiện đây là plugin AMP tốt nhất và bán chạy nhất nhé !)
Tất nhiên là với WP AMP bạn sẽ có nhiều lựa chọn hơn với bản miễn phí. Và nó có hỗ trợ cả WooCommerce
Hãy tham khảo hướng dẫn từng bước của chúng tôi về cách cài đặt một WordPress plugin.
Xem video dưới để xem cách cài đặt AMP plugin free:
Cài đặt Google AMP với WP AMP
Mình giới thiệu một plugin AMP khác đó là WP AMP mình đang dùng.
Plugin này thì có khác biệt gì mới AMP Free kia.
Khác biệt là nó có rất nhiều tính năng xịn, để bạn có thể tùy biến trang AMP của mình đấy.
Đầu tiên các bạn cứ cài đặt plugin như bình thường, khi cài đặt thành công vào: Setting » WP AMP
Ở đây sẽ bảng điều khiển chính của plugin này:
Ở tab General này bạn sẽ thấy:
- Redirect Mobile Users – chuyển toàn bộ truy cập từ mobile sang phiên bản AMP
- AMP Content Max-Width – độ rộng tối đa trên AMP
- AMP Element Default Height – chiều cao mặc định cho các element
- Post Types – coại post sẽ được hiển thị AMP
- Archives – chọn các loại Archives
- Compatibility Mode
- Hide Forms – Ẩn form
- Hide Contact Forms – Ẩn contact form
- Enable RTL
Tiếp theo là tab Analytics, sẽ phép bạn cài những tag của GG Analytics, hay GG Tag Manager trên trang có AMP
Không lo mất dữ liệu từ nguồn truy cập từ AMP nhé.
Appreance
Tap này thì cho phép bạn thay đổi của rất nhiều phần trên trang như:
Page background, header background, text….
Template
Tab này thì cho phép bạn, thay đổi bố cục của trang AMP theo ý bạn
Hỗ trợ nhiều post type nhé: Post, Page, Search, Blog Page, Archives, 404 Page
Ở dưới là các module bạn có thể tích vào để hiện hoặc bỏ tích để ẩn chúng.
Giữ và kéo thả các module này lên xuống theo ý bạn.
Tính năng này khá hay cho phép bạn sắp xếp trang AMP.
(Vì mặc định trang AMP trong khá xấu)
Schema.org
Cái này sẽ cài đặt logo trên các trang AMP kể cả AMP Storie ( chỉ được ở định dạng jpg, png, gif thôi nhé)
Troubleshooting
Đây trang có 1 loạt câu hỏi lỗi thường gặp khi sử dụng WP AMP
Nếu bạn đang gặp lỗi nào hãy ghé qua đây để tìm hiểu thêm nhé.
Có hướng dẫn rõ ràng cho từng trường hợp đấy.
System Status
Tab này sẽ hiển thị một số thông số của hệ thống như: Server Info, PHP version, WP version…
Ads
Tab này chính là cứu cánh cho mấy bạn có đặt Ads, nhưng dùng AMP
Mặc định AMP sẽ không hiển thị Ads
Nhưng WP AMP có hỗ trợ những Ads Network sau:
Adsense, Doubleclick, và Other.
Bạn sẽ tùy chỉnh được layout, kích cỡ.
WooCommerce
Lại thêm 1 tính năng tuyệt vời nữa là hỗ trợ AMP cho WooCommerce
Trong tab sẽ cho bạn chỉnh layout các trang như: Product Page, Shop Page, Product Archives, Cart, Add to Cart
Đầy đủ tính năng hiển thị cho một trang bán hàng nha.
Như show ảnh sản phẩm, button, title, sku, rating, add to cart block…
Trên là toàn bộ các tính năng của WP AMP – Accelerated Mobile Pages for WordPress and WooCommerce.
Không chỉ nhiều tính năng, mà nó còn hỗ trợ rất nhiều thứ trên AMP mặc định không có.
Kiểm tra xem Google AMP đã hoạt động chưa
Sau khi bạn cài đặt AMP hãy truy cập vào Google AMP Test Tool của GG để kiểm tra
Chỉ cần điền url vào và bấm Test URL
*Lưu ý: Nhớ ghi đúng URL của trang AMP, thường URL sẽ có thêm đuôi /amp
Sau đó nó trả lại kết quả như này là thành công.
Ở dưới nó sẽ gợi ý thêm các dự liệu cấu trúc bạn còn thiếu.
Bấm vào để xem cái nào thiếu thì bổ sung nhé.
(ở đây mình có thiếu dữ liệu về logo image).
Kết
Vậy là mình đã giải thích AMP là gì? Và những ưu nhược điểm của AMP.
Hy vọng sau bài này bạn sẽ biết cách cài đặt Google AMP. Mình khuyên các bạn nên dùng WP AMP, vì hiện nó đang là một trong những plugin hàng đầu về AMP và được update liên tục.
tức là nó sẽ tính năng thu thập dữ liệu của analytic hả thớt ơi
là Google Analytics đó bạn.
Chào bạn, cái AMP này nó không có cài đặt cho trang chủ đúng không bạn và sản phẩm hình như không ăn AMP. Web mình là https://shopafamily.com .Bạn xem qua giúp mình nhé. Cám ơn
bạn tham khảo thằng này nhé tốt hơn https://ampforwp.com/
Mình cài và báo thành công rồi nhưng trong WMT nó có báo: Warning: Image size smaller than recommended size.
Khắc phục thế nào bạn nhỉ. Ko biết có phải hình thumb nhỏ quá ko 🙁
Như nó ghi đó bạn, hình ảnh bé quá :D. Đổi lại kích cỡ ảnh đi
Sao mình cài cho https://danhbashop.com/ nhưng sao check lỗi ta
Check lỗi gì nhỉ bạn.
Cái này mình chỉ cần tick bỏ và gỡ plugin ra thì nó tự bỏ AMP đi hả anh?
Đúng rồi bạn. deactive plugin là mất AMP
Em thấy anh cũng đang dùng Plugin này :p mà nếu mình disable pluign này đi thì Plugin nó nó có auto 301 về url gốc không anh, em có thử tick bỏ cái AMP product đi thì nó tự động chuyển về url gốc, h em tick bỏ cái post đi thì sợ nó 404 ghê, tại url cũng nhiều 😛 😛 có sao không anh nhỉ? nhiều blog như wpbegin hay wp canban nói là phải redirect tránh lỗi 404 (chắc mỗi plugin cơ chế khác nhau), không biết plugin này như thế nào nhỉ, có cần phải… Đọc thêm »
Để 1 thời gian là nó sẽ hết, còn không thì bạn có thể redirect. (người dùng qua điện thoại ít quá thì cũng chả cần để ý đâu)
Cảm ơn ad đã chia sẻ,cá nhân em thấy Accelerated Mobile Pages có vè nhiều chức năng hơn ( đo lường, quảng cáo, tùy biến css) bản pro của nó có page buider, popup các kiểu mà em không có tiền 😀
Bạn đánh giá giúp mình xem web đã chuẩn chưa với. website: https://xedapdanang.vn cảm ơn các bạn
Cái này thì bạn tự đánh giá thôi nhé, mình không giúp bạn được phần này rồi
Rất cảm ơn bạn đã có hướng dẫn tuyệt vời. Trang web của mình là https://sagoxa.vn đã test google thành công amp. Nhưng có điều là khi mình sửa ở trên desktop rồi, sao trên mobile không cập nhật thay đổi. Mình đã xóa cache đi và thử không thấy thay đổi gì.
Bác xem như trang https://caonguavn.com/ của em liệu có phải cài AMP không? Chỉ ngại web bán hàng cài vào ko ổn.
Site đã có giao diện di động ngon lành rồi!
Chào anh, em cài plugin amp for wp thấy nó rất hay, cài trên các web khác không sao, web em mua jannah bên anh và cài thêm 1 số plugin khác như litespeed, wordfence security … thì có xảy ra lỗi font chữ menu toàn bộ AMP, các chữ khác bình thường.
Ảnh minh họa:
Link AMP minh họa: https://trangtuyensinh.vn/bo-so-gay-cho-dung-gan-50-don-vi-to-chuc-thi-cap-chung-chi-ngoai-ngu-tin-hoc.html?amp
Em mò mãi ko ra lỗi ở chỗ nào
Cảm ơn bài viết của anh nhưng khi em cài WP AMP vào thì nó làm phần điểm SEO của Yoast mất đi. Em không biết mình sẽ fix lại bằng cách nào ạ? Mong nhận được phản hồi từ anh. Em cảm ơn 😆
Mình có cài bằng plugin AMP nhưng khi check thì nó báo AMP not submited: https://thuthuatdigitalmarketing.com/ mặc dù thấy website đã chạy lẹ hơn trên mobile
Mình thấy bạn cài thành công rồi đó 🙂
mua plugin amp tại thedevkit có an toàn và uy tín không ạ ?
Mình đang dùng 2 năm nay chưa có vấn đề gì 🙂
Mình có vừa cài AMP cho site https://marketingai.admicro.vn nhưng cho mình hỏi làm thế nào để cài google analytics cho các trang AMP ạ? e cảm ơn
Bạn đọc tài liệu này nhé:
https://developers.google.com/analytics/devguides/collection/amp-analytics
Trước mình có cài amp trên site này https://tackexinh.com vừa rùi có gỡ plugin amp k sử dụng nữa, nhưng sao mình để 2 hôm rùi mà truy cập vào mobile vẫn là giao diện amp ạ
Đợi thêm mấy ngày nữa nhé bạn.
Pulgin nặng quá bác ơi. Vào setup quay hoài ko dc, thử cả site đang xài host và site xài VPS
Mình đang dùng thấy cũng bình thường 🙂
Mình mua trên thedevkit . Không biết bị lỗi gì hay xung đột gì ko , web mới build theme flatsome , chỉ mới cài Woo và Yoast seo
Có gì bạn cứ qua bên kia support nhé! Còn mỗi website một môi trường khác nhau, bạn có thể cài trên local để test 🙂
Mình đang cài cho trang của mình http://taxi24h.net mà sao khó quá.
Bạn ơi, đã từng cài AMP trên website của mình là https://kenh93.com/ , tuy nhiên mình đã gỡ bỏ Plugin đó nhưng xem trên mobile vẫn giao diện AMP nhỉ.
Cảm ơn bạn, mình đã cài đặt thành công cho site của mình