AMP là gì? Lợi ích AMP và cách cài đặt cho Website chuẩn nhất 2021

Sau đây chúng ta hãy cùng tìm hiểu về công nghệ AMP và cách cài đặt AMP cho trang web của mình:

AMP là gì

AMP (Accelerated Mobile Pages) là một dự án của Google hỗ trợ tăng tốc độ load trang trên di động các trang AMP đã được xác thực được lưu trong bộ nhớ cache AMP của Google và điều này cho phép tải trang nhanh hơn đem đến trải nghiệm tuyệt vời cho người dùng.

Định dạng AMP được hỗ trợ bởi nhiều nền tảng, như Google Tìm kiếm. Nếu một trang web được liệt kê trong kết quả tìm kiếm của Google có phiên bản AMP hợp lệ, Tìm kiếm có thể hướng người dùng trên thiết bị di động đến AMP trong bộ nhớ cache.

1. Google AMP là gì ?

Google AMP là gì ?

AMPlà cách viết tắt của cụm từ tiếng Anh Accelerated Mobile Pages – nghĩa là trang web dành cho phiên bản di động được tăng tốc. Và Google AMP là công nghệ mã nguồn mở giúp bạn thực hiện quá trình tăng tốc độ tải trang cho các website trên những thiết bị di động khác nhau như smartphone, tablet.

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

• Kỹ thuật lazy loading image:trang web sẽ ưu tiên tải nội dung nhẹ hơn, thường là phần text và trì hoãn việc tải hình ảnh, video cho đến người dùng cuộn đến vị trí đó và có xu hướng ngừng lại để xem hình ảnh/ video. Nhờ giảm thiểu tối đa việc tải những dữ liệu không cần thiết, tốc độ tải trang sẽ được cải thiện.
• Kỹ thuật tải javascript bất đồng bộ async:Đây là kỹ thuật thiết kế website sẽ thực hiện chạy code và upload dữ liệu riêng biệt. Nghĩa là khi phần dữ liệu từ đoạn trên vẫn chưa xử lý hoàn tất thì bên dưới vẫn sẽ tiếp tục thực hiện nhiệm vụ của nó, do đó, người dùng sẽ không mất nhiều thời gian chờ đợi.
• Kỹ thuật CDN để javascript nhanh chóng: CDNlà hệ thống máy chủ với các “đầu tàu” đặt ở nhiều vị trí, quốc gia khác nhau. Hệ thống này giúp việc truyền tải dự liệu từ một nguồn đến nhiều người dùng nhanh chóng và đơn giản hơn.

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

Khi tìm kiếm trên Google bằng các thiết bị di động, những trang web sử dụng Google AMP sẽ có ký hiệu hình tia sét và dòng chữ AMP bên cạnh đường link trong trang kết quả tìm kiếm. Nếu bạn kích chuột vào đường link này, nội dung sẽ hiển thị theo các hình thức dưới đây:

• Trình xem AMP của Google:Dạng hiển thị mặc định để Google tiến hành phân phối và lưu trữ nội dung, giúp người dùng có những trải nghiệm tốt hơn khi truy cập trang.
• Signed exchange:Dạng hiển thị trên link URL gốc của nội dung. Thông thường, bạn sẽ phải tiến hành cài đặt thêm nếu muốn người dùng có thể truy cập trực tiếp đến trang mà không cần thông qua bước đệm.

4. AMP hiển thị trong Google Console

Google Search Consolelà công cụ hỗ trợ giúp bạntheo dõi trạng thái AMPcho website của mình. Bằng việc sử dụng Google Console, bạn sẽ nắm được danh sách các trang AMP được cài đặt thành công và các trang đang phát sinh lỗi. Thao tác kiểm tra khá đơn giản, bạn chỉ cần truy cập Google Console và kích vào mục Trang tối ưu cho thiết bị di động.

5. AMP Plugin

Để ứng dụng AMP cho website, bạn cần cài đặt thêm AMP Plugin. Plugin này sẽ hỗ trợ hiển thị các trang web được tối ưu HTML – những trang web có tốc độ tải nhanh hơn nhờ lược bỏ phần HTML Code Tag Manager. Với những trang có JavaScript, Script này sẽ không được hiển thị trong AMP.

Trong quá trình sử dụng AMP Plugin, bạn cần chú ý một số điểm sau:

• Ưu tiên sử dụng CSS phiên bản Streamlined để hỗ trợ AMP plugin
• Chỉ sử dụng thư viện JavaScript mà AMP cung cấp, với các trường hợp khác tình trạng Lazy Loading có thể xảy ra
• Thực hiện Validate đúng cách để đảm bảo AMP hoạt động mà không phát sinh lỗi
• Các trang AMP Plugin không thể sử dụng Forms
• Điều chỉnh chiều rộng & chiều cao để đảm bảo tỉ lệ khung, hình ảnh trên trang
• Sử dụng Extension AMP Approved để hỗ trợ tốt nhất cho trang khi trình chiếu video

Cấu trúc của AMP có 3 loại:

• AMP HTML:tập con HTML, có tag và thuộc tính để tùy chỉnh nhưng số lượng, tính năng khá hạn chế. Trong trường hợp bạn khá quen thuộc với HTML cơ bản thì theo tác sẽ tương đối đơn giản
• AMP JS:Framework JavaScript được tạo riêng cho trang mobile, đảm nhiệm quản lý Resource Handling, không thể đồng bộ với loading
• AMP CDN (Content Delivery Network):đánh dấu cache các trang AMP và thực hiện tối ưu.

II. Lợi ích khi sử dụng AMP với SEO

AMPkhông nằm trong các tiêu chí để xếp hạng website. Vậy nhưng, Google sẽ tiến hành theo dõi, lập chỉ mục các trang sử dụng AMP để nâng cao trải nghiệm người dùng. Bởi vậy, những website cài đặt AMP, có tốc độ trải trên phiên bản di động nhanh hơn, đem đến trải nghiệm tốt hơn cho người dùng, sẽ được đánh giá cao hơn về chất lượng và mức độ đáng tin cậy. Từ đó, vị trí thứ hạng website sẽ gián tiếp được cải thiện.

Thông thường, khi lập chỉ mục, Google sẽ sử dụng một tiêu chuẩn chung cho tất cả các trang, các đường link. Như vậy, dù bạn ứng dụng bất kỳ công nghệ nào thì tiêu chuẩn duy nhất được đưa ra để đánh giá đều là tốc độ tải trang. Tốc độ tải càng nhanh, Google sẽ đánh giá và xếp hạng trang web cho phiên bản di động sẽ càng cao. Với xu hướng sử dụng thiết bị di động phổ biến như hiện nay, AMP sẽ thúc đẩy hiệu quả thực tế cho SEO website.

Bạn cần chú ý đến các tiêu chí Google mobile-friendly để có thể ứng dụng AMP đúng cách, đem lại kết quả như mong muốn. Lý tưởng nhất, khi trang web của bạn vừa có AMP, vừa đạt chuẩn mobile-friendly, trang web sẽ được ưu tiên xếp hạng hay còn gọi là Google mobile-first index.

III. Cách kiểm tra AMP

Kiểm tra hợp lệ

Kiểm tra AMP khá đơn giản, bạn chỉ cần thực hiện theo các bước sau

• Truy cập vào đường link://search.google.com/test/amp
• Dán đường link mà bạn muốn kiểm tra vào khung
• Kích vào “Test URL” để bắt đầu quy trình kiểm tra

Tiếp đó, hệ thống sẽ báo lại kết quả ngay lập tức. Thông báo “Valid AMP” và màu xanh lá nghĩa là hợp lệ. Còn các trường hợp không hợp lệ, hệ thống sẽ thông báo lỗi để bạn tiến hành điều chỉnh.

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

Một số công cụ giúp bạn kiểm tra tốc độ tải trang:

• Google PageSpeed ​​Insights:Công cụ hỗ trợ kiểm tra tốc độ trang, đánh giá quá trình tải trang trên các thiết bị khác nhau, cung cấp đề xuất giúp bạn cải thiện tốc độ tải trang
• Think with Google:Công cụ hỗ trợ kiểm tra tốc độ tải trang trong các điều kiện kết nối mạng khác nhau, bao gồm thời gian tải khi sử dụng 3G, 4G.
• Dotcom Monitor:Công cụ hỗ trợ kiểm tra và phân tích toàn diện website: thời gian tải trang, số lượng yêu cầu, tốc độ tải trên các trình duyệt phổ biến, kiểm tra hosting và server web,…

IV. Ưu điểm và hạn chế AMP

Ưu điểm và hạn chế

Ưu điểm

Ưu điểmnổi bật nhất của Google AMP là gia tăng tốc độ tải trang trên các thiết bị di động. Theo nghiên cứu thống kế, các trang cài AMP có tốc độ tải nhanh hơn 15 – 80% các trang không cài AMP. Tốc độ tải trang càng nhanh đồng nghĩa với việc tỷ lệ thoát trang càng thấp.

Mang đến trải nghiệm tốt hơn cho người dùng khi truy cập trang từ thiết bị di động, website của bạn sẽ được đánh giá cao, có thứ hạng tốt hơn, thu hút nhiều người truy cập.

Ngoài ra, AMP cũng giúp cải thiện hiệu suất máy chủ do giảm thiểu tối đa những yêu cầu truy xuất dữ liệu với dung lượng lớn từ thiết bị di động.

Hạn chế

AMP giúp tối ưu thời gian tải trang nên hạn chế khả năng hiển thị của quảng cáo. Mặt khác, cài đặt quảng cáo trên các trang có AMP cũng phức tạp hơn rất nhiều so với thông thường. Do đó, không phù hợp với những website muốn gia tăng nguồn thu nhờ quảng cáo.

Một hạn chế khác của AMP là không hỗ trợGoogle Analytics. Khi không có Google Analytic, bạn sẽ mất rất nhiều thời gian và công sức để thể tiến hành thu thập, phân tích dữ liệu của các trang trong website. Vấn đề này sẽ thực sự nghiêm trọng nếu bạn cần thông tin phục vụ cho các hoạt động marketing online.

Lợi ích của AMP

Tốc độ site, lượt truy cập, mobile search engine rankings có một mối tương quan đáng kể. Khi một trang web cụ thể load nhanh, người dùng mobile sẽ xem nhiều mục trên trang đó hơn, từ đógiảm bounce rate.

Tất nhiên khi bounce rate giảm và mức độ trải nghiệm tăng, Google cũng sẽ tăng điểm trên page. Như vậy, các trang có AMP plugin thường sẽ có ranking cao hơn các trang không có AMP.

Để kể ra những điểm cộng của AMP thì vô số, tuy nhiên 5 điểm đáng chú ý là:

• Web có tốc độ tải nhanh đáng kể:

Content cũng quan trọng, tuy nhiên nếu user không thể truy cập trang thì đâu có ai đọc được bạn viết cái gì. Thậm chí chỉ delay 1 giây thôi có thể giảm conversion đến 3.5% và giảm lượt pageview đến 9.4% và tăng bounce rate đến 8.3% (theo 1 nghiên cứu)

Nếu trang tải chậm như rùa thì dĩ nhiên khả năng chuyển đổi mobile user sang khách hàng cũng khó mà xảy ra.

• Tăng khả năng hiển thị mobile browsers cho content marketers:

Google đã bắt đầu hiển thị kết quả AMP trên list organic. Và bạn có thể xem chúng với các biểu tượng AMP màu xanh .

Nhờ vào đặc điểm “khác biệt” này từ biểu tượng AMP này sẽ giúp làm tăng click-through-rate. Người dùng sẽ có xu hướng click vào những trang có “tick xanh” khi họ nhận ra những trang này load nhanh hơn hẳn.

• Cải thiện điểm ranking mobile search engine:

Tốc độ trang và tỷ lệ chuyển đổi có mối quan hệ khá chặt chẽ. Nếu người dùng thích trang tốc độ cao, khả năng họ theo dõi list hoặc mua hàng sẽ cao hơn. Tuy nhiên, AMP vẫn chưa là yếu tố đánh giá ranking của Google. AMP chỉ khả dụng trên bản mobile chứ không sử dụng trên phiên bản desktop.

Tuy nhiên với phiên bản mobile, các trang có ranking cao với organic mobile search result thì các trang được khai triển với AMP sẽ có rank cao hơn hẳn so với non-AMP.

• Hỗ trợ ad linh hoạt

Một số người sử dụng website hay blog với mục đích kiếm tiền và cũng có thể thay thế công việc hàng ngày. Tuy nhiên luôn luôn có yếu tố làm “kỳ đà cản mũi” làm giảm conversion rate: như là header image, navigation menu, thanh sidebar, nút share social media, … Với AMP thì sẽ loại bỏ những thứ gây xao lãng này. Khi mà code được giảm đến 6 lần.

• Tracking người dùng đơn giản hơn

Có nhiều lý do vì sao cần xác định người dùng đến từ đâu, họ xem những trang nào, … Và các công ty hỗ trợ giải pháp này bao gồm WordPress, Chartbeat, LinkedIn, Adobe Analytics, Pinterest và cả Twitter.

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

AMP sẽ render các trang sử dụng optimized HTML. Những trang này sẽ load nhanh hơn vì một số HTML code tag manager sẽ làm chậm các trang sẽ được loại bỏ. Nếu JavaScript có trong các trang mobile thì các script này sẽ không được render trong AMP.

Một số lưu ý bạn cần biết:

• Với AMP, bạn phải dùng CSS phiên bản streamlined.
• Bạn chỉ được phép sử dụng thư viện JavaScript mà AMP cung cấp. Có thế sẽ có lazy loading và đó cũng là điểm trừ của AMP.
• Để các site AMP hoạt động, chúng cần được validate đúng cách.
• Forms không được cho phép trên các trang AMP plugin.
• Để có trải nghiệm tốt hơn thì một số fonts custom phải được load theo cách riêng.
• Tránh các hình biến dạng bằng cách chỉnh lại chiều cao và rộng.
• Sử dụng extension AMP-approved nếu muốn chiếu video trên trang.

Nếu bạn muốn tích hợp AMP plugin và dùng nó để cải thiện trang mobile, điều quan trọng chính là speed (tốc độ) và readability (có thể đọc được) chứ không phải share – ability (khả năng chia sẻ). Các button chia sẻ lên social media thậm chí cũng không hiển thị được vì đa số chúng dùng JavaScript.

Theo Paul Shappiro, cấu trúc của AMP có 3 loại:

1. AMP HTML

Là tập con của HTML, ngôn ngữ này có các tag tùy chỉnh và properties, cũng có khá nhiều restriction (hạn chế). Tuy nhiên nếu quen thuộc với HTML cơ bản, cũng không phức tạp mấy khi adapt các trang sẵn có với AMP HTML.

Sự khác biệt giữa HTML thường và AMP HTML là trang AMP HTML phải có markup sau:

(nhớ copy và lưu dưới đuôi .html nhé):

<!doctype html>
<html amp lang="en">
  <head>
    <meta charset="utf-8">
    <script async src="//cdn.ampproject.org/v0.js"></script>
    <title>Hello, AMPs</title>
    <link rel="canonical" href="//amp.dev/documentation/guides-and-tutorials/start/create/basic_markup/">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <script type="application/ld+json">
      {
        "@context": "//schema.org",
        "@type": "NewsArticle",
        "headline": "Open-source framework for publishing content",
        "datePublished": "2015-10-07T12:02:41Z",
        "image": [
          "logo.jpg"
        ]
      }
    </script>
    <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  </head>
  <body>
    <h1>Welcome to the mobile web</h1>
  </body>
</html>

2. AMP JS

Là framework JavaScript cho trang mobile. Với một số phần, nó sẽ quản lý resource handling và bất đồng bộ loading. Lưu ý rằng bên thứ ba như JavaScript sẽ không được cho phép với AMP.

3. AMP CDN

Content Delivery Network thì không bắt buộc, nó lấy trang đã được kích hoạt AMP, đánh dấu cache và tạo một số tối ưu hóa hiệu suất.

Làm thế nào để AMP-hóa site của bạn?

Với trình độ cơ bản, bạn phải có sẵn 2 phiên bản của trang: phiên bản nguyên bản mà người dùng nào cũng thấy, và một phiên bản AMP.

Vì AMP sẽ không cho phép những thứ như form elements hay third-party như JavaScript, nên bạn sẽ không thể có lead forms, comments trên trang và các elements khác như phiên bản tiêu chuẩn.

Một lưu ý nữa là bạn phải viết lại template để phù hợp với các quy tắc. Ví dụ, tất cả CSS trong AMP phải in-line (nằm cùng dòng) và nhẹ hơn 50KB. Với một số font custom phải được load dưới dạng amp-font để kiểm soát loading tốt hơn.

Ngoài ra, multimedia cũng nên được “xử lý” cẩn thận. Hình ảnh cần sử dụng yếu tố amp-img tùy chỉnh và bắt buộc phải theo size cố định. Nếu hình ảnh sử dụng dưới dạng GIFs thì cần dùng amp-anim extended.

Để Google (và các sites khác có hỗ trợ AMP) detect được phiên bản AMP thì bạn cần phải xác định phiên bản gốc, và trang gốc phải có tag sau:

<linkrel="amphtml"href="//www.example.com/blog-post/amp/">

Tích hợp AMP như thế nào? Làm sao để bắt đầu với AMP trong WordPress

Một trong những cách đơn giản nhất để làm quen với AMP là thử nghiệm trực tiếp trên website WordPress – plugin official được phát triển vởi Automattic/WordPress là thường xuyên được update trên GitHub.

Bước 1: Install bản Official WordPress Plugin

Truy cập trang amp-wp GitHub và chọn “Download Zip”

Khi đã cài xong, bạn chỉ cần đánh dấu “/amp/” tại một trang article.

Bước 2: Xác thực (validation) và tùy chỉnh

Google Search Console sẽ chọn phiên bản AMP qua tag rel=”amphtml” được đính kèm bởi plugin, cho phép validations các articles. Tuy nhiên nó cũng không detect thay đổi nhanh chóng nên nếu bạn fix cái gì đó thì bản fix sẽ không cập nhật trong vài ngày.

Bạn nên sử dụng kết hợp giữa Search Console và Chrome validation. Để dùng Chrome validation process, truy cập một trong những AMP page trên Chrome và thêm “#development=1” vào cuối URL. Nhấn Ctrl + Shift + I để mở Chrome Developer Tools và đến Console.

Khi bạn refresh trang thì có 2 trường hợp: “AMP validation successful” (xác thực AMP thành công) hoặc nhận một list các vấn đề cần sửa.

Tuy nhiên thì mỗi cài WordPress plugin không đủ, và bạn sẽ phải dò lại và xác thực toàn bộ các trang liên quan đến AMP. Tùy thuộc vào các articles được định dạng thế nào mà có sự thay đổi phù hợp để được validate các trang AMP. Vấn đề mà mình thường gặp nhất là specify các thuộc tính chiều cao, chiều rộng của images và sửa các đoạn embed code YouTube không có https.

Bước 3: Sử dụng Schema Markup để validate

Để test các page có markup valid hay không, bạn có thể dùng Google’s Structured Data Testing Tool. Mình gặp vài vấn đề là WordPress không hiển thị logo và cần làm một số sửa đổi với plugin như sau.

Editclass-amp-post-template.phpfile, thông qua FTP hoặc bên trong WordPress Dashboard (Plugins > Editor và chọn “AMP”) sau đó đổi:

if ( $site_icon_url ) {
$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => $site_icon_url,
'height' => self::SITE_ICON_SIZE,
'width' => self::SITE_ICON_SIZE,
);
}

thành:

$metadata['publisher']['logo'] = array(
'@type' => 'ImageObject',
'url' => '//domain.com/wp-content/uploads/logo-60.png',
'height' => 60,
'width' => 170,
);

Hãy chắc chắn bạn đổi URL với đường dẫn tới logo và xác định chiều cao rộng với pixels. Thường thì logo tiêu chuẩn sẽ có kích thước 60px cao với chiều rộng <=600px.

Bước 4: Cài đặt Google Analytics tích hợp vào AMP WordPress Plugin

Để cho phép AMP WordPress plugin hoạt động với Google Analytics, editamp-post-template-actions.php(khác file bên trên), qua FTP hay bên trong WordPress Dashboard (Plugins > Editor và chọn “AMP”), và thêm vào ở cuối đoạn:

add_action( 'amp_post_template_head', 'amp_post_template_add_analytics_js' );
function amp_post_template_add_analytics_js( $amp_template ) {
$post_id = $amp_template->get( 'post_id' );
?>
<script async custom-element="amp-analytics" src="//cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php
}

add_action( 'amp_post_template_footer', 'xyz_amp_add_analytics' );

function xyz_amp_add_analytics( $amp_template ) {
    $post_id = $amp_template->get( 'post_id' );
    ?>
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
  "vars": {
"account": "UA-XXXXX-Y"
  },
  "triggers": {
"trackPageview": {
  "on": "visible",
  "request": "pageview"
}
  }
}
</script>
</amp-analytics>
    <?php
}

Nhớ phải đổi UA-XXXXX-Y để đại diện GA property ID của website.

Giờ thì validate lần nữa các trang AMP và bạn đã có setup AMP cơ bản và có thể tracking cho WordPress website.