AMP

Hấp dẫn, mượt mà và tức thì

Dễ dàng tạo các website đặt người dùng làm ưu tiên hàng đầu với AMP.

Bắt đầu
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

AMP
là gì?

Các trang web hấp dẫn, mượt mà và tải gần như tức thì

AMP là một định dạng đơn giản và mạnh mẽ để đảm bảo website của bạn nhanh, đặt người dùng làm ưu tiên hàng đầu, và kiếm được tiền. AMP cung cấp thành công dài hạn cho chiến lược web của bạn bằng cách phân bổ trên nhiều nền tảng phổ biến và giảm chi phí vận hành cũng như phát triển.

<amp-img class="resp-img"
  alt="Desktop"
  width="550"
  height="368"
  src="images/Desktop.jpeg">
</amp-img>
<style amp-custom>
  .resp-img {
    max-width: 700px;
  }
</style>

Tạo các trải nghiệm web tuyệt vời cho người dùng trên web mở

AMP cho phép tạo các website và quảng cáo nhanh, đẹp và có hiệu quả cao, ổn định trên nhiều thiết bị và nền tảng phân phối. Các nhà phát hành và nhà quảng cáo có thể quyết định cách trình bày nội dung của họ để nhấn mạnh một trải nghiệm đặt người dùng làm ưu tiên hàng đầu.

Ảnh chụp màn hình của một website sử dụng AMP.
Ảnh chụp màn hình của một website sử dụng AMP.
Duy trì sự linh hoạt, kiểm soát và cắt giảm sự phức tạp trong mã của bạn Bạn có thể sử dụng CSS để tùy chỉnh phong cách và dữ liệu động để truy xuất những dữ liệu mới nhất khi cần.
Các khối xây dựng giúp đảm bảo hiệu quả Phải mất rất nhiều thời gian và công sức để xây dựng một website tuyệt vời. Các thành phần AMP đã được tối ưu sẵn cho hiệu quả tốt nhất.
Được phát triển cho một tương lai bền vững trong mạng lưới web mở cho tất cả mọi người Dự án AMP là một sáng kiến mã nguồn mở để bảo vệ tương lai của Internet thông qua việc cung cấp một trải nghiệm tốt hơn, nhanh hơn và thân thiện với người dùng hơn.
Tốc độ tải trang web sẽ cải thiện trải nghiệm của người dùng và các thông số kinh doanh chính Các trang AMP có thể được tải gần như tức thì – trên mọi thiết bị và nền tảng.
Rất dễ để tạo các trang AMP You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.
AMP có thể được áp dụng trên nhiều điểm tương tác web khác nhau Được sử dụng bởi các nền tảng phổ biến và toàn cầu như Google, Bing và Twitter, AMP mang đến người dùng một trải nghiệm tự nhiên trên tất cả các nền tảng bằng cách sử dụng các trang AMP mỗi khi có thể.

Chúng tôi luôn nỗ lực cải thiện tốc độ tổng quát. Nếu bạn phải mất nhiều thời gian để tải website của chúng tôi, thì dù chất lượng bài báo có trau chuốt đến đâu, một số người vẫn sẽ rời khỏi trang web trước khi họ đọc được nội dung của nó.

David Merrell, Quản lý Sản phẩm Cấp cao

Đọc các Câu chuyện thành công

AMP HTML gồm những gì

<!DOCTYPE HTML>
<html >
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="hello-world.html">
  <meta name="viewport" content="width=device-width">
  <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>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
  <script async custom-element="amp-geo" src="https://cdn.ampproject.org/v0/amp-geo-0.1.js"></script>
  <script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
</head>
<body>
  <amp-geo layout="nodisplay">
    <script type="application/json">
      {
        "AmpBind": true
      }
    </script>
  </amp-geo>
  <h1>Hello in <span [text]="country">...</span>!</h1>
  <button on="tap:AMP.setState({'country': ampGeo.ISOCountry.toUpperCase()})">Where am I?</button>
</body>
</html>

Hello
World!

Thành phần tích hợp

AMP HTML là HTML với một số hạn chế để đảm bảo hiệu quả.

Tuy hầu hết các thẻ trong một trang AMP HTML đều là các thẻ HTML thông thường, một số thẻ HTML sẽ được thay thế bằng các thẻ AMP cụ thể (xem thêm Thẻ HTML theo thông số AMP). Các yếu tố tùy chỉnh này được gọi là các thành phần AMP HTML và giúp bạn dễ dàng triển khai các mẫu thông dụng một cách hiệu quả.

Ví dụ, thẻ amp-img hỗ trợ toàn diện cho srcset kể cả trong các trình duyệt chưa hỗ trợ nó. Tìm hiểu cách để tạo trang AMP HTML đầu tiên của bạn.

Các trang AMP được khám phá bởi các công cụ tìm kiếm và nền tảng khác thông qua thẻ HTML. Bạn có thể chọn hiển thị một phiên bản không phải AMP lẫn một phiên bản AMP của trang web, hoặc chỉ một phiên bản AMP mà thôi.

Bộ nhớ đệm AMP

Các trang AMP có thể được lưu trong bộ nhớ đệm để tải gần như ngay lập tức trên web. Các nền tảng như Google vận hành các bộ nhớ đệm AMP để tải nhanh nội dung của bạn từ dịch vụ của họ.

Bộ nhớ đệm AMP của Google là một mạng lưới cung cấp nội dung dựa trên proxy để cung cấp tất cả các tài liệu AMP hợp lệ. Bộ nhớ này truy xuất các trang AMP HTML, lưu chúng vào bộ nhớ đệm, và sử dụng chúng để tự động cải thiện hiệu quả tải trang. Khi sử dụng Bộ nhớ đệm AMP của Google, tài liệu, tất cả các tập tin JS và tất cả ảnh sẽ được tải từ cùng một nguồn sử dụng HTTP 2.0 để đảm bảo hiệu suất tối đa.
Bộ nhớ đệm này cũng bao gồm một hệ thống xác thực được tích hợp trong để xác nhận rằng trang đó chắc chắn sẽ hoạt động tốt và không phụ thuộc vào các tài nguyên bên ngoài. Hệ thống xác thực sẽ chạy một chuỗi các kiểm tra để xác nhận rằng thiết kế của trang đáp ứng được các thông số của AMP HTML.

Một phiên bản khác của trình xác thực được kèm theo mọi trang AMP. Phiên bản này sẽ trực tiếp ghi lại mọi lỗi xác thực vào dòng lệnh của trình duyệt khi trang được render, cho phép bạn thấy cách những thay đổi phức tạp trong dòng mã có thể ảnh hưởng đến hiệu quả và trải nghiệm của người dùng.

Khám phá các trường hợp sử dụng của website AMP