AMP là gì

Hướng dẫn cài đặt AMP cho website WordPress A- Z

  • Cập nhật lần cuối: 21/11/2024.

    Theo thống kê từ Statcounter Global Stats tính đến tháng 3/2024 đang có khoảng 60% người dùng internet trên toàn cầu thông qua các thiết bị di động. Từ dữ liệu này cho thấy thấy rằng việc tối ưu website trên Mobile là cực kỳ quan trọng.

    AMP được coi là giải pháp tốt nhất hiện nay. Bạn có thể ứng dụng công nghệ này trong việc tối ưu trải nghiệm người dùng trên di động cho tốc độ tải trang nhanh hơn, mượt mà hơn trên thiết bị di động.

    Từ đó giúp cải thiện thứ hạng tìm kiếm trên Google gia tăng khả năng tiếp cận và lượt truy cập website từ khách hàng tiềm năng.

    Vậy AMP là gì? Cách nó hoạt động và đem lại hiệu quả như thế nào?

    Hãy cùng tìm hiểu trong bài viết này và cách tạo trang AMP cho website WordPress nhé.

    3 Kỹ thuật cơ bản áp dụng trong Google AMP

    Google AMP sẽ áp dụng 3 kỹ thuật như sau: 

    Kỹ thuật lazy loading image

    Kỹ thuật lazy loading image dịch ra là kỹ thuật tải hình ảnh lười biếng. Kỹ thuật này cho phép trang web trì hoãn việc tải hình ảnh cho đến khi người dùng cuộn trang để xem chúng, giúp tăng tốc độ tải trang và giảm áp lực lên máy chủ. 

    Ví dụ, khi bạn đọc truyện tranh, trang web sẽ chỉ tải hình ảnh truyện khi bạn cuộn đến vị trí chứa hình ảnh đó.

    Kỹ thuật tải javascript bất đồng bộ async

    Kỹ thuật tải javascript bất đồng bộ async cho phép website thực hiện đoạn mã và tải dữ liệu ở phía dưới trang web mà không cần chờ cho phần dữ liệu ở phía trên được xử lý hoàn toàn. Nhờ điều này, người dùng có thể giảm thời gian chờ đợi khi trang web tải lên.

    Kỹ thuật tải javascript bất đồng bộ async
    Kỹ thuật tải javascript bất đồng bộ async

    Ví dụ: Khi người dùng truy cập một trang web tin tức, trang web có thể sử dụng kỹ thuật tải JavaScript để tải các quảng cáo từ một nguồn khác. Trong khi quảng cáo đang được tải, người dùng vẫn có thể đọc nội dung tin tức mà không cần chờ đợi hoàn toàn cho quảng cáo tải xong.

    Kỹ thuật Content Delivery Network (CDN) để javascript nhanh chóng

    CDN là viết tắt của Content Delivery Network, là một mạng lưới máy chủ phân phối nội dung trên web đến người dùng từ các vị trí gần họ.

    Hệ thống này giúp cho việc truyền tải dữ liệu nhanh hơn đến người dùng vì dữ liệu được lưu trữ ở các máy chủ gần người dùng.

    Ví dụ: Nếu bạn có một trang web với một tệp JavaScript chính có kích thước 100KB được lưu trữ trên máy chủ web của bạn tại Hoa Kì.

    Khi người dùng ở Việt Nam truy cập trang web của bạn, CDN sẽ tự động cung cấp tệp JavaScript từ máy chủ CDN gần nhất với họ, giảm độ trễ xuống khoảng 50-100 mili giây.

    Lợi ích khi sử dụng AMP cho website

    Theo thống kê của Statista, tỷ lệ người dùng thiết bị di động truy cập internet trên toàn thế giới đã tăng lên 60% vào năm 2023.

    Thống kê tỷ lệ người truy cập Internet thông qua thiết bị di động
    Thống kê tỷ lệ người truy cập Internet thông qua thiết bị di động

    Từ bảng trên, nhận thấy ngày nay người dùng ngày càng sử dụng thiết bị di động truy cập internet. Google đã phát triển tính năng để tối ưu website trên thiết bị di động, trong đó có AMP.

     AMP giúp cải thiện trải nghiệm người dùng và khuyến khích các nhà phát triển web tập trung vào SEO di động.

    Ưu điểm của Google AMP

    • Tăng tốc độ tải trang trên thiết bị di động
    • Tăng khả năng hiển thị cũng như lượt truy cập trang
    • Tối ưu hóa hình ảnh tự động
    • Cải thiện trải nghiệm người dùng trên thiết bị di động
    • Cho phép thiết kế tùy chỉnh 
    • Nhiều nền tảng, bao gồm cả Google và Bing đều hỗ trợ AMP
    • Cải thiện hiệu suất máy chủ vì giảm tải trên các hosting server.

    Trước đây, AMP là một yếu tố xếp hạng trang web trên thiết bị di động của Google nhưng từ tháng 8 năm 2021, Google đã bỏ AMP là yếu tố xếp hạng trang web trên thiết bị di động. 

    Hạn chế khi sử dụng AMP

    Google AMP ra đời năm 2016 trong thời đại mạng 3G, 4G còn yếu, khi đó số lượng di động ngày càng tăng nhưng tốc độ tải trang web trên thiết bị di động vẫn còn chậm, gây ra trải nghiệm người dùng kém.

    Vì vậy, google đưa ra giải pháp AMP giúp cho người dùng có trải nhiệm tốt hơn và nhà sáng tạo nội dung website để ý nhiều hơn đến SEO trên di động. 

    Khi mới ra mắt, google AMP là bắt buộc đối với website tức là khi người dùng truy cập website của bạn, giao diện sẽ không phải giao diện chính mà là giao diện tối ưu của google AMP.

    Giúp tốc độ tải trang nhanh hơn
    Giúp tốc độ tải trang nhanh hơn

    Tuy nhiên đến nay khi mạng 5G, 6G xuất hiện, tốc độ tải web nhanh hơn rất nhiều ( nếu bạn SEO tốt, website thường load dưới 3s). Vì vậy Google không còn bắt buộc các trang sử dụng AMP với các trang web nữa.

    Hiện tại, chủ website có thể lựa chọn cài đặt AMP hoặc không. Tuy nhiên, cần lưu ý rằng AMP có một số hạn chế cần được hiểu rõ, bao gồm:

    • Đầu tiên 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.
    • Thứ hai, AMP có thể khó triển khai, AMP yêu cầu một tập HTML và CSS khác với các trang web truyền thống. Việc này, có thể cần phải chỉnh sửa mã nguồn đòi hỏi thời gian và nguồn lực, đặc biệt đối với các trang web có thiết kế phức tạp.
    • Thứ ba, AMP có thể hạn chế tính linh hoạt trong thiết kế,  AMP có một số hạn chế về HTML và CSS, điều này có thể hạn chế tính linh hoạt trong thiết kế của các trang web.
    • Thứ 4, AMP có thể gây ra khó khăn khi phân tích vì bạn sẽ phải triển khai trên từng trang AMP của website. Tốn thời gian hơn so với việc không sử dụng AMP.
    • Cuối cùng, nó ảnh hưởng đến quảng cáo và doanh thu. Việc tải trang nhanh hơn có thể giảm cơ hội hiển thị quảng cáo và làm thay đổi cách quảng cáo hiển thị, điều này có thể không phù hợp với một số trang web.

    Tóm lại, mặc dù AMP có nhiều lợi ích về tối ưu hóa trải nghiệm trang web trên thiết bị di động, nhưng không phải tất cả trang web đều phù hợp với nó.

    Cách thức hoạt động của Google AMP

    Google đã giới thiệu khung Trang di động tăng tốc (AMP) mã nguồn mở vào tháng 2 năm 2016. Khung này được phát triển để đảm bảo trải nghiệm người dùng được tối ưu hóa và tích hợp chặt chẽ.

    AMP hoạt động ra sao
    AMP hoạt động ra sao

    AMP được xây dựng với 3 thành phần cơ bản:

    AMP HTML

    AMP HTML về cơ bản là HTML chỉ có một số hạn chế nhất định để đảm bảo trang web được tải nhanh chóng. Nó loại bỏ hoặc sửa đổi một số thành phần và thuộc tính có thể làm chậm trang web. 

    AMP JS

    JavaScript rất phức tạp vì quá nhiều JS có thể khiến trang web chạy chậm và không phản hồi. 

    Thư viện JavaScript của AMP giúp xây dựng trang web nhanh hơn mà không cần viết JavaScript phức tạp hoặc nhập thư viện bên ngoài, giúp tăng tốc tải trang.

    AMP Capche

    AMP Cache hay còn gọi là bộ nhớ đệm AMP là mạng phân phối nội dung dựa trên CND (mạng phân phối nội dung). AMP Cache lưu trữ bản sao của các trang AMP và cung cấp chúng cho người dùng từ gần như các máy chủ gần nhất, giúp giảm đáng kể thời gian tải của trang web trên thiết bị di động.

    Ba thành phần cốt lõi của AMP hoạt động đồng bộ để giúp các trang tải nhanh chóng. 

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

    Có hai cách để kiểm tra Google AMP:

    Kiểm tra AMP

    Để 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.

     

     

    Trang web AMP sau khi Test trang sẽ trả lại kết quả màu xanh lá.
    Trang web AMP sau khi Test trang sẽ trả lại kết quả màu xanh lá.

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

    Vì AMP làm tăng tốc độ trang nên việc kiểm tra tốc độ tải trang cũng là cách để kiểm tra google AMP trên Website của bạn.

    Hiện nay có nhiều trang web kiểm tra tốc độ tải trang. Tôi sẽ đề xuất cho bạn 3 ứng dụng tôi hay sử dụng:

    Google PageSpeed Insights: Google PageSpeed Insights là một công cụ miễn phí của Google giúp bạn đánh giá tốc độ tải trang của website trên máy tính để bàn và thiết bị di động.

    đánh giá tốc độ tải trang của website
    đánh giá tốc độ tải trang của website

     

    Để sử dụng Google PageSpeed Insights, bạn chỉ cần nhập URL của website vào công cụ và nhấn nút “Phân tích”. Công cụ sẽ cung cấp cho bạn điểm số tốc độ tải trang, cũng như các đề xuất để cải thiện tốc độ tải trang.

    Kiểm tra bằng GTmetrix
    Kiểm tra bằng GTmetrix

    GTmetrix là một công cụ kiểm tra tốc độ tải trang trả phí.

    Công cụ này cung cấp các tính năng nâng cao hơn Google PageSpeed Insights, chẳng hạn như khả năng kiểm tra tốc độ tải trang từ nhiều vị trí trên thế giới và cho phép chọn nhiều máy chủ khác nhau miễn phí.

    WebPagetest

    WebPagetest là một công cụ kiểm tra tốc độ tải trang miễn phí.

    Công cụ này cung cấp các tính năng tương tự như GTmetrix, chẳng hạn như khả năng kiểm tra tốc độ tải trang từ nhiều vị trí trên thế giới.

    Kiểm tra bằng WebPagetest
    Kiểm tra bằng WebPagetest

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

    Các website được tạo bằng tác vụ thủ công khi muốn sử dụng AMP cần phải can thiệp vào mã nguồn mở bao gồm việc sửa đổi mã nguồn HTML để tuân thủ các quy tắc AMP. Quy trình như sau:

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

    Để bắt đầu, đây là phần đánh dấu của trang AMP cơ bản, các bạn có thể tham khảo:

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

    Thêm hình ảnh

    Nếu muốn thêm hình ảnh, bạn cần thay thế thẻ HTML thông thường bằng thẻ AMP tương đương. 

    Trong trường hợp này,  <amp-img> thẻ thay vì <img>. 

    Để kiểm tra, hãy sao chép và dán đoạn mã sau vào <body> của trang của bạn. 

    sao chép và dán đoạn mã
    sao chép và dán đoạn mã

    Thêm phong cách cho website của bạn

    Phong cách ở đây chỉ các yếu tố liên quan đến hình thức trang web như màu sắc, bố cục, kiểu chữ…

    Mọi kiểu dáng đều phải được thực hiện bằng cách sử dụng thuộc tính CSS. Tuy nhiên, AMP tuyên bố rằng tất cả CSS phải được bao gồm trong một thẻ tùy chỉnh, được gọi là thẻ <style amp-custom> trong <head> tài liệu. 

    Ví dụ: hãy thử thêm kiểu sau vào trang của bạn:

    đặt màu sắc của văn bản thành màu đen và màu nền thành màu trắng
    đặt màu sắc của văn bản thành màu đen và màu nền thành màu trắng

    Kiểu này sẽ đặt màu sắc của văn bản thành màu đen và màu nền thành màu trắng.

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

    Trước khi đưa trang AMP vào sử dụng, bạn nên đảm bảo rằng nó tuân thủ các hướng dẫn AMP và sử dụng công cụ kiểm tra AMP để xác minh tính hợp lệ. 

    Điều này đảm bảo trang của bạn có thể được lưu trữ vào bộ nhớ đệm và tạo trải nghiệm người dùng tốt.

    Theo dõi hiệu suất trang AMP của bạn bằng các công cụ phân tích web như Google Search Console để đảm bảo tính tương thích của trang AMP của mình và điều chỉnh nó để tăng tốc độ và trải nghiệm người dùng. 

    Bên cạnh đó sau khi cài đặt xong AMP, bạn cần phải xem xét website của mình trên giao diện điện thoại ra sao. Hãy đảm bảo rằng website của bạn đang hiển thị tốt trên các thiết bị.

    Ngoài ra bạn có thể tham khảo thêm hướng dẫn của google về việc thiết lập AMP (https://support.google.com/tagmanager/answer/9205783?hl=vi)

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

    Sau khi kích hoạt plugin trên WordPress, bạn có thể bắt đầu tạo trang AMP. 

    Thêm AMP vào trong wordpress
    Thêm AMP vào trong wordpress

    Và dưới đây là cách cài đặt google AMP cho WordPress:

    Bước 1:Đăng nhập vào quản trị WordPress. 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: Nhấp chuột vào “Install” để cài đặt.

    Bước 4: Sau khi cài đặt xong, nhấp vào “Activate” (Kích hoạt) để kích hoạt plugin AMP.

    Bước 5: Sau khi kích hoạt, bạn có thể truy cập trang Giao diện – AMP để xem trang web của bạn trông như thế nào trên thiết bị di động sử dụng AMP.

    Bước 6: Thêm trang AMP của bạn vaò google search control.

    Bước 7: Kiểm tra và theo dõi thường xuyên ở các thiết bị khác nhau.

    Vì AMP sử dụng HTML và CSS đơn giản nên bạn sẽ không có nhiều tùy chọn để thay đổi. Bạn có thể thay đổi màu nền của tiêu đề và màu liên kết cũng như màu văn bản tiêu đề. Ngoài ra, bạn có thể chọn cách phối màu sáng hoặc tối. Và sau cùng đừng quên bấm nút “lưu” thay đổi.

    Lưu ý khi sử dụng Google AMP

    1. Các trang AMP có thể được xem trên bất kỳ thiết bị nào, không chỉ riêng thiết bị di động.
    2. AMP không phải là giải pháp duy nhất cho tốc độ trang web, nó chủ yếu tập trung vào việc cải thiện tốc độ tải trang trên thiết bị di động. Để tối ưu hóa tốc độ trang web tổng thể, bạn cần tối ưu trang web của mình từ hình ảnh, thiết kế,….
    3. Không phải lúc nào AMP cũng phù hợp với mọi loại website.

    Kết luận

    Việc sử dụng AMP trước đây được coi là một yếu tố xếp hạng trong kết quả tìm kiếm di động của Google. Tuy nhiên, hiện nay Google đã không còn khuyến khích các nhà quản trị website sử dụng AMP nữa.

    Thay vào đó là Google khuyến khích người quản trị website tập trung vào việc đáp ứng các chỉ số Core Web Vitals trải nghiệm người dùng tổng thể, bao gồm tốc độ tải trang, tính ổn định và tương tác tốt trên các thiết bị.

    Vì vậy trước khi sử dụng AMP bạn cần phải cân nhắc kỹ lưỡng dự trên mục tiêu và đối tượng khách hàng mà doanh nghiệp của bạn nhắm đến để đưa ra quyết định có nên sử dụng hay không.

    Hy vọng bài viết này giúp ích đến bạn. Nếu bạn muốn cải thiện website của mình tốt hơn, bạn có thể tính đến việc thuê agency bên ngoài hoặc trang bị cho mình khóa học đào tạo SEO thực chiến.

    Seosona – Dịch vụ Google Marketing vinh dự khi đã hoàn thành thành công hơn 300 dự án SEO và Google Marketing với nhiều khách hàng đa ngành nghề khác nhau: nội thất, thời trang, xe điện,…. Nếu bạn quan tâm đến dịch vụ SEO website uy tín hiệu quả – Seosona rất hân hạnh đồng hành cùng bạn.

    Xem thêm:

     

    Đăng ký ngay

    Bài viết mới nhất

    0 0 đánh giá
    Đánh giá bài viết
    Theo dõi
    Thông báo của
    guest

    0 Góp ý
    Cũ nhất
    Mới nhất Được bỏ phiếu nhiều nhất
    Phản hồi nội tuyến
    Xem tất cả bình luận