Kiến thức cơ bản
Tải xuống
Đặt câu hỏi
...
toggle
Trang chủ / Kiến thức cơ bản / Giới thiệu về Accelerated Mobile Pages (AMP)

Giới thiệu về Accelerated Mobile Pages (AMP)

Article ID: 931
Cập nhật gần nhất: 22 Th04, 2022

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.

AMP là gì

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óng: CDN (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.

Tác dụng của AMP đối với SEO

Google AMP ảnh Hưởng Gì đến SEO? Hướng Dẫn Cài đặt AMP

Tuy không có công bố chính thức, nhưng rõ ràng việc tốc độ load trang nhanh cũng giúp ích cho các spider bot của google index trang web của bạn nhanh hơn, và cũng không có gì lạ khi nó ưu tiên đánh giá cao trang web của bạn hơn. Hơn nữa, không có lý do gì AMP project lại được google đưa vào custom search (google web master tool) mà lại không ảnh hưởng đến điểm chất lượng của website cả.

Ưu điểm và nhược điểm khi cài đặt AMP

AMP là gì? Có thực sự tốt cho SEO? | SEO VietNam

Ưu điểm vượt trội khi sử dụng Google AMP

  • Khi cài đặt Google AMP sẽ giúp tốc độ tải tải trang web được tăng lên từ 10%-75%, giúp khách hàng không phải chờ đợi lâu, giảm tỷ lệ thoát trang cho người dùng.

  • Thực tế cho thấy thì khi cài đặt AMP cho website của bạn thì thứ hạng của các từ khóa được tìm kiếm bằng thiết bị di động sẽ tăng lên một cách đáng kể.

  • Thứ hạng từ khóa cải thiện sẽ giúp khách hàng dễ dàng tìm thấy doanh nghiệp của bạn hơn.Các trang AMP sẽ giúp bạn rút gọn được các CSS.

Nhược điểm khi sử dụng AMP

  • Google không cung cấp bất kỳ tính năng, công cụ hay công nghệ nào cụ thể để hỗ trợ thời gian tải trên trang web. Tất cả chỉ đáp ứng truy cập nhanh từ bộ nhớ cache.

  • AMP vẫn được hỗ trợ khi sử dụng Google Analytics để bạn có thể thu thập và phân tích dữ liệu. Nhưng bạn phải triển khai trên từng trang AMP riêng biệt, điều này gây mất thời gian và công sức rất nhiều.

  • Mặc dù AMP cũng hỗ trợ Ads nhưng sẽ hạn chế khả năng hiển thị – nhằm mục đích tối ưu tốc độ load trang. Chính vì thế, việc triển khai quảng cáo trên AMP site là không hề dễ dàng, khiến lượng doanh thu từ Ads của bạn có thể giảm đi

Cách Tạo Một AMP HTML

Điều kiện phải có – Bắt đầu với <!doctype html> : chuẩn HTML5 – Chứa thẻ <html ⚡> hoặc <html amp> : xác định nội dung trang là AMP. – Chứa thẻ <head> và <body> – Chứa thẻ <meta charset="utf-8"> là phần tử con đầu tiên trong thẻ <head> – Chứa thẻ <script async src="https://cdn.ampproject.org/v0.js"></script> là phần tử con thứ hai trong thẻ <head> : tải thư viện AMP JS. – 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> để tương thích với các thiết bị di động. Khuyến cáo thêm initial-scale=1. – Chứa đoạn mã AMP đặc biệt trong thẻ <head>

HTML Tags

  • script: Bị cấm trừ khi là application/ld+json

  • img : Đổi thành amp-img

  • video : Đổi thành amp-video

  • audio : Đổi thành amp-audio

  • iframe : Đổi thành amp-iframe

  • style bắt buộc sử dụng thuộc tính amp-custom

  • Cấm một số tags : frame, frameset object paramapplet embed

Classes Tên Class AMP mà bên trong Class có tiền tố -amp- và i-amp- không được phép trong AMP HTML. Cách đặt đúng trong AMP sẽ là amp-{Tên Class} . Việc sử dụng các lớp này được cho phép và có ý nghĩa để cho phép tùy biến một số tính năng của thời gian chạy và tiện ích AMP. ID Tương tự như Class Liên kết các trang với thẻ <link> Để xác định rằng một trang không phải là AMP và một trang AMP là một cặp, chúng ta thêm thông tin về trang AMP vào trang không phải AMP và ngược lại bằng cách chèn thẻ <link> vào trong <head> Thêm phần sau vào trang không phải AMP:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

Và phần sau vào trang AMP

<link rel="canonical" href="https://www.example.com/url/to/amp/document.html">

Điều gì xảy ra nếu chúng ta chỉ có một trang? Nếu bạn chỉ có một trang, và đây là một trang AMP, bạn phải thêm link với thuộc tính rel=”canonical”

<link rel="canonical" href="https://www.example.com/url/to/canonical/document.html">

Css

<style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

  body {
    font-family: "Bitstream Vera Serif Bold", serif;
  }
</style>

Image

<amp-img alt="AMP"
  src="images/amp.jpg"
  width="320"
  height="256"
  heights="(min-width:500px) 200px, 80%">
</amp-img>

Kết Luận

Trên đây là một số chia sẻ về AMP chắc cũng giúp các bạn phần nào hiểu được kiến trúc cơ bản và những lợi ích của AMP cho việc load page trên điện thoại di dộng. Hostvn cảm ơn bạn đã ghé thăm!

Article ID: 931
Cập nhật gần nhất: 22 Th04, 2022
Lần sửa đổi: 1
Lượt xem: 0
Trước
Tiếp theo
« Tại sao https không hoạt động?
ACF: Better Search »

rss