Tất cả đều có chỉ trong 1 nốt nhạc !
Nếu cần hỗ trợ chi tiết gọi 1900 9477
AMP là gì? – Theo khảo sát của Google, khoảng 53% khách truy cập website sẽ rời đi nếu trang web này mất hơn 3s để load. Tốc độ tải trang là một trong những yếu tố quan trọng cần lưu tâm khi thiết kế websites. Vì vậy, khi Google phát hành bản update mobile-friendliness (thân thiện với mobile) và dần biến nó thành một trong những yếu tố đánh giá mobile search engine, các site owner dần tìm cách cải thiện mobile experience nhanh hơn.
Dù cho có tối ưu hóa trang cho người dùng mobile, nếu như trình duyệt mobile không tải nhanh hơn thì cũng khiến cho trải nghiệm người dùng bị gián đoạn. Vậy giải pháp nằm ở đâu? Cân nhắc qua AMP – hay còn được gọi Accelerated Mobile Pages. Hãy tìm hiểu AMP là gì và nó ảnh hưởng đến trải nghiệm người dùng mobile như thế nào.
Nội dung
Theo Google, AMP plugin có thể cắt giảm thời gian download từ 15 đến 85%. Tháng 12 năm 2015, Google phát biểu rằng Accelerated Mobile Pages có thể trở thành một yếu tố ranking (đánh giá trang). Các trang được tối ưu hóa AMP được thăng hạng tốt hơn, nhanh hơn và thậm chí còn chuyển đổi khách truy cập trang (visitor) sang khách mua hàng (customer).
AMP plugin ra đời giữa sự kết hợp giữa Google và Twitter – dự án open-source với mục đích tối ưu hóa tốc độ tải page trên điện thoại, biến một trang (vốn đã mobile friendly) có thể load nhanh hơn bằng cách tối giản hóa chỉ giữ những chức năng cơ bản.
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.
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%
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.
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.
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.
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.
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 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:
streamlined
.
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:
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:
Quy tắc | Mô tả |
Bắt đầu với cụm <!doctype html> |
Tiêu chuẩn của HTML |
Chứa tag <html ⚡> ở đầu(<html amp> cũng được) |
Xác định trang này là AMP content |
Chứa tag <head> and <body> |
HTML chính quy thì có hay không cũng được, nhưng AMP thì bắt buộc |
Chứa tag <meta charset="utf-8"> như là tag con của tag <head> . |
Xác định encode cho trang |
Chứa tag <script async src="https://cdn.ampproject.org/v0.js"></script> bên trong thẻ <head> . Tốt nhất là để script này sớm nhất có thể trong thẻ head |
Bao gồm và tải thư viện AMP JS |
Chứa tag <link rel="canonical" href="$SOME_URL"> bên trong <head> |
Hướng document AMP HTML đến phiên bản HTML chính quy |
Chứa tag <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1"> trong tag <head> . Nên có luôn initial-scale=1. |
Xác định viewport responsive. |
Chứa AMP boilerplate code trong thẻ <head>. | CSS boilerplate dùng để tạm ẩn content cho tới khi AMP JS được load |
(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="https://cdn.ampproject.org/v0.js"></script>
<title>Hello, AMPs</title>
<link rel="canonical" href="https://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": "http://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>
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.
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.
Như đã hướng dẫn kiểm tra Google AMP ở trên, hãy truy cập vào Google Search Console để đảm bảo tính tương thích của trang AMP của mình. Đừng quên theo dõi các trang AMP của mình thường xuyên để đảm bảo chúng không mắc lỗi.
hoặc kiểm tra trực tiếp trên https://search.google.com/test/amp
Đối với WordPress, bạn có thể cài đặt plugin AMP miễn phí. Và dưới đây là cách để cài đặt plugin này:
Ở đây có nhiều tab để bạn có thể điều chỉnh trang AMP theo ý mình, ví dụ như:
AMP thực sự khá tiện lợi, là bản nâng cấp của các trang mobile-friendly, giúp đáp ứng mong đợi tối ưu tốc độ của trang. Tuy nhiên ngoài việc tập trung vào AMP cũng đừng bỏ qua thiết lập các chiến lược mobile marketing phù hợp để tạo ra khách hàng và phát triển doanh nghiệp.