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

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ì?

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

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

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

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
Kiến thức cơ bản -> Giới thiệu về Accelerated Mobile Pages (AMP)
https://kb.hostvn.net/gii-thiu-v-accelerated-mobile-pages-amp_931.html