Góc Kiến Thức SEO

AMP là gì? Hướng dẫn cài đặt và tối ưu AMP updated 2024

AMP là gì? Khi nói đến tốc độ trang web trên di động và cách thúc đẩy SEO, thì mọi người sẽ đề cập tới cụm từ AMP. Vậy bản chất nó là gì cũng như các khái niệm xung quanh công cụ này? Bạn đã biết giao diện của chúng như nào? Cùng SEODO tìm hiểu ngay nhé.

1. AMP là gì?

Để hiểu rõ hơn về thuật ngữ AMP là gì? Cùng xem ngay nội dung được trình dưới đây nhé!

1.1. Google AMP là gì?

AMP chính là cách viết tắt của Accelerated Mobile Pages hỗ trợ cho thiết bị di động mỗi trang web. Công cụ này đóng vai trò quan trọng trong việc tăng tốc độ tải trang trên di động mà vẫn giữ được giao diện thu hút. Điều này mang đến trải nghiệm hài lòng, thoải mái và giúp khách hàng tiếp cận thông tin dễ hơn.

1.2. Các kỹ thuật cơ bản của AMP

Trước khi đi sâu hơn về AMP và cách vận hành công cụ này thì bạn cần hiểu rõ về các kỹ thuật cơ bản. AMP có 3 kỹ thuật cơ bản mà bạn cần nắm vững để cài đặt và sử dụng chúng. Hãy khám phá kỹ thuật đó ngay dưới đây nhé:

  • Kỹ thuật lazy loading image: Website sẽ chú ý tải nội dung nhẹ hơn, chủ yếu là phần text. Đối với các hình ảnh và video có dung lượng lớn hơn thì AMP sẽ đợi người dùng kéo đến vị trí đó và dừng lại để xem. Điều này giúp giảm việc tải các dữ liệu chưa cần thiết và gia tăng tốc độ tải trang
  • Kỹ thuật tải javascript bất đồng bộ async: Một cách gọi khác của kỹ thuật này là thiết kế website, nhiệm vụ chính là chạy code và tải dữ liệu riêng. Các dữ liệu được xử lý độc lập không ảnh hưởng đến nhau nên không mất thời gian cho người xem.
  • Kỹ thuật CDN để javascript nhanh chóng: Với hệ thống máy chủ CDN ở các quốc gia khác nhau, ưu điểm của kỹ thuật CDN này chính là tải dữ liệu từ nguồn đến người xem một cách nhanh chóng và tối giản các thao tác.
AMP là gì
Các kỹ thuật cơ bản của AMP là gì?

1.3. Cách hiển thị của AMP trên Google Search

Khi bạn sử dụng điện thoại di động để tìm kiếm thông tin trên Google, các website có cài đặt AMP sẽ hiển thị kết quả tìm kiếm kèm biểu tượng tia sét và ký hiệu AMP. Lúc bạn click vào link thì giao diện sẽ xuất hiện như sau:

  • Trình xem AMP của Google: Trình duyệt này đã được thiết lập mặc định và phân phối nội dung AMP đến người sử dụng di động và họ sẽ dễ dàng truy cập hơn.
  • Signed exchange: Công dụng của dạng này là cấp quyền cho trình duyệt trả về URL là link gốc của nội dung.
Google AMP
AMP hiển thị trên Google Search

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

Google Console còn có một tên khác là Google Webmasters Tools. Bạn sẽ hiểu rõ được trạng thái AMP lúc này và nhận được danh sách các trang AMP thành công hoặc mắc lỗi trên website. Từ đây bạn sẽ đưa ra giải pháp phù hợp để khắc phục sớm.

AMP là gì
Trạng thái AMP hiển thị trong Google Console

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

Để triển khai AMP cho website, bạn cần cài đặt tiện ích bổ sung AMP. Tiện ích này sẽ hỗ trợ hiển thị các trang web với phiên bản HTML được tối ưu, giúp tăng tốc độ tải bằng cách loại bỏ một số phần của mã HTML. Đối với các trang có JavaScript, các đoạn mã này sẽ không xuất hiện trong AMP. Trong quá trình sử dụng tiện ích bổ sung AMP, cần chú ý các điểm sau:

  • Ưu tiên sử dụng CSS phiên bản Streamlined để hỗ trợ tiện ích AMP.
  • Chỉ sử dụng thư viện JavaScript được cung cấp bởi AMP; trong các trường hợp khác, việc Lazy Loading có thể xảy ra.
  • Thực hiện xác thực một cách chính xác để đảm bảo hoạt động của AMP mà không gặp phải lỗi.
  • Các trang sử dụng tiện ích bổ sung AMP không thể sử dụng các biểu mẫu (Forms).
  • Điều chỉnh kích thước và tỉ lệ khung để đảm bảo hình ảnh và nội dung trên trang hiển thị đúng cách.
  • Sử dụng Extension AMP Approved để hỗ trợ tối ưu nhất cho việc trình chiếu video trên trang web.

Cấu trúc của AMP bao gồm ba phần chính:
– AMP HTML: là một phiên bản HTML tối ưu hóa, cung cấp các thẻ và thuộc tính giới hạn nhằm tối ưu hóa hiệu suất. Nếu bạn quen thuộc với HTML cơ bản, bạn sẽ dễ dàng làm quen với nó.
– AMP JS: là một Framework JavaScript được tối ưu hóa cho các trang di động, đảm nhận việc quản lý tài nguyên mà không cần phải đồng bộ hóa quá trình tải trang.
– AMP CDN (Content Delivery Network): là một dịch vụ lưu trữ cache các trang AMP và cải thiện tốc độ tải trang.

Google AMP
AMP hiển thị các trang được tối ưu HTML

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

Có thể nói mối quan hệ giữa AMP và SEO là tương trợ. Bởi Google khám phá và lập chỉ mục các trang này để tạo trải nghiệm truy cập trang web nhanh hơn cho người dùng. Khi trang web của bạn có cài sẵn AMP thì tốc độ tải trang sẽ nhanh hơn nhiều.

AMP là gì
AMP và SEO là tương trợ

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

Kiểm tra AMP như nào cho chính xác? Bạn sẽ tìm được câu trả lời ngay dưới đây. SEODO sẽ hướng dẫn bạn cách kiểm tra các phần trong Google AMP một cách hợp lệ và chuẩn xác. Bạn sẽ phải lưu ý 5 yếu tố dưới đây và thực hiện theo hướng dẫn nhé.

4.1. Kiểm tra hợp lệ

Bạn sẽ chỉ cần thực hiện vai thao tác đơn giản để kiểm tra hợp lệ bằng cách vào đường link https://search.google.com/test/amp rồi copy và dán URL bạn cần kiểm tra, sau cùng là ấn Test URL. Khi kết quả là màu xanh lá và “ Valid AMP” thì trang AMP của bạn đã hợp lệ.

AMP là gì
Kiểm tra hợp lệ

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

Nếu muốn kiểm tra tốc độ tải trang thì bạn có thể truy cập 1 trong 3 đường link sau đây. Với các thao tác đơn giản như copy và dán URL website cần kiểm tra vào và kiểm tra xem tốc độ tải trang nhanh hay chậm:

  • Google PageSpeed Insights: Phân tích tốc độ tải trang và các giải pháp khắc phục
  • Think with Google (Test my site):Tiết lộ cho bạn về tốc độ tải trang trên 3G và 4G
  • Dotcom Monitor: Phân tích toàn diện website từ tốc độ tải trang đến các hosting web ở blacklist hay không…
Google AMP
Kiểm tra tốc độ tải trang

4.3. HTML AMP

Về cơ bản thì HTML AMP cũng chính là HTML để hỗ trợ tăng hiệu suất. Cách tìm kiếm các trang AMP nằm ở các công cụ thông qua tag HTML. Có 2 phiên bản bao gồm và không bao gồm cho bạn lựa chọn, hoặc bạn chỉ cần chọn phiên bản AMP cũng được.

AMP là gì
HTML AMP

4.4. JavaScript AMP (JS)

Đây cũng là công cụ giúp cho các trang AMP được ưu tiên hơn, công cụ trên còn hỗ trợ các phương pháp gia tăng hiệu suất AMP như CSS nội tuyến. Đồng thời, JS có sử dụng thêm Sandbox của Iframes để nâng cao hiệu suất và kiểm tra bố cục trang trước khi tài nguyên được tải.

AMP là gì
JavaScript AMP

4.5. Bộ nhớ đệm AMP –AMP Cache

Bộ nhớ đệm AMPAMP Cache có nhiệm vụ phân phát các HTML AMP đã lưu trong cache. Bộ nhớ đệm sẽ phân phối nội dung và chuyển các tài liệu trang AMP hợp lệ nhất. Bộ nhớ đệm này có kèm với hệ thống xác thực tích hợp với mục đích là xác thực trang có chạy hay không, hoặc trang của bạn có phụ thuộc vào tác động bên ngoài làm ảnh hưởng đến tốc độ tải trang hay không.

Google AMP
Bộ nhớ đệm AMP

5. Ưu và nhược điểm của Google AMP là gì?

Tuy Google AMP được đánh giá khá cao về ưu điểm và tính năng vượt trội mang lại, nhưng vẫn còn một số hạn chế cần được khắc phục. Hãy cùng SEODO tìm hiểu kỹ hơn về ưu và nhược điểm của AMP và từ đây bạn sẽ tìm một vài giải pháp để khắc phục.

5.1. Ưu điểm của Google AMP

  • Tốc độ tải trang nhanh: Với mục tiêu chính là tăng tốc độ tải trang trên di động. Theo nghiên cứu cho thấy trang web được cài AMP sẽ có độ tải trang nhanh từ 15-80% so với những trang không cài đặt.
  • Cải thiện thứ hạng ở thiết bị di động: Bởi tốc độ tải nhanh nên AMP cũng tác động không nhỏ tới việc xếp hạng của trang web.
  • Tăng hiệu suất của máy chủ: Giảm tải việc truy xuất dữ liệu nếu trang web có nhiều lượng truy cập từ mobile.

5.2. Nhược điểm của Google AMP

  • Giảm doanh thu quảng cáo: Khả năng hiển thị nhiều khi bị hạn chế để thúc đẩy quá trình tải trang. Nên việc chạy quảng cáo trên AMP không hề đơn giản.
  • AMP không được hỗ trợ trên Google Analytics: Việc triển khai các dữ liệu trên trang AMP sẽ làm mất thời gian và công sức hơn.
  • Phụ thuộc nhiều vào bộ nhớ đệm Cache: Vì không được cung cấp các công cụ để giúp website tải nhanh hơn nên AMP phụ thuộc nhiều vào bộ nhớ cache.

Xem thêm: Nhận Báo giá trọn gói Dịch vụ SEO Hồ Chí Minh tại SEODO

6. Cách tạo các trang AMP với Instapage

Việc tạo một trang AMP không hề đơn giản với những ai không rành về HTML. Để khắc phục điều này, bạn có thể sử dụng công cụ khác như Instapage để hỗ trợ và thực hiện việc tạo trang AMP một cách nhanh chóng, dễ dàng.

6.1. Bước 1: Tạo trang mới

Bước 1 tạo trang AMP rất đơn giản. Bạn chỉ cần vào phần Create New Page của Instapage. Tạo trang mới Instapage rồi chọn tính năng AMP Page. Sau đó bạn điền tên trang web của mình và không cần chọn template như các trang AMP khác. Bạn sẽ chuyển tiếp sang bước sau.

Google AMP
Tạo trang mới

6.2. Bước 2: Thêm phần tử vào trong 

AMP không hỗ trợ HTML hay JS nên bạn sẽ không tìm thấy các phần như Headline, Video, Image… như các thanh toolbar thông thường. Nhưng bạn sẽ thấy một vài tùy chọn khác như Font, SEO, Social Info… cũng giúp ích cho quá trình thiết lập trang AMP.

AMP là gì
Thêm phần tử vào trong

6.3. Bước 3: Tạo biến thể A/B Test

Chọn ô Create an A/B Test và thêm biến thể cho riêng bạn. Đối với biến thể mới, bạn có thể sử dụng vài thao tác như đổi tên, tạm dừng, chuyển tiếp, sao chép hoặc xóa nếu bạn cần. Có thể thấy cách tạo biến thể A/B Test khá đơn giản.

AMP là gì
Tạo biến thể A/B Test

6.4. Bước 4: Xác thực

Trình xác thực trang AMP có giới hạn là 75KB và có thông báo sẽ xuất hiện để bạn duyệt việc xác thực trang. Nếu trang của bạn vẫn trong giới hạn cho phép thì sẽ có ký hiệu AMP validation successful và cuối cùng chọn Publish để xuất bản.

Google AMP
Xác thực

6.5. Bước 5: Publish

Sau khi bạn chọn Publish thì có 2 phương pháp để bạn cân nhắc tùy vào việc trang của bạn có dùng WordPress hay không. Bạn hãy tham khảo các trường hợp dưới đây nhé:

  • Nếu bạn dùng WordPress, nhiệm vụ của bạn là cài đặt và đăng nhập vào Plugin của Instapage trên web, bước cuối là xuất bản trang AMP Landing page vào WordPress.
  • Còn trường hợp bạn dùng domain thì điền tên miền và miền phụ của mình là hoàn thành.

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

Để cho tốc độ tải trang và gia tăng độ thân thiện cho website thì bạn nên cài đặt Google AMP. Dưới đây sẽ là một số cách cài đặt Google AMP cho website hợp lệ để bạn có thể vận hành và kiểm tra trang chuẩn xác nhất. Cùng SEODO khám phá ngay nhé.

7.1. Cấu trúc HTML AMP đơn giản

Để cài đặt AMP với cấu trúc đơn giản thì bạn nên dùng sử dụng HTTPS với các thẻ và tiêu chuẩn sau đây:

  • <!doctype html>: tiêu chuẩn HTML.
  • Chứa thẻ<html ⚡> hoặc <html amp> : Nhằm 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 về thẻ tên meta và nội dung.
  • Chứa đoạn mã boilerplate AMP trong thẻ <head>.

7.2. Lưu trữ AMP trên URL

Lời khuyên dành cho bạn chính là cần lưu trang dùng AMP trên URL phù hợp với đối tượng người dùng mà vẫn đảm bảo nội dung chính liên quan. Bạn có thể tham khảo hai cách sau:

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

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

Trong mục này sẽ có 2 trường hợp xảy ra chính là trang của bạn có cài sẵn phiên bản AMP hoặc không cài. Tùy vào trường hợp mà bạn hãy thêm các thẻ HTML sau để cho AMP của bạn dễ khám phá:

  • Trang không AMP, bạn cần tham chiếu đến phiên bản AMP của trang để các công cụ tìm kiếm trên các nền tảng có thể nhận diện:

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

  • ·Trên trang AMP, bạn cần thêm văn bản để tham chiếu tới các phiên bản chuẩn:

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

7.4. Kiểm tra tính hợp lệ của trang AMP

Cuối cùng là bước kiểm tra xem trang AMP của bạn đã hợp lệ hay chưa. Bạn chỉ cần vào Google Search Console để kiểm tra tính tương thích của trang web với AMP là xong. Tuy nhiên, bạn cần thường xuyên theo dõi để tránh chúng không gặp phải lỗi.

AMP là gì
Kiểm tra tính hợp lệ của trang AMP

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

Các thao tác để cài đặt Google AMP cho WordPress cũng khá đơn giản và nhanh chóng. Bạn chỉ cần cài đặt Plugin AMP miễn phí và tham khảo 4 bước sau đây nhé:

  • Bước 1: Vào mục WordPress Dashboard. Click vào Plugins và Add New để thêm mới
  • Bước 2: Trong ô tìm kiếm hãy nhập tên plugin “AMP for WordPress”
  • Bước 3: Ấn “Install” để cài đặt
  • Bước 4: Khi đã cài đặt xong, bạn sang đến tab Appearance rồi đến AMP.
AMP là gì
Hướng dẫn cài đặt Google AMP

9. Cách AMP mang đến hiệu quả cho website doanh nghiệp

Với một vài thông số dưới đây bạn sẽ bất ngờ với kết quả mà AMP mang đến cho website. Từ năm 2016 khi mới hoạt động, đã có 25 triệu tên miền xuất bản hơn 4 tỷ trang AMP. Với số lượng trang cực khủng cũng không làm tốc độ tải trang chị chậm đi. Thời gian tải trang này từ công cụ tìm kiếm Google còn chưa đến 0.5 giây.

AMP là gì
Cách AMP mang đến hiệu quả cho website doanh nghiệp

Một vài ví dụ mà các doanh nghiệp đã sử dụng thành công công cụ này với các yếu tố điển hình sau đây:

  • Gizmodo tăng traffic, AMP hỗ trợ đắc lực cho tốc độ tải trang và lượt hiển thị nhờ
  • AMP giúp tăng chuyển đổi với TransUnion

10. Cách mở website dạng AMP trên Chrome 

Theo thống kê, người dùng internet sử dụng công cụ Chrome chiếm số lượng lớn. Bởi vậy đã có nhiều website hỗ trợ giao diện AMP trên Chrome. AMP ở đây sẽ giúp tối ưu bài viết để tăng tốc độ truy cập hơn dù trong tình huống nào. Hãy cùng SEODO khám phá 5 bước mở website sau nhé:

  • Bước 1: Đầu tiên, bạn cần mở công cụ Chrome và tải xuống tiện ích mở rộng AMP Browser Extension.
  • Bước 2: Sau khi cài đặt xong, bạn có thể thực hiện thao tác tìm kiếm thông tin bình thường. Các trang web tương thích với AMP sẽ xuất hiện với biểu tượng tia chớp màu xanh lá bên cạnh.
  • Bước 3: Khi bạn truy cập vào trang web này, nó sẽ được hiển thị theo giao diện AMP thay vì giao diện Chrome thông thường. Nội dung trang web được tải đầu tiên, sau đó đến hình ảnh và quảng cáo (nếu có).
  • Bước 4: Trong trường hợp bạn cần quay lại giao diện mặc định, vui lòng tắt giao diện AMP. Chỉ cần nhấp vào biểu tượng tiện ích mở rộng trình duyệt AMP ở cuối thanh địa chỉ của trình duyệt. Lúc này, biểu tượng tiện ích mở rộng AMP Browser Extension sẽ đổi sang màu xám.
  • Bước 5: Bên cạnh đó, bạn có thể mở giao diện cài đặt bằng cách chọn biểu tượng tiện ích mở rộng và nhấp vào tùy chọn. Trong giao diện này, nếu bạn bỏ chọn phần Load AMP or MIP Pages Automatically thì website sẽ trở về giao diện mặc định, hoặc bạn có thể chọn những trang web mà bạn không muốn sử dụng giao diện AMP.
AMP là gì
Cách mở website dạng AMP trên Chrome

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

Một ưu điểm vượt trội của Google AMP là bạn có thể dùng khi thiết bị di động của bạn có kết nối Internet chậm hoặc không ổn định. Trong trường hợp, bạn có kết nối Internet ổn định và mạnh thì có thể vô hiệu hóa công cụ này theo 3 cách sau đây:

  • Bước 1: Sử dụng công cụ tìm kiếm Google được mã hóa để hiển thị trang web thông thường
  • Bước 2: Dùng DeAMpify cho hệ điều hành Android để bỏ Link Google AMP nhưng bạn không sử dụng trên trình duyệt Chrome. Công cụ này bạn có thể nâng cấp lên Pro để nhận tính năng nổi bật hơn.
  • Bước 3: Sử dụng tính năng Bang của công cụ DuckDuckGo trên cả Iphone và Android. Công cụ này được đánh giá về tính bảo mật cao và không theo dõi bạn. Đồng thời bạn dễ dàng sử dụng DuckDuckGo trên trình duyệt Chrome.

Trên đây là những thông tin hữu ích về AMP là gì đã được các chuyên viên quản trị web tổng hợp. Hy vọng bạn đọc có thể nắm vững những công dụng, cách cài đặt và sử dụng plugin AMP một cách tối ưu nhất. Nếu có bất kỳ thắc mắc nào hãy liên hệ với SEODO để được giải đáp ngay nhé!

Chinh phục top Google nhờ những phương pháp SEO kỹ thuật trong các bài viết sau đây:

    • Pagination là gì? 9 Mẹo để phân trang cực hiệu quả trong SEO
    • File robots.txt là gì? 3 cách tạo robots.txt chuẩn SEO 
    • SEO Audit là gì? Hướng dẫn 18 bước SEO Audit đơn giản
    • Slug là gì? Cách tối ưu Slug cho SEO không phải ai cũng biết
5/5 - (4 bình chọn)

Viết một bình luận

Website này sử dụng Akismet để hạn chế spam. Tìm hiểu bình luận của bạn được duyệt như thế nào.

BÀI VIẾT CÓ LIÊN QUAN