AMP

AMP 实施最佳实践和常见陷阱

网站

编者注:以下客座文章由 Swetha GopalakrishnanRich Hall 撰写,他们是 Google 的网络生态系统顾问

这篇文章是关于 AMP 实施最佳实践的三部分系列文章的第二部分

  1. 如何衡量 AMP 页面的成功
  2. AMP 实施最佳实践和常见陷阱(本文)
  3. AMP 货币化最佳实践和常见陷阱(敬请关注!)

本系列文章的上一篇文章介绍了如何正确衡量 AMP 页面的性能。在本文中,我们将讨论构建高质量 AMP 页面时的最佳实践和常见陷阱。构建良好的用户体验非常重要,因为它可以提高用户获取和保留率。确保一切按照最佳实践实施将使您能够正确分析用户行为,并通过基于数据的明智决策来维护网站的质量。让我们深入探讨以下主要领域来解决这个问题

  • 用户参与度
  • 衡量用户行为
  • 可发现性
  • 监控和故障排除

如果您只想查看可以在 AMP 中实施的常见且重要的功能列表,请跳至 本文末尾的表格。

用户参与度

用户参与度与收入密切相关,这两个因素通常是发布者最关心的目标。

让我们深入了解发布者可以采用的最佳实践来推动用户参与度,以及如何在实施 AMP 时避免常见的陷阱。

内容和功能一致性

网站的 AMP 页面和非 AMP 页面在外观、内容和/或功能方面存在差异很常见。这可能是由于多种原因(过时内容、过时设计、预算、优先级变化等),但原因并不像缩小两者之间的差距那样重要。内容或功能的差异意味着某些用户在浏览网站时可能比其他用户体验更差。

内容和功能差异可能导致

  • 页面之间体验不一致,这可能会阻止用户浏览 AMP 页面。例如,如果非 AMP 页面的外观和感觉与 AMP 页面有很大不同(例如,个性化推荐仅在非 AMP 页面上可用),用户可能会感到困惑,并选择浏览非 AMP 页面而不是 AMP 页面。
  • AMP 页面上的第一印象较差。如果页面没有引人入胜的内容、功能和号召性用语(例如,导航、搜索、推荐文章等),用户将不会花时间浏览网站的其余部分。这会导致用户参与度降低,转化为页面浏览量降低和收入影响。

理想情况下,用户应该在两种类型的页面中看到相同的内容、功能和号召性用语。

示例:网络门户网站 Excite Japan 提供了此功能和内容一致性的一个很好的示例

网络门户网站 Excite Japan 的并排比较提供了一个很好的 AMP 页面和非 AMP 页面之间内容一致性的示例。

AMP 不断发展,以添加新的组件和功能。例如,<amp-script> 组件允许您编写在 Web Worker 中运行的自定义 JavaScript,而不会影响页面性能。有关可以在 AMP 中实施的常见且重要功能的列表,请参阅 附录

让用户保持在 AMP 体验中,以促进后续旅程

在可能的情况下,保持用户在 AMP 体验中以推动页面浏览量、每次会话的页面数,进而最大限度地提高更好的货币化机会非常重要。一些更复杂的用户旅程可能需要将用户重定向到非 AMP 页面。在这些情况下,强烈建议使用 PWA 结合 <amp-install-serviceworker> 组件。

以下是保持用户在 AMP 体验中的一些良好模式

示例:来自意大利的 La Iene 显示了网站内搜索结果的 AMP 链接

https://blog.amp.org.cn/wp-content/uploads/2020/12/ezgif.com-gif-maker-7.mp4
方法 2:继续浏览的号召性用语 (CTA)

示例:印度出版物 NDTV 在所有 AMP 页面的底部添加了一个“下一篇文章”CTA 按钮,以保持用户在 AMP 体验中

示例:Rakuten Japan 的 食谱 AMP 页面 包含一个号召性用语,该号召性用语将用户引导到使用 AMP 构建的 网络故事

https://blog.amp.org.cn/wp-content/uploads/2020/12/ezgif.com-gif-maker-8.mp4
方法 3:使用 amp-next-page 进行无限滚动

无限滚动 (amp-next-page) 的实施通过在用户到达文章末尾时从发布者的网站加载其他推荐内容,将 AMP 页面变成无限滚动的体验。这有助于增加页面浏览量,并提供货币化机会,因为广告单元可以插入页面之间 (公告)

示例:印度时报使用 1.0 版组件并在文章之间显示广告

https://blog.amp.org.cn/wp-content/uploads/2020/12/ezgif.com-gif-maker-9.mp4

A/B 测试

作为最佳实践,请对任何 UI/UX 和功能更改进行 A/B 测试以评估其有效性。 <amp-experiment> 组件支持 A/B 和多变量测试。该组件允许您定义可自定义的变体并配置您希望如何分配流量。该组件还包括分析集成,以便可以收集必要的数据来执行变体之间的统计比较。

要测试 AMP 与非 AMP,您可以遵循通常的测试方法,例如流量拆分测试。

其他资源

衡量用户行为

不准确地衡量用户行为是发布者经常遇到的一个陷阱,但这个问题很容易解决。设置正确的测量方法对于获得准确的数据以及帮助您做出有关 AMP 策略的决策至关重要。以下是一些需要牢记的事情

AMP Linker

我们经常听到发布者询问为什么 AMP 页面的跳出率异常高。AMP 页面的跳出率往往被夸大了,因为从 AMP 缓存到源站点的用户旅程没有得到正确跟踪。

AMP Linker 是一种在 AMP 缓存和您的源站点之间统一会话的方法。反过来,这使您能够准确地跟踪用户指标,例如跳出率和每次会话的页面数。

它如何适用于 AMP 缓存到非 AMP 导航的场景

实施步骤

测试和验证实施的步骤在本系列文章的 第一篇文章 中进行了全面介绍。如果您需要在暂存环境中进行测试,请查看 此帮助中心文章 中“设置验证”部分的“选项 3:通过 Chrome 开发者工具验证”。

自定义维度

在 Google Analytics 中,通常使用数据源维度来比较 AMP 与非 AMP 指标。由于数据源维度是 命中级别范围 变量,因此其值只能与发送它的页面相关联,这可能会导致不准确的信息,因为用户从一个数据源过渡到另一个数据源。例如,如果访问者从 AMP 文档开始会话并导航到使用其他技术构建的域上的其他页面,则最终数据源值将为“web”。这使得了解用户流量到您的域变得更加困难,并且可能令人困惑。

自定义维度是比较 AMP 和非 AMP 指标更可靠的方式,因为您可以将命中级和会话级范围维度结合起来,以提高准确性。

有两种类型的自定义维度可以实施。

  1. 会话级维度,用于识别从 AMP 开始的会话。
  2. 命中级维度,用于跟踪 AMP 缓存与源域的命中次数。

有关详细的实施步骤,请参阅 本系列的第 1 部分

与非 AMP 的测量一致性

为了对 AMP 和非 AMP 事件进行苹果对苹果的比较,请确保两种类型的页面之间存在测量一致性。例如,如果您正在测量非 AMP 上重要的号召性用语按钮,则应在 AMP 上测量相同的按钮和点击事件,以便正确比较性能。

<amp-analytics> 组件支持各种类型的事件和配置,您可以阅读有关 此处的信息。要了解有关哪些分析供应商支持 AMP 的更多信息,请查看 分析供应商列表。

可发现性

在您努力构建无缝的用户体验之后,您需要确保您的页面可以被用户发现。以下是一些最佳技巧。

  • 确保正确的 规范链接
  • 创建您网站上最受欢迎页面的 AMP 版本。

对于内容经常更新的页面,请在 缓存控制标头中为“max-age”设置适当的值。

例如,Treebo 发现他们的 AMP 页面在纠正规范链接后被发现。

“我们已经准备就绪并发布了第一个版本,然后等待了 3 天,让我们的 amp 页面被 Google 缓存。但它没有被缓存。现在我们不知道出了什么问题。深入挖掘后,我们发现由于 Google 尚未开始索引移动页面,并且我们所有的 amp 规范链接 <link href=”https://www.treebo.com/hotels-in-mumbai/” rel=”canonical”> 都是我们移动网站的一部分,所以这就是他们没有被抓取的原因!

来源:使用 AMP 改善用户体验

监控和故障排除

需要定期监控和故障排除,以确保页面的持续质量和可发现性。

监控

  • 检查分析报告中是否存在异常,例如突然的流量下降或异常的用户行为。
  • 检查 Google Search Console AMP 报告,了解是否存在无效页面或索引问题。
    • 有关 Google Search Console 报告的演练,请观看此 视频
  • CI 集成以进行自动监控
    • AMP Validator NPM 包集成到您的构建和测试管道中,并在生产环境中运行计划的检查。

故障排除

如果您在监控过程中遇到问题,以下是一些您可以开始故障排除过程的方法。

如果所有其他方法都失败,请联系 网站管理员社区论坛

总结

我们希望本文能为您提供一份全面的指南,帮助您为用户和企业成功实施 AMP。在接下来的几周内,我们将深入探讨货币化最佳实践。

如果您有任何问题或功能请求,请 在此处告知我们。

Swetha GopalakrishnanRich Hall(Google 网站生态系统顾问)发布

附录

在 AMP 中实施发布者网站上的常见功能

功能和优势组件示例
评论部分
优势:通过会话时间提高参与度
使用 amp-form + amp-list + amp-mustache + amp-access 的自定义评论部分
amp-facebook-comments
自定义评论部分
社交分享
优势
推动推荐流量
amp-social-share,amp-addthis
Cookie 同意amp-consent,amp-user-notification外部用户同意流程
高级用户同意流程
基于地理位置的同意流程
客户端用户同意流程
交互式和动态内容amp-list,amp-live-list,amp-animation交互式和动态内容
滚动到顶部
纽约时报示例
滚动时停靠视频amp-video-docking基本视频停靠
高级视频停靠
富媒体(照片库、视频、地图、图表等)媒体组件社交媒体嵌入,图像和画廊,amp-iframe
多媒体示例
新闻文章示例
生成个性化的用户旅程amp-listamp-access,amp-geo使用 amp-list 的地理位置
OAuth2 登录
付费墙、订阅和新闻稿注册
优势:通过付费文章和电子邮件订阅留住用户
amp-access,amp-form,amp-subscriptions,amp-subscriptions-googleAMP 付费墙演示
元素级无限滚动和加载更多按钮
优势:推动页面浏览量和会话时间
amp-list,amp-list-load-more加载更多和无限滚动
显示更多按钮
页面无限滚动
优势:推动页面浏览量,通过页面之间的广告位获利
amp-next-page公告,介绍最新的 amp-next-page