文旦知识课堂 > 高级搜索引擎优化 > 移动搜索引擎优化 > 什么是 AMP？AMP 页面和 SEO 初学者指南

什么是 AMP？AMP 页面和 SEO 初学者指南

admin
2024 年 01 月 15 日

6 分钟阅读

什么是 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>

正如您所看到的，主体内容很简单，但头部有额外的代码。

提示： 使用 AMP 的代码片段“playground”来涉足和练习代码。