AMP là gì? Hướng dẫn cài đặt AMP cho website WordPress

Đỗ Đức Đình Đạt 29/12/2020 422 lượt xem

 

Google AMP giúp tăng trải nghiệm người dùng Mobile, từ đó giúp trang của bạn tiếp cận được nhiều khách hàng tiềm năng và tăng thứ hạng tốt hơn.

Google AMP là gì?

AMP viết tắt của Accelerated Mobile Pages là trang tăng tốc dành cho thiết bị di động của mỗi website. Google AMP là công nghệ mã nguồn mở giúp tăng tốc độ tải trang trên di động mà vẫn bắt mắt, ngay cả khi mạng chậm. Từ đó làm tăng lượt truy cập, click, tương tác của người dùng trên mobile. Hãy cùng Mắt Bão tìm hiểu những kỹ thuật được áp dụng trong Google AMP là gì nhé!

AMP là gì
AMP là mã nguồn mở giúp tăng tốc độ tải trang, từ đó tăng tương tác cho website trên thiết bị di động

Kỹ thuật mà Google AMP áp dụng là gì?

  • Kỹ thuật lazy loading image: đây là kỹ thuật làm trì hoãn việc tải hình ảnh cho đến khi người dùng thật sự cần xem nó. Ví dụ: hình ảnh chỉ được load khi người dùng cuộn trang đến đúng vị trí có hình đó. Cách này sẽ giảm thiểu lượng tài nguyên thừa tải lên web. Từ đó làm tăng tốc độ tải trang.
  • Kỹ thuật tải javascript bất đồng bộ async: Website có thể chạy đoạn code, upload dữ liệu phía dưới. Dù phần dữ liệu phía trên chưa được xử lý đầy đủ. Bằng cách này, người dùng sẽ giảm được thời gian chờ đợi khi tải trang.
  • Kỹ thuật CDN để javascript nhanh chóngCDN (Content Delivery Network) là hệ thống máy chủ được đặt ở nhiều vị trí địa lý khác nhau trên toàn cầu. Chúng có nhiệm vụ truyền tải nội dung từ một nguồn đến với người dùng nhanh chóng hơn nhờ cơ chế cache.

AMP hiển thị trên Google Search như thế nào?

Nếu bạn search bằng thiết bị di động, những website có Google AMP sẽ xuất hiện trên kết quả tìm kiếm Google với biểu tượng tia sét và dòng chữ AMP bên cạnh đường link như hình bên dưới:

Trang AMP có biểu tượng là tia sét và dòng chữ AMP bên cạnh
Trang AMP có biểu tượng là tia sét và dòng chữ AMP bên cạnh

Tiếp đó, khi đã nhấp chuột truy cập vào link, nội dung AMP sẽ hiển thị theo một trong hai dạng như sau:

  • Trình xem AMP của GoogleĐây là dạng mặc định để Google lưu trữ và phân phối nội dung AMP đến người dùng di động, giúp tạo ra trải nghiệm truy cập tốt hơn.
  • Signed exchange: Công nghệ này cho phép trình duyệt trả về URL là đường link gốc xuất bản nội dung.

Trạng thái AMP hiển thị trong Google Console

Google Search Console  trước đây là Google Webmasters Tools. Đây là nơi bạn có thể nắm được trạng thái AMP của mình. Công cụ này sẽ cung cấp danh sách các trang AMP được lập chỉ mục thành công và các lỗi AMP phát sinh trên website của bạn.

Bạn có thể kiểm tra AMP trong Google Webmasters Tools
Bạn có thể kiểm tra AMP trong Google Webmasters Tools

Bạn cũng có thể kiểm tra trạng thái AMP trong Google Console như sau:

Truy cập vào Google Console, vào mục Trang tối ưu cho thiết bị di động. Tại đây, bạn sẽ thấy được số lượng trang AMP hợp lệ, được đánh chỉ mục và số lượng AMP đang có lỗi, cần khắc phục.

AMP Plugin hoạt động như thế nào?

AMP sẽ hiển thị các trang đã được tối ưu HTML. Các trang này sẽ Load nhanh hơn vì đã được loại bỏ các HTML Code Tag Manager làm chậm trang. Nếu như các trang Mobile có JavaScript thì các Script này sẽ không được hiển thị trong AMP.

AMP Plugin hoạt động như thế nào
AMP loại bỏ HTML làm chậm trang để giúp Website Load nhanh hơn

Một số lưu ý về AMP Plugin:

  • Với AMP thì bạn phải sử dụng CSS phiên bản Streamlined.
  • Bạn chỉ được dùng thư viện JavaScript mà AMP cung cấp, nó có thể gây ra tình trạng Lazy Loading.
  • Bạn phải Validate đúng cách thì các Site AMP mới có thể hoạt động.
  • Nếu bạn muốn tăng trải nghiệm tốt hơn thì bạn hãy tải một số Fonts Custom theo một cách riêng.
  • Forms không được cho phép trên các trang AMP Plugin nên bạn không thể dùng nó.
  • Bạn nên điều chỉnh lại chiều rộng và chiều cao để tránh các hình bị biến dạng.
  • Nếu như bạn muốn trình chiếu Video trên trang của mình thì có thể sử dụng Extension AMP Approved. Tuy nhiên theo tôi, để cải thiện trang Mobile thì điều quan trọng là cải thiện Readability và Speed.

Hiện tại, cấu trúc của Google AMP có 3 loại:

  • AMP HTML: Là tập hợp con của HTML, có các Tag tùy chỉnh, Properties, tuy nhiên nó cũng có nhiều hạn chế. Nếu bạn đã quen với HTML cơ bản thì khi Adapt các trang sẵn có với AMP HTML sẽ không phức tạp mấy.
  • AMP JS: Là Framework JavaScript dành cho trang Mobile, nó sẽ quản lý Resource Handling và không đồng bộ Loading. Lưu ý bên thứ ba như JavaScript sẽ không được cho phép với AMP.
  • AMP CDN (Content Delivery Network): Nó sẽ đánh dấu Cache các trang được kích hoạt AMP và tạo một số tối ưu hóa hiệu suất.

Google AMP ảnh hưởng SEO như thế nào?

AMP giúp làm tăng thứ hạng trên thiết bị di động
AMP giúp làm tăng thứ hạng trên thiết bị di động

Mối quan hệ giữa SEO và AMP là gì? Chúng hỗ trợ nhau như thế nào? Google khám phá và lập chỉ mục các trang AMP để cung cấp trải nghiệm truy cập website nhanh chóng và đáng tin cậy hơn cho người dùng. Tuy AMP không phải là một yếu tố xếp hạng nhưng website có cài đặt Google AMP sẽ tải trang nhanh hơn.

Để lập chỉ mục, Google sẽ áp dụng cùng một mức tiêu chuẩn cho tất cả các URL. Nghĩa là bất kể trang có sử dụng công nghệ nào, website có tốc độ tải nhanh sẽ được đánh giá cao hơn. Do đó, nhờ lợi thế về tốc độ tải, các trang AMP sẽ được Google đánh giá và xếp thứ hạng cao hơn trên thiết bị di động. Điều này rất có lợi vì xu hướng phát triển mới của Google có chiều hướng thiên về thiết bị di động nhiều hơn.

Lưu ý, khi sử dụng trang AMP, hãy đảm bảo trang AMP đó đáp ứng tiêu chí Google mobile-friendly. AMP có thể chưa là tiêu chí xếp hạng của Google, nhưng mobile-friendly là yếu tố quan trọng khi lập chỉ mục. Nếu trang của bạn vừa có AMP vừa đáp ứng mobile-friendly, trang sẽ được Google mobile-first index. Đây là thuật toán xếp hạng mới của Google, nó sẽ ưu tiên index cho những trang tối ưu tốt trên thiết bị di động.

Hướng dẫn kiểm tra Google AMP

Nếu trang của bạn đáp ứng các tiêu chí AMP, bạn sẽ nhận được thông báo này
Nếu trang của bạn đáp ứng các tiêu chí AMP, bạn sẽ nhận được thông báo này

Để kiểm tra trang AMP của bạn có hợp lệ hay không, có thể truy cập vào đường link: https://search.google.com/test/amp. Sau đó, dán URL mà bạn cần kiểm tra vào và click “Test URL”. Nếu trang AMP của bạn hợp lệ thì hệ thống sẽ trả về thông báo “Valid AMP” màu xanh lá cây.

Kiểm tra tốc độ tải trang

Google PageSpeed Insights là công cụ giúp kiểm tra tốc độ tải trang
Google PageSpeed Insights là công cụ giúp kiểm tra tốc độ tải trang

Trong phần này, Mắt Bão sẽ giới thiệu một vài công cụ hữu ích để giúp bạn kiểm tra tốc độ tải trang của mình nhanh hay chậm:

  • Google PageSpeed ​​Insights: Công cụ đưa ra các phân tích toàn diện về tốc độ tải trang trên thiết bị di động và máy tính. Đồng thời cung cấp các đề xuất phù hợp để cải thiện thời gian tải.
  • Think with Google (Test my site): Nhập URL, domain của website cần test vào ô. Sau đó nhấn Enter và chờ một lát để Google tiến hành quét và kiểm tra các thông số liên quan. Kết quả trả về sẽ có thời gian tải website trên 3G, 4G.
  • Dotcom Monitor: phân tích toàn diện trang web của bạn. Ví dụ như thời gian tải trang, số lượng yêu cầu (request) HTTP… Ngoài ra, nó còn cho phép bạn kiểm tra tốc độ load trang trên các loại trình duyệt khác nhau như Chrome, Firefox, Safari,…Bạn không chỉ test được tốc độ tải website mà còn có thể test được server web. Kiểm tra xem hosting web của bạn có nằm trong black list spam hay không…

Ưu và nhược điểm của Google AMP 

AMP có khá nhiều những ưu điểm. Tuy nhiên, nó vẫn còn tồn tại một số nhược điểm, đặc biệt là làm giảm doanh thu của quảng cáo. Hãy cùng Mắt Bão tìm hiểu chi tiết hơn về những ưu và nhược điểm của Google AMP

Ưu điểm của AMP là gì?

Trang AMP là công nghệ giúp tải trang nhanh hơn trang không có AMP từ 15-80%
Trang AMP là công nghệ giúp tải trang nhanh hơn trang không có AMP từ 15-80%

Tăng tốc độ tải trang: Google AMP là một công nghệ mã nguồn mở. Cho phép tăng tốc độ tải trang trên thiết bị di động. Nhiều nghiên cứu cho thấy so với website không cài AMP thì trang AMP sẽ có tốc độ load trang nhanh hơn từ 15-80%. Điều này sẽ giúp làm giảm tỷ lệ thoát cho website.

  • Cải thiện thứ hạng trên mobile: AMP có ảnh hưởng tích cực đến việc xếp hạng của website trên thiết bị di động do thời gian tải nhanh.
  • Cải thiện hiệu suất máy chủ: Sử dụng AMP giúp bạn có thể giảm tải được việc truy xuất dữ liệu nếu có một lượng lớn truy cập từ thiết bị di động. Từ đó tăng hiệu suất trên máy chủ.

Nhược điểm của AMP là gì?

  • Doanh thu quảng cáo giảm: Tuy AMP cũng có hỗ trợ quảng cáo nhưng khả năng hiển thị đôi khi bị hạn chế để tối ưu thời gian tải trang. Cũng không dễ dàng khi triển khai quảng cáo trên các trang AMP. Điều này sẽ khó mang lại doanh thu qua quảng cáo.
  • Không hỗ trợ tốt Analytics: AMP được hỗ trợ trên Google Analytics. Để thu thập và phân tích dữ liệu, bạn sẽ phải triển khai trên từng trang AMP của website. Việc này gây tốn nhiều thời gian và công sức hơn so với website không có AMP
  • Phụ thuộc vào bộ nhớ Cache: Google không cung cấp bất kỳ công nghệ cụ thể để làm cho trang web tải nhanh chóng. Chỉ đơn giản đáp ứng truy cập nhanh từ bộ nhớ cache.

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

Nguyên tắc của Google để một trang web thân thiện với Google cũng áp dụng với AMP. Sau đây các bước cài đặt AMP cho trang web:

Cấu trúc html AMP đơn giản

Dưới đây là hình ảnh về 1 AMP HTML mẫu để bạn tham khảo:

Mẫu AMP HTML
Cấu trúc mẫu html của một website AMP

Để có được trang AMP, bạn cần sử dụng giao thức HTTPS với những điều kiện cần thiết sau:

  • <!doctype html> : tiêu chuẩn HTML
  • Chứa thẻ <html ⚡> hoặc <html amp> : Để xác định nội dung có định dạng AMP.
  • Chứa các thẻ <head> và <body>
  • Chứa thẻ <meta charset=”utf-8″> là thẻ con đầu tiên thuộc thẻ <head>
  • Chứa thẻ <script async src=”https://cdn.ampproject.org/v0.js”></script>. Đây là thẻ con thứ 2 thuộc thẻ <head>
  • Chứa thẻ <link rel=”canonical” href=”$SOME_URL” /> bên trong <head>
  • Chứa thẻ <meta name=”viewport” content=”width=device-width,minimum-scale=1″> bên trong thẻ <head>: Quy định chế độ xem tương ứng trên thiết bị di động
  • Chứa đoạn mã boilerplate AMP trong thẻ <head>

Lưu trữ AMP trên URL

Tốt nhất, bạn lưu trữ trang sử dụng Google AMP của mình trên một URL phù hợp với người dùng.

Ví dụ, với trang tiêu chuẩn là https://example.com/subfolder/this-is-an-example.html

Bạn nên lưu trữ trang AMP với URL là:

  • amp.example.com/subfolder/this-is-an-example.html
  • example.com/subfolder/this-is-an-example-amp.html

Để đảm bảo khi người dùng click vào, URL hiển thị sẽ liên quan đến trang web chính của bạn.

Làm cho AMP của bạn dễ khám phá

Nếu trang của bạn có cả phiên bản AMP và không AMP, hãy thêm các thẻ html như sau:

Trên trang không phải AMP, tham chiếu đến phiên bản AMP của trang để cho Google và các nền tảng khác biết về nó:

<link rel="amphtml" href="https://example.com/this-is-an-example-amp.html" />

Trên trang AMP, thêm văn bản sau để tham chiếu đến phiên bản chuẩn không phải AMP của nó:

<link rel=”canonical” href=”https://example.com/this-is-an-example.html” />

Đối với các trang AMP độc lập (những trang không có phiên bản không phải AMP), trang AMP phải chỉ định chính nó làm phiên bản chuẩn:

<link rel=”canonical” href=”https://example.com/this-is-an-example-amp.html” />

Các trang AMP độc lập cũng sẽ được lập chỉ mục nếu có thể tìm thấy chúng. Hãy đảm bảo rằng các trang AMP độc lập được liên kết với các trang được lập chỉ mục khác hoặc được liệt kê trong sơ đồ trang web (sitemap.xml) của bạn.

Kiểm tra tính hợp lệ trang AMP

Như đã hướng dẫn kiểm tra Google AMP ở trên, hãy truy cập vào Google Search Console để đảm bảo tính tương thích của trang AMP của mình. Đừng quên theo dõi các trang AMP của mình thường xuyên để đảm bảo chúng không mắc lỗi.

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

"AMP for WordPress" là plugin miễn phí rất thông dụng hiện nay
“AMP for WordPress” là plugin miễn phí rất thông dụng hiện nay

Đối với WordPress, bạn có thể cài đặt plugin AMP miễn phí. Và dưới đây là cách để cài đặt plugin này:

  • Bước 1: Vào WordPress Dashboard. Chọn Plugins sau đó vào Add New
  • Bước 2: Gõ tên plugin “AMP for WordPress” vào thanh tìm kiếm
  • Bước 3: Click “Install” để cài đặt
  • Bước 4: Sau khi cài đặt xong, chuyển đến tab Appearance sau đó đến AMP.

Ở đây có nhiều tab để bạn có thể điều chỉnh trang AMP theo ý mình, ví dụ như:

  • Tab Design: điều chỉnh text của site, link cho đến background,…
  • Tab General: Chọn sử dụng AMP cho trang nào, post nào,…

Cách mở Website dạng AMP trên Chrome

Để giúp người dùng truy cập Website trên Mobile nhanh hơn nên nhiều Website đã hỗ trợ giao diện AMP. Giao diện này sẽ được tối ưu hoàn toàn để giúp bài viết tải nhanh hơn khi người dùng truy cập. Kể cả trên thiết bị di động hay khi kết nối mạng chập chờn.

Cách mở Website dạng AMP trên Chrome
Bạn có thể mở Website dạng AMP trên Chrome khi cài đặt AMP Browser Extension.

Đối với trang Web trên trình duyệt luôn mặc định hiển thị giao diện đầy đủ như Chrome. Nếu bạn muốn dùng Website ở giao diện Google AMP, hãy thực hiện theo từng bước mà tôi liệt kê dưới đây.

  • Bước 1: Đầu tiên bạn hãy mở trình duyệt Chrome lên và tải tiện ích AMP Browser Extension.
  • Bước 2: Sau khi đã cài đặt xong thì bạn có thể tìm kiếm các thông tin như bình thường. Những trang Web có hỗ trợ AMP sẽ có biểu tượng hình tia chớp xanh ở bên cạnh.
  • Bước 3: Khi bạn truy cập vào Website này thì nó sẽ hiển thị theo giao diện AMP thay cho giao diện mặc định của Chrome. Theo đó, nội dung của Website sẽ được tải trước, sau đó là hình ảnh và quảng cáo nếu có.
  • Bước 4: Nếu như bạn muốn trở lại giao diện mặc định thì hãy tắt giao diện AMP. Bạn chỉ cần ấn vào biểu tượng AMP Browser Extension ở cuối thanh địa chỉ trình duyệt là được. Lúc này biểu tượng của AMP Browser Extension sẽ chuyển sang màu xám.
  • Bước 5: Ngoài ra, bạn có thể mở giao diện thiết lập bằng cách nhấn chuột phải vào biểu tượng tiện ích và nhấn tùy chọn. Tại giao diện này, nếu bỏ chọn phần Load AMP or MIP Pages Automatically thì trang Web sẽ trở về giao diện mặc định, hoặc bạn có thể chọn các Website mà mình không muốn dùng giao diện AMP.

Cách vô hiệu hóa Google AMP trong tìm kiếm Google trên Android và iPhone

Giao diện AMP có thể phù hợp sử dụng khi thiết bị của bạn có kết nối Internet chậm hoặc không ổn định. Nhưng nếu bạn có kết nối Internet tốc độ cao và không muốn xem phiên bản đơn giản của trang Web, bạn có thể vô hiệu hóa nó bằng một số cách mà tôi tổng hợp phía dưới.

Cách 1: Sử dụng tìm kiếm Google được mã hóa.

vô hiệu hóa Google AMP trong tìm kiếm Google trên Android và iPhone bằng cách sử dụng google tìm kiếm được mã hóa
  • Bạn có thể dùng tìm kiếm Google được mã hóa để buộc nó hiển thị các phiên bản Website thông thường. Thay vì tìm kiếm từ thanh Search của trình duyệt thì bạn hãy mở Encrypted.google.com. Sau đó, bạn thực hiện việc tìm kiếm trên thanh Search của Google như thông thường.
  • Tuy nhiên, không phải lúc nào nó cũng được điều hướng đến các trang Web được mã hóa. Vì vậy, bạn có thể đặt nó làm trang chủ mặc định trên các thiết bị Android, iPhone hoặc iPad.

Cách 2: Sử dụng DeAMpify dành cho Android để loại bỏ Link Google AMP

Sử dụng DeAMpify dành cho Android để loại bỏ Link Google AMP
  • DeAMpify là một ứng dụng trên Android, nó giúp bạn bỏ qua các liên kết AMP. Nó sẽ không hoạt động nếu bạn tìm kiếm trên Chrome. Vì vậy bắt buộc bạn phải tìm kiếm trên ứng dụng Google Search dành cho Android.
  • Khi bạn tìm kiếm trên Google Search, hãy nhấn vào liên kết có nhãn AMP. Sau đó, bạn chọn DeAMpify và bấm Always để ứng dụng có thể mở liên kết ban đầu trong Chrome.
  • Ngoài ra, bạn có thể dùng phiên bản Pro để loại bỏ các quảng cáo phiền phức. Không những vậy, nó còn mở khóa một số chức năng nâng cao khác.

Cách 3. Sử dụng tính năng Bang của DuckDuckGo

Sử dụng tính năng Bang của DuckDuckGo
  • DuckDuckGo là công cụ giúp bạn tìm kiếm tập trung và bảo mật cao vì nó không theo dõi bạn. Theo tôi, bạn hãy dùng DuckDuckGo này để tìm kiếm trên Google và nó sẽ hiển thị liên kết ban đầu.
  • Bạn có thể sử dụng công cụ này trên các thiết bị di động Android hoặc iOS.

Nếu như bạn đang dùng Chrome trên điện thoại thì hãy thiết lập DuckDuckGo theo các bước sau:

  • Đầu tiên, bạn hãy mở DuckDuckGo.com trên trình duyệt Chrome, sau đó nhấn vào Add DuckDuckGo to Chrome.
  • Tiếp theo, bạn mở Chrome Settings, chọn tiếp Search Engine và chọn DuckDuckGo.

Với trường hợp bạn sử dụng Safari trên iPhone thì thiết lập theo các bước sau:

  • Trên iPhone, bạn hãy mở phần Settings, sau đó chọn tiếp mục Safari. 
  • Tiếp theo, bạn chọn mục Search Engine và chọn DuckDuckGo.

Sau khi đã cài đặt DuckDuckGo làm công cụ tìm kiếm mặc định, bạn có thể tìm kiếm bằng Chrome. Nếu muốn DuckDuckGo hiển thị kết quả từ Google thì bạn thêm từ !g trước cụm từ tìm kiếm.

Xem thêm WordPress là gì? Hướng dẫn cài đặt WordPress và vấn đề liên quan đến website wordpress.

Đây là những thông tin chi tiết về Google AMP và cách sử dụng, cài đặt AMP cho website WordPress. AMP có thể giúp bạn tối ưu hóa website hiệu quả hơn cho người dùng di động. Chúc bạn thành công!






Bài viết liên quan