Hotline : 07 088 44444
Thích
Chia sẻ

AMP Là Gì

19/08/2021

AMP tăng trải nghiệm người dùng trên giao diện mobile về tốc độ tải trang, giao diện được tối giản,…cải thiện kết quả tìm kiếm Google. Vậy, AMP là gì? Cùng Vietnix tìm hiểu ngay dưới đây.

AMP là gì?

AMP là một dự án mã nguồn mở được viết tắt là Accelerated Mobile Pages để đảm bảo rằng các trang web di động hoạt động ở tốc độ tối ưu.

AMP là gì?
AMP là gì?

AMP được xây dựng với sự cộng tác của hàng nghìn nhà phát triển, nhà xuất bản, trang web, công ty phân phối và công ty công nghệ. Hơn 1,5 tỷ trang AMP đã được tạo cho đến nay và hơn 100 nhà phân phối phân tích, công nghệ quảng cáo và CMS hàng đầu hỗ trợ định dạng AMP.

Kỹ thuật được áp dụng trong AMP

Khi người dùng tìm kiếm kết quả trên thiết bị di động, các trang web có Google AMP sẽ xuất hiện trong kết quả tìm kiếm của Google với biểu tượng tia chớp và các từ AMP ngay bên cạnh liên kết. Chẳng hạn như: Các trang kết hợp AMP với Rich Cards sẽ có cơ hội hiển thị trực quan trong tìm kiếm của Google để tăng khả năng nhấp chuột (tăng tỷ lệ CTR) cho website.

Sử dụng hộp tin AMP với hình ảnh trực quan và cuộn ngang sẽ tăng cơ hội hiển thị số lượng tin bài trong kết quả tìm kiếm, tăng khả năng tiếp cận của người dùng và tăng uy tín, chất lượng nội bộ cho thương hiệu của bạn.

  • Kỹ thuật Lazy Loading Image: Đây là kỹ thuật làm giảm việc tải hình ảnh, nó sẽ load khi người dùng lướt hoặc cần tới. Cụ thể khi người dùng lướt tới hình đó thì hình ảnh mới xuất hiện. Việc này sẽ giảm được tải nguyên khi tải trang web.
  • Kỹ thuật tải JavaScript bất đồng bộ asyns: Website có thể chạy đoạn code, upload dữ liệu phía dưới. Cho dù phần dữ liệu phía trên chưa được xử lý đầy đủ. Vì vậy, người dùng sẽ giảm được thời gian tải trang.
  • Kỹ thuật CDN: 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. Sẽ truyền tải nội dung từ một nguồn đến với người dùng một cách nhanh chóng.

Nếu bạn sử dụng thiết bị di động, khi bạn search những website có Google AMP sẽ xuất hiện trên kết quả tìm kiếm. Với biểu tượng tia sét như hình dưới đây:

google amp là gì
Xuất hiện AMP trên kết quả tìm kiếm

Thành phần cốt lõi của AMP

Các trang AMP được xây dựng với ba thành phần cốt lõi sau:

HTML AMP

HTML AMP về cơ bản chỉ là HTML với một số hạn chế để có hiệu suất đáng tin cậy. File HTML AMP đơn giản nhất giống như sau:

HTML AMP
HTML AMP

Hầu hết các thẻ trong HTML AMP là các thẻ HTML thông thường, tuy nhiên, một số thẻ HTML được thay thế bằng các thẻ dành riêng cho AMP. Các thẻ tùy chỉnh này được gọi là các thành phần HTML AMP và chúng làm cho các mẫu thẻ phổ biến dễ triển khai một cách hiệu quả. Các trang AMP được phát hiện bởi các công cụ tìm kiếm và các nền tảng khác bằng thẻ HTML.

Bạn có thể chọn phiên bản non-AMP và phiên bản AMP trên trang của mình hoặc chỉ phiên bản AMP.

JavaScript AMP (JS)

Thư viện AMP JS đảm bảo hiển thị nhanh các trang HTML AMP. Thư viện JS triển khai tất cả các phương pháp hiệu suất tốt nhất của AMP như CSS nội tuyến và kích hoạt phông chữ, điều này quản lý việc tải tài nguyên và cung cấp cho bạn các thẻ HTML tùy chỉnh để đảm bảo hiển thị trang nhanh chóng.

JavaScript AMP
JavaScript AMP

AMP JS làm cho mọi thứ từ các tài nguyên bên ngoài trở nên không đồng bộ để mà mọi thứ hiển thị trên trang sẽ không bị chặn. JS cũng sử dụng các kỹ thuật hiệu suất khác như sandboxing của tất cả các iframe, tính toán trước bố cục của mọi phần tử trang trước khi tải tài nguyên và tắt các CSS selector chậm.

Bộ nhớ đệm AMP (AMP Cache)

Google AMP Cache được sử dụng để phân phát các trang HTML AMP được lưu trong bộ nhớ cache. AMP Cache là mạng phân phối nội dung dựa trên proxy, nó được sử dụng để phân phối tất cả các tài liệu AMP hợp lệ. Cache tìm nạp các trang HTML AMP, lưu vào bộ nhớ cache và tự động cải thiện hiệu suất trang.

Để duy trì hiệu quả tối đa, AMP Cache tải tài liệu, file JS và tất cả hình ảnh từ cùng một nguồn sử dụng HTTP 2.0.

AMP Cache đi kèm với một hệ thống xác thực tích hợp để đảm bảo trang web hoạt động và nó không phụ thuộc vào các tác động  bên ngoài có thể làm chậm trang. Hệ thống xác thực hoạt động dựa trên một loạt các xác nhận đảm bảo việc đánh dấu trang đáp ứng các thông số kỹ thuật HTML AMP.

Ba thành phần cốt lõi của AMP hoạt động đồng thời để giúp các trang có thể tải nhanh chóng. Phần tiếp theo sẽ làm nổi bật bảy kỹ thuật tối ưu hóa kết hợp để tạo ra các trang AMP nhanh như vậy.

Ưu điểm và nhược điểm của Google AMP

Ưu điểm của AMP

  • AMP cải thiện đáng kể trải nghiệm người dùng cho những khách truy cập trên thiết bị di động có kết nối internet chậm. Nó làm cho nội dung hiển thị trở nên gọn gàng và nhanh chóng, có nghĩa là khách truy cập của bạn sẽ không phải đợi trang web của bạn tải. Điều này đương nhiên sẽ dẫn đến nhiều lưu lượng truy cập hơn, miễn là nội dung hữu ích.
  • Google đang khuyến khích sử dụng AMP bằng cách tăng kết quả tìm kiếm trên thiết bị di động. Thêm AMP vào trang web sẽ giúp cải thiện SEO của bạn.
  • Nội dung trang web tuân thủ các tiêu chuẩn AMP có cơ hội xuất hiện trong băng chuyền ở đầu kết quả tìm kiếm trên điện thoại di động của Google, điều này có thể cải thiện đáng kể khả năng hiển thị trang web của bạn.
  • Có AMP trên trang web sẽ giảm tải trên các hosting server của bạn, điều này sẽ giúp cải thiện hiệu suất trang web.

Nhược điểm của AMP

  • Vì AMP sử dụng một bộ HTML, JavaScript và CSS hạn chế, cho nên việc thêm một số tính năng và tiện ích vào nội dung sẽ không dễ dàng. Việc thêm AMP có thể ngăn bạn thêm CTA (calls to action), nút chia sẻ và các script động khác. Lưu ý: Với AMP cho WP, có nhiều tùy chọn hơn để thêm các chức năng khác nhau. Vì vậy bạn nên kiểm tra xem nó hoạt động như thế nào với trang web của bạn.
  • Plugin AMP của Automattic chỉ hỗ trợ Google Analytics. Đây không hẳn là một nhược điểm. Plugin AMP dành cho WP có nhiều tùy chọn phân tích hơn, bao gồm: Phân tích phân đoạn, Phân tích Piwik, Đo lường lượng tử, comScore, Đo lường hiệu quả, StatCounter, HiStats Analytics, Yandex Metrika và Chartbeat Analytics.
  • Nó có thể hạn chế cơ hội quảng cáo trên trang web của bạn. Mặc dù quảng cáo được phép xuất hiện trong nội dung AMP, nhưng việc thêm quảng cáo khó hơn so với trên trang “di động bình thường, non-AMP”. Google đang nỗ lực mở rộng các loại quảng cáo được hỗ trợ, vì vậy hãy chờ xem điều này sẽ đi đến đâu. Lưu ý: Plugin AMP dành cho WP hỗ trợ nhiều định dạng quảng cáo và chúng có tiện ích mở rộng cao cấp để mở rộng khả năng quảng cáo hơn nữa.
  • Nếu bạn quyết định cài đặt và định cấu hình AMP trên trang web của mình và sau đó muốn remove nó, bạn sẽ phải thiết lập chuyển hướng 301 trở lại các bài đăng non-AMP. Đây không phải là một vấn đề lớn, nhưng là điều cần cân nhắc trước khi cài đặt AMP.

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

Mặc dù AMP không phải là một yếu tố của công cụ tìm kiếm trực tiếp, nhưng tốc độ thì có. Tốc độ là một thành phần quan trọng của xếp hạng công cụ tìm kiếm. Do đó, AMP sẽ ảnh hưởng đáng kể đến SEO nếu trang web của bạn không đạt tốc độ ngang bằng.

Ví dụ: Hai trang web có thể xếp hạng tương tự khi nói đến SEO, tuy nhiên, trang nào có tốc độ cao nhất sẽ được ưu tiên hơn.

Đây là một ví dụ rõ ràng về tốc độ có thể ảnh hưởng đến thứ hạng SEO như thế nào. Nói một cách ngắn gọn, AMP tăng tốc độ và làm cho nội dung ở tất cả các định dạng sẵn sàng để người dùng tương tác ngay lập tức. Câu hỏi hiện tại mà tất cả các nhà tiếp thị nên tự hỏi mình là “Trang web của tôi có thân thiện với thiết bị di động không và nó có vượt qua bài kiểm tra tốc độ không?”

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

Tiếp theo, hãy tìm hiểu các bước để cài đặt AMP cho trang web của bạn. Việc tạo trang AMP phải tuân thủ đặc điểm kỹ thuật HTML AMP. Nếu bạn là người mới bắt đầu, hãy tìm hiểu kỹ cách tạo HTML AMP. Thông thường, mã AMP của trang sẽ giống như sau:

<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ưu trữ AMP trên URL

Khi người dùng nhấp vào liên kết đến trang AMP của bạn từ Google. Tìm kiếm, URL AMP sẽ được hiển thị cho họ trong trình duyệt (giống như bất kỳ trang web nào khác). Hiển thị một URL không liên quan đến trang web chính của bạn có thể gây nhầm lẫn cho người dùng, vì vậy bạn cần lưu trữ trang AMP ở một URL phù hợp với người dùng để tạo điều kiện thuận lợi cho việc tìm kiếm của họ.

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

Hãy liên kết các trang của bạn để nội dung trang web có thể khám phá. Để thu thập thông tin và lập index, Google yêu cầu trang AMP liên kết với một trang chuẩn. Trang chuẩn có thể là phiên bản non-AMP của trang hoặc có thể là trang AMP.

Để giải quyết vấn đề này, bạn sẽ thêm thông tin về các trang AMP vào các trang non-AMP và ngược lại, dưới dạng thẻ <link> trong <head>.

Thêm phần sau vào các trang non-AMP:

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

Thêm phần sau vào trang AMP:

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

Nếu bạn chỉ có một trang AMP, bạn vẫn phải thêm liên kết chuẩn đến nó, sau đó sẽ chỉ cần trỏ đến chính nó:

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

Các trang AMP độc lập cũng sẽ được lập index nếu chúng có thể được tìm thấy vì vậy hãy liên kết các trang này với các trang được lập index khác hoặc được liệt kê trong sơ đồ trang web (XML) của bạn.

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

Bước 1: Vào WordPress Select Plugins sau đó vào Add New.

Bước 2: Nhập tên plugin “AMP cho WordPress” vào thanh tìm kiếm và tìm kiếm đúng plugin AMP cho plugin WordPress.

Bước 3: Nhấp vào “Install” để cài đặt.

Bước 4: Sau khi cài đặt xong, chuyển đến tab Appearance sau đó đến AMP. Ngoài ra, bạn có thể chọn AMP WordPress để áp dụng cho trang web hoặc bài đăng tùy chỉnh của mình bằng cách truy cập trang tổng quan WordPress và chuyển đến AMP> General:

Trong tùy chọn Post Type Support, chọn phần bạn muốn điều chỉnh và chọn Save Changes để hoàn tất thao tác.

Trong trường hợp trang của bạn có nhiều plugin khác để bạn tăng khả năng tùy chỉnh. Chẳng hạn như Glue cho Yoast SEO & AMP để tích hợp plugin Yoast SEO vào thiết lập AMP của bạn cho WordPress. Đi tới phần Plugins › Add New , sau đó tìm, cài đặt và kích hoạt plugin Yoast SEO.

Nếu bạn có thắc mắc hay có vấn đề cần hỗ trợ, bạn có thể liên hệ trực tiếp với Vietnix thông qua các kênh sau:
  • Hotline: 1800 1093 - 07 088 44444
  • Email: support@vietnix.vn
  • Hoặc chat trực tiếp với Vietnix thông qua biểu tượng Livechat ở góc phải màn hình. Đội ngũ chuyên viên của chúng tôi luôn sẵn sàng tư vấn và hỗ trợ bạn 24/7.
Vietnix hiện đang có chương trình khuyến mãi lớn nhất trong năm, giảm giá TRỌN ĐỜI: Đăng ký dùng thử ngay và Vietnix sẽ hoàn tiền 100% nếu quý khách không hài lòng với chất lượng sản phẩm, dịch vụ!
Mình là Bo - admin của Quản Trị Linux. Mình đã có 10 năm làm việc trong mảng System, Network, Security và đã trải nghiệm qua các chứng chỉ như CCNP, CISSP, CISA, đặc biệt là chống tấn công DDoS. Gần đây mình trải nghiệm thêm Digital Marketing và đã hòan thành chứng chỉ CDMP của PersonVUE. Mình rất thích được chia sẻ và hỗ trợ cho mọi người, nhất là các bạn sinh viên. Hãy kết nối với mình nhé!
Bài viết liên quan
Không có bài viết liên quan
Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments