在你网站上使用 Google AMP 技术

Jul 08, 2019AMP点击

AMP（也就是 Accelerated Mobile Pages 加速移动页面）的出现是为了提升移动设备上访问页面的速度，进而改善用户体验

其官网列出了一些 AMP 带来的好处，主要就是

  1. 更快的加载速度
  2. 更好的页面体验

创建一个 AMP 页面

依据 AMP 文档，新建一个 HTML 文件

把它要求的标签加入其中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!-- 文档类型 -->
<!doctype html>

<!-- 在 html 标签中添加 amp 属性 -->
<html amp lang="en">
  <head>
    <meta charset="utf-8">

    <!-- 引入 AMP 库 -->
    <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>

    <!-- CSS 样板 -->
    <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>

可以看到，和普通的 HTML 页面相比，AMP 还是有一些特殊要求的

比如说

  • 在 html 标签里添加了 amp 属性，这样就这个页面标识为 AMP 页面
  • 引入 AMP 库，有了这个库才能使用 AMP 的组件

（代码里的结构化数据，是另一回事）

包含图片

大部分的 HTML 标签是可以直接使用的，但有些标签（比如图片）需要使用 AMP 提供的标签

添加一个图片

1
<amp-img src="welcome.jpg" alt="Welcome" height="400" width="800"></amp-img>

我们可以在组件文档里查看 amp-img 的更多信息

需要特别注意的是，amp-img 这个组件所支持的布局类型

1
fill, fixed, fixed-height, flex-item, intrinsic, nodisplay, responsive

Layout & media queries 这个文章介绍了各种布局方式的区别

添加样式

想要添加自定义样式的话，需要在 head 里添加 <style amp-custom> 标签（页面里只能有一个样式标签）

1
2
3
4
5
6
7
8
9
10
<style amp-custom>
  /* any custom style goes here */
  body {
    background-color: white;
  }
  amp-img {
    background-color: gray;
    border: 1px solid black;
  }
</style>

对于样式，也是有 AMP 自己的规矩的

  • 不能有 -amp- class and i-amp- tag names 这样的类名
  • transition 的属性也有所限制

验证

在浏览器打开页面

添加#development=1到 URL 里

打开 Chrome 的控制台，就可以看到验证信息了

AMP 组件

上面的步骤已经完成了一个简单的 AMP 页面

实际项目中要开发的页面要远比它复杂

这个时候，我们就会用到 AMP 的组件来完成更复杂的功能

我们看一下如何添加一个 amp-carousel

  1. 首先要引入组件相关的 js 文件
1
<script async custom-element="amp-carousel" src="https://cdn.ampproject.org/v0/amp-carousel-0.1.js"></script>
  1. 然后加入组件代码
1
2
3
4
5
6
7
8
9
10
11
12
<amp-carousel width="450"
  height="300">
  <amp-img src="images/image1.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image2.jpg"
    width="450"
    height="300"></amp-img>
  <amp-img src="images/image3.jpg"
    width="450"
    height="300"></amp-img>
</amp-carousel>

也可以添加或更改amp-carousel 属性，来实现一些更加定制化的效果

总结

在实现上，我使用的是 node + pug + AMP

将页面部署上线之后，在 Google 搜索结果里出现了闪电小图标

点击进入，也利用到了 Google 提供的缓存

但 AMP 也有它的局限

  • 不能使用 JS， 未来可能会有改善
  • 页面的功能依赖于 AMP 提供的功能

如果你的页面是一个偏向展示的页面，没太多复杂交互，并且对 Google 搜索有较强需求，可以一试

原文作者: dgb8901,yinxing

原文链接: https://www.itwork.club/2019/07/08/google-amp/

版权声明: 转载请注明出处

webhtmlgoogleamp

为您推荐

体验小程序「简易记账」

关注公众号「特想学英语」

下载苹方字体