什么是 AMP?
AMP(以前称为 Accelerated Mobile Pages)是一个开源 HTML 框架,可帮助创建快速加载的移动优化网页。
因此,AMP 页面本质上是常规网页的精简版本。
它可以看起来像这样:
谷歌率先推出了这个开源项目,来与 Facebook Instant Articles以及Apple News 竞争。
这两者都允许发布者创建加载速度快且易于使用的内容。
Google 于 2016 年首次在移动搜索结果中提供 AMP 页面。它们仅限于 SERP 顶部的“头条”部分。
像这样:
它最初是为新内容发布者设计的。后来扩展到所有页面。
AMP 是如何工作的?
AMP 框架由三个基本组件组成:
- AMP HTML
- AMP JavaScript
- AMP 缓存
AMP HTML
AMP HTML 是具有某些限制的 HTML,以确保页面快速加载。它删除或修改了一些可能减慢网页速度的元素和属性。
一个简单的 HTML 文件可能如下所示:
从根本上来说,AMP HTML 文档必须:
- 以<!doctype html>开始 (向浏览器发送有关期望的文档类型的信息)
- 包含顶级<html ⚡> 或 <html amp> 标签(以指示它是 AMP HTML 页面)
- 包含<head> 和<body> 标签(定义文档的内容,即标题、段落、图像、超链接、表格等)
- 包含 a <link rel=”canonical” href=”URL”> (指示页面的常规 HTML 版本或在不存在常规页面时链接到自身)
- 包含<meta charset=”utf-8″> 标签(指定字符编码)
- 包含<meta name=”viewport” content=”width=device-width”> 标签(向浏览器提供有关如何控制页面尺寸的说明)
- 包含<script async src=”https://cdn.ampproject.org/v0.js”><script> 标签(将扩展添加到基础库)
- 在 head 标签中包含AMP 样板代码 (head > style[amp-boilerplate]和)noscript > style[amp-boilerplate]
有关特殊标签、属性和模板的更多详细信息,请查看 AMP 的官方AMP HTML 文档。
AMP JavaScript
JavaScript 很棘手,因为太多的 JS 会使网页变得缓慢且无响应。
但是,AMP 的JavaScript 库包含框架和组件,可让你快速构建页面,而无需编写 JS 或导入第三方库。
所有这些对于读者的体验都至关重要。
AMP 缓存
AMP 缓存是一种基于代理的内容交付网络 (CDN),可在用户请求之前预获取和预渲染 AMP 页面。
它改变了网站速度。
为什么?
因为它可以让你的站点一次从不同的服务器加载多个部分。它还允许访问者从距离他们最近的服务器加载你的网站。
这意味着你的网站对于更多人来说加载速度非常快。
目前有两个主要的 AMP 缓存提供商:
当你使用 AMP 格式时,这些平台会缓存你的页面。
例如,缓存提供商可以通过<html ⚡> 或<html amp> 标签发现你的 AMP 页面并缓存其内容。
或者发布者可以手动将页面添加到 AMP 缓存(仅适用于Google AMP 缓存)。
其他平台可以通过其 URL 访问缓存的 AMP 页面。
例如,如果你将 /amp 放在任何新闻报道的末尾,你将看到 AMP 版本。
像这样:
专业提示: 如果不确定你的网站是否有 AMP 页面,可以使用 Semrush 的网站审核工具进行检查。
首先添加域名并单击“开始审核”。
然后,转到仪表板中的“统计”选项卡,你将看到一行“AMP 链接”。
像这样:
AMP 页面的优点和局限性
虽然 AMP 可以提高页面的性能和用户体验,但它也有一定的缺点。
让我们看一下 AMP 页面的优缺点:
AMP优点
- 页面加载几乎是即时加载
- 页面易于构建
- 改善移动设备上的用户体验
- 允许定制设计
- 包括 Google 和 Bing 在内的多个平台都支持它
AMP的局限性
- Google 不再显示 AMP 徽章图标来指示 AMP 内容
- 设计元素非常有限
- AMP 页面每页仅允许一个广告标记
如何在网站上设置 AMP
你可以通过遵循 HTML 标记或使用 CMS(通过插件或自定义功能)来创建 AMP 页面。
创建 HTML AMP 页面
基本代码
首先,这是基本 AMP 页面的基本代码:
<!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″>
<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 id=”hello”>Hello AMPHTML World!</h1>
</body>
</html>
如上所示,主体内容很简单,但头部有额外的代码。
添加图像
如果要添加图像,则需要将常规 HTML 标记替换为 AMP 等效标记。
在这种情况下, 使用<amp-img> 标签而不是<img>.
要对其进行测试,请将以下代码复制并粘贴到页面的 <body> 中。
<amp-img src=”https://source.unsplash.com/random/600×400″ width=”600″
height=”400″></amp-img>
添加样式
下一步是添加样式。
任何样式都必须使用 CSS 属性来完成。但是,AMP 规定所有 CSS 都包含在一个自定义标记中,称为<head>文档中的 <style amp-custom> 。
例如,尝试将以下样式添加到页面:
<style amp-custom>
h1 {
margin: 1rem;
}
body {
background-color: green;
}
</style>
JavaScript
AMP 允许通过<amp-script> 组件自定义 JavaScript。
它允许以保持 AMP 性能保证的方式编写和运行自己的JS。无需编写 JavaScript 或使用外部库即可快速构建页面。
审查和验证
有效的 AMP 页面意味着它遵循严格的准则,确保其符合缓存条件并创造出色的用户体验。
在验证 AMP 网页之前,请确保遵循以下实操:
- 如果要针对 Google 进行优化,请遵循他们的AMP 网页指南
- 将 AMP 页面链接到Canonicals(非 AMP 版本或 AMP 页面本身)
- 在 AMP 和规范页面中使用相同的结构化数据标记
- 使用富文本摘要测试验证结构数据是否有效
- 验证txt文件不会阻止 AMP 网页
- 遵循国际 SEO hreflang指南
当你准备好进行审核时,请使用AMP 测试工具确保页面满足所有要求。
使用 CMS 创建你的 AMP 页面
如果你通过 CMS 管理内容,则可以使用Drupal、Joomla或WordPress。
例如,让我们看看使用AMP for wordpress插件是什么样子。
在 WordPress 上激活插件后,您可以开始创建 Accelerated Mobile Pages。
首先添加新页面或新博客文章。
然后点击“Start the AMP Page Builder”。
突出显示“启动 AMP 页面生成器”按钮
你可以选择使用预先构建的布局或使用拖放元素构建自己的布局。
然后单击齿轮图标编辑页面的元素。
并在保存每个模块。
发布页面后,你将通过在页面网址末尾添加“amp”来看到该页面的 AMP 版本。