什么是 AMP？AMP 页面和 SEO 初学者指南
贝塔
LIKE.TG | 发现全球营销软件&服务汇聚顶尖互联网营销和AI营销产品，提供一站式出海营销解决方案。唯一官网：www.like.tg
什么是 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缓存
- Bing 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 版本。
本文转载自:https://www.xnbeast.com/blog/page/
LIKE.TG：汇集全球营销软件&服务，助力出海企业营销增长。提供最新的“私域营销获客”“跨境电商”“全球客服”“金融支持”“web3”等一手资讯新闻。
点击【联系客服】 🎁 免费领 1G 住宅代理IP/proxy， 即刻体验 WhatsApp、LINE、Telegram、Twitter、ZALO、Instagram、signal等获客系统，社媒账号购买 & 粉丝引流自助服务或关注【LIKE.TG出海指南频道】、【LIKE.TG生态链-全球资源互联社区】连接全球出海营销资源。
本文由LIKE.TG编辑部转载自互联网并编辑，如有侵权影响，请联系官方客服，将为您妥善处理。
This article is republished from public internet and edited by the LIKE.TG editorial department. If there is any infringement, please contact our official customer service for proper handling.
点击流量推广流量上架APP涨粉攻略官网流量推广引粉自然流量TK流量霸屏广告品牌流量
