分享好友 最新动态首页 最新动态分类 切换频道
Google AMP 知识分享
2024-12-26 21:08

AMP,全称是 Accelerated Mobile Pages, 是 Google 推出的开源前端框架。AMP 最明显的特征就是 性能,被称为目前 WEB 届最快的框架毫不夸张。 Google 对 AMP 的性能进行了极致的优化,比如 JS 和网页数据放在缓存( 具体可看这篇文章:AMP 如何提升性能)。

Google AMP 知识分享

当然有必要做了。理由有 2 个:首先,是快!从内部一个 case 来看,AMP 页面在 Load Time 上比 PC 页面快 1 倍,在交互时间上快 2 倍。其次,SEO 流量会提升(具体可见下一部分 AMP Cache )虽说 Google 说过 AMP 并不会提升排名和流量,但从我们的实战经验来看,AMP 流量还是会有明显提升。

当 AMP 页面通过 Google 验证时,会纳入到 Google 的 AMP 索引库,并建立 Google AMP Cache。一旦有了 AMP Cache,当用户通过 Google 搜索访问网页时,将直接访问 Cache URL,而不是原网页 URL。数据也是直接访问 Google 的 CDN 缓存,而无需请求网站服务器。

 

举个例子:Alibaba List 页面 - Power Bank

AMP 地址:https://m.alibaba.com/amp/showroom/power-bank.html
CDN 缓存地址:https://www.google.com/amp/s/m.alibaba.com/amp/showroom/power-bank.html

在用户搜索时,有两个非常重要的点,大大提升了性能。第一个是 Google 将网页中的数据放在缓存服务器上,无需访问网站服务器。另一个是用户在搜索时Google 就对 AMP 页面进行了预加载,导致 AMP 可以秒开。

这 2 个特征对移动端访问极其重要,特别是在移动基建不好的国家和地区。

 

缓存更新策略

AMP 有主动和被动两种更新策略。

  • 主动更新。定期主动访问网页,更新缓存。
  • 被动更新。每次有用户访问网页,Google 会同时请求网页,更新缓存,保证每次用户访问都是最新数据。

不过需要注意的是,虽然有这 2 种更新策略,通过我们的实验,数据仍会有一定的延迟。所以实时数据仍需要实用异步请求( amp-list 组件,比如个性化数据,P4P 数据等。

上图是内部一个统计的 case。

很多网站本来就有了 PC 和 M 站,现在又来了个 AMP,如何适配呢?有两种适配形式

  • PC + AMP

这种形式比较简单,只需要配置好 amphtml 和 canonical 即可,aliexpress.com 就是这种情况。关系图如下

  • PC + M 站 + AMP

这种情况稍微复杂一点,alibaba.com 是采用这种形式。

也有网站存在更复杂的架构,比如 PC、M 站、AMP,以及英文和多语言,这里还有完整的架构关系图

从实战效果来看AMP 是不可错过的一项新技术,不管是在网页性能,还是对 SEO 流量的帮助。首先AMP 应该是 WEB 端性能最强的一个框架,Google 对性能的优化做到了极致。阿里的前端甚至也在参考 AMP 的思路对性能做提升。其次,虽然 Google 说过 AMP 不会有排名的优先,但从实战效果来看AMP 的流量还是会提高。AMP 算是近几年来难得的技术红利了。

AMP 如何验证

本地开发完成,需要对 AMP 页面进行验证。验证未通过是无法被 Google 收录的(上线时就会发现有很多问题)。可以通过以下几种工具来验证

  • AMP 在线验证工具: https://ampbench.appspot.com/validate?url=https://ampbyexample.com/
  • AMP 验证工具:https://validator.ampproject.org/
  • 另一个官方验证工具:https://search.google.com/test/amp
  • AMP chrome 插件验证工具:https://chrome.google.com/webstore/detail/amp-validator/nmoffdblmcmgeicmolmhobpoocbbmknc?hl=zh-CN
  • AMP 缓存链接生成工具:https://github.com/ampproject/amp-by-example/blob/master/src/30_Advanced/Using_the_Google_AMP_Cache.html (验证是否生成缓存,但不代表会出现在 Google 搜索中

AMP WordPress 插件

Google 已经推出了 WordPress AMP 官方插件,只要安装插件,即可将网站一键切换为 AMP 版本,极其方便 WordPress 用户使用。官方插件地址:https://wordpress.org/plugins/amp/

AMP 如何统计

AMP 可以使用 amp-analytics 组件进行数据统计。Google Analytics 和 百度统计均可支持。实现方式是

  • 在 区域添加该代码
 
  • 添加网页跟踪或时间跟踪的代码
 

参考文档

  • 将 Google Analytics(分析)添加到 AMP 网页 https://developers.google.com/analytics/devguides/collection/amp-analytics/?hl=zh-cn
  • 在 AMP 页面中添加百度统计 https://tongji.baidu.com/web/help/article?id=268&type=0&castk=LTE%3D

AMP 如何收录

AMP 主要依靠 PC 上 amphtml 链接进行收录。也可以单独提交 sitemap,但实测效果一般。另外需要注意的是,AMP 的收录率是低于一般网页的,也说明 AMP 的质量门槛较高。

 

AMP 能适用于百度吗

可以的。百度已经支持了 AMP,并有 API 可以支持提交收录和缓存更新。

百度 AMP 数据提交入口:https://ziyuan.baidu.com/mip/index?site=http%3A%2F%2Fwww.example.com/

AMP 只能在 chrome 使用

不是的。AMP 是一个开源的前端框架,可以支持所有的浏览器,并可以在所有的国家访问。

AMP 只能用在移动端

不是的。AMP 也可以支持 PC 端页面。

有了 PWA,还需要 AMP 吗

AMP 和 PWA 其实是不同的应用场景,并没有冲突,所以 AMP 和 PWA 是可以共存,并且是互补的。alibaba.com 就是 AMP 和 PWA 共同使用。

AMP 是收费的吗 需要授权吗

AMP 完全是免费的,只需要改造现有模版,立即就可以生效。最好的资料就是官方文档,快速入门这一页:https://www.ampproject.org/zh_cn/docs/getting_started/quickstart。

另外,AMP 也是不需要授权的,不像 Facebook 的 React Native。AMP 是完全开源的,没有任何侵权的问题。我曾经当面跟 John Muller 求证过。

已有 M 站,怎么做 AMP 的改造

最新文章
竞价区域推广费用收取明细表:公正公开,一目了然
在当今网络营销竞争激烈的市场中,竞价区域推广已成为众多企业寻求竞争优势的重要手段。为了确保公平竞争,公正公开的推广费用收取明细表是必不可少的。本文将为您介绍竞价区域推广的费用收取明细,帮助您了解整个过程。一、推广费用计算公
掌握Git分布式版本控制:从入门到实战
Git概述Git代码托管服务Git常用命令在IDEA中使用Git1.1 什么是Git Git是一个分布式版本控制工具,主要用于管理开发过程中的源代码文件(Java类、xml文件、html页面等),在软件开发过程中被广泛使用。 在IDEA开发
羊小咩在“双11”中展现智能化魅力,助力消费者享受美好生活
随着今年“双11”电商购物节的火热开启,各平台销售数据再创新高,消费热情持续升温。从京东、天猫到抖音电商,各大电商平台纷纷亮出亮眼成绩单,不仅展现了中国消费市场的强劲活力,更揭示了消费趋势的深刻变革。羊小咩作为新兴的消费服务
Mysql用户密码设置修改和权限分配
转载地址:http://www.cnblogs.com/top5/archive/2010/09/14/1825571.html, 复制记录下:一、更改密码  第一种方式:  1、更改之前root没有密码的情况    c:mysqlbinmysqladmin -u root password "yo
如何增加已上架宝贝销售规格
一、如何增加已上架宝贝销售规格?要增加已上架宝贝的销售规格,可以按照以下步骤进行:登录淘宝卖家平台:打开淘宝网站,点击页面右上方的“卖家中心”,选择“卖家后台”,输入账号密码登录。选择需要添加规格的商品:在卖家后台首页,点
怎么使用AI写作工具批量写作?批量AI智能写作的方法
随着科技的不断发展,人工智能(AI)技术在各个领域都有了广泛的应用,其中之一就是智能写作。对于需要大量文本创作的用户来说,批量AI智能写作成为提高效率的一项重要工具。本文将专心分享批量AI智能写作的
福昕PDF编辑器 13.3.624.26728
福昕pdf编辑器个人版是一款便捷实用、功能丰富的文档编辑工具,它拥有启动速度快、浏览迅速、内存占用小等多个优点,不仅可以浏览各种pdf文件,还能编辑pdf文档的页面内容,进行插入、修改、移除、旋转、复制等操作,使用起来非常的方便。
适当使用关键词,避免堆砌,优化独立站的SEO
在当今数字化时代,拥有一个独立网站已成为许多企业和个人展现自我的重要途径。然而,创建一个成功的网站仅仅是第一步,如何提升其可见性,尤其是在搜索引擎中的排名,显得尤为重要。这就是搜索引擎优化(SEO)的魅力所在。小编今天将为大
网购的口气清新剂竟是电子烟?电子烟乱象难禁,未成年人成最大受害者
未成年的儿子在正规网购平台购买了一款名为“口腔喷雾清新剂”的产品,吸食后直呼“味道真甜”,并吐出香精味的烟雾。陈女士仔细检查才发现,这竟是一款伪装成清新剂的电子烟。近年来,电子烟因其“低门槛”和隐蔽性成为市场乱象的重灾区。
许昌网站排名优化软件,提升网站排名的利器,许昌正规网站优化公司
许昌网站排名优化软件是提升网站排名的利器,通过专业的优化技巧和策略,帮助网站在搜索引擎中获得更好的排名。许昌正规网站优化公司则提供全方位的网站优化服务,包括关键词研究、内容优化、链接建设等,确保网站在搜索引擎中获得更高的曝
相关文章
推荐文章
发表评论
0评