AMP

引人注目、平滑且瞬时

使用 AMP 轻松创建用户至上的网站。

使用入门
一张网站屏幕截图。
<amp-sidebar
  id="sidebar"
  layout="nodisplay"
  side="right"" ""left"
</amp-sidebar>

什么是
AMP?

引人注目、平滑且几乎瞬时加载的网页

AMP 是一种简单而强大的格式,可以确保您的网站灵活迅速、以用户为中心并能创造收益。AMP 在热门平台分发,能够降低运营和开发成本,可以持续助力您的网络战略。

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

为开放网络中的用户打造出色的用户体验

AMP 使网站和广告能够在不同的设备和分发平台上始终保持快速、美观和高性能。发布商和广告客户可以决定如何在内容中呈现用户至上的体验。

保持代码的灵活性和控制力,降低代码的复杂性 您可以根据需要使用 CSS 定制样式和动态数据来提取最新数据。
确保性能的构建块 创建优秀网站需要花费大量的时间和精力。AMP 组件已优化,可以获得最佳性能。
在对所有人开放的网络中打造一个可持续发展的未来 AMP 项目是开放源代码项目,旨在通过提供更好、更快、更人性化的用户体验来保护网络的未来。
网页速度可以提升用户体验与核心业务指标 AMP 网页在所有设备和平台上都可以近乎瞬时加载。
AMP 网页易于构建 You can often convert your entire archive in days – especially when using common CMS like WordPress or Drupal.
AMP 可以应用于各种网络接触点 Google、Bing 和 Twitter 等全球平台均已使用 AMP。通过默认应用 AMP 网页,可为所有平台的用户提供原生体验。

我们致力于全面提高速度。如果网站需要很长时间加载,那么我们的新闻水平再高也没有任何意义,因为有些用户在看到内容之前就会离开网页。

David Merrell,高级产品经理

阅读成功案例

AMP HTML 组成元素

<!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!

内置组件

AMP HTML 是存在一些限制,可以实现可靠性能的 HTML。

尽管 AMP HTML 网页中的大多数标记都是常规 HTML 标记,但部分 HTML 标记被替换为 AMP 特定标记(另请参阅“AMP 规范中的 HTML 标记”)。利用这些自定义元素(称为 AMP HTML 组件)可以轻松高效地实现常见的模式。

例如,即使在尚不支持 srcset 的浏览器中,amp-img 标记也提供了完整的 srcset 支持。了解如何创建您的第一个 AMP HTML 网页。

搜索引擎和其他平台通过 HTML 标记发现 AMP 网页。您可以选择一个非 AMP 版本和一个 AMP 版本的网页,或者仅 AMP 版本的网页。

AMP 缓存

AMP 网页可被缓存,以在网络上实现近乎瞬时的加载。Google 等平台通过 AMP 缓存从其服务中快速加载您的内容。

Google AMP Cache 是一种基于代理的内容交付网络,用于交付所有有效的 AMP 文档。它可提取 AMP HTML 网页,对网页进行缓存,并自动提升网页性能。使用 Google AMP Cache 时,文档、所有 JS 文件和所有图片都从使用 HTTP 2.0 的同一来源加载,从而可实现最高效率。
此外,Google AMP Cache 还带有内置验证系统,可确认网页能够正常工作,并且不依赖于外部资源。验证系统会运行一系列断言,确认网页的标记符合 AMP HTML 规范。

另一个版本的验证工具与各个 AMP 网页捆绑提供。此版本可在网页呈现时将验证错误直接记录到浏览器的控制台中,让您可以看到代码中的复杂变化可能会对性能和用户体验产生怎样的影响。

探索 AMP 网站的用例