标签: AMP

  • 如何在WordPress中实现Google AMP

    如何在WordPress中实现Google AMP

    网络在不断发展,对于许多企业主来说,这意味着需要跟上Google的所有变化。如果您不适应,则意味着您可能会落后。Google AMP是他们加速网络的移动计划,本文将分享有关如何在WordPress中开始使用Google AMP的一些步骤的好时机,以及一些利弊新平台。

    什么是Google AMP?

    Google AMP(加速移动页面项目)最初于2015年10月启动。该项目依赖于AMP HTML,这是一个完全基于现有网络技术构建的新开放框架,允许网站构建轻量级网页。简而言之,它提供了一种提供当前网页的精简版本的方法。

    从第一天起,AMP的重点就是速度。这可以说是移动网络最令人沮丧的事情之一——谷歌最近的研究证实了这一点,该研究表明,53%的人会离开一个无法在三秒或更短时间内加载的网站。对于用户、企业、出版商、网站和整个移动网络来说,这是最糟糕的情况。— David Besbris,Google AMP项目负责人

    根据Akamai最新的《在线零售绩效状况》报告 ,每十分之一秒都很重要。即使页面加载时间略有增加到2.8秒,转化率也会下降2.4%。

    与移动速度和转化率的相关性

    与移动速度和转化率的相关性

    许多大公司在过去一年中都采用了Google AMP,其中包括WordPress、Reddit、eBay、Pinterest、华盛顿邮报、Wired、Gizmodo等。据Google称,Slate的每月独立访问者增加了44%,每个月独立访问者的访问次数增加73%

    当一个页面在Google中通过AMP提供服务时,它旁边会有一个AMP符号,如下面的纽约时报演示所示。请注意,您必须在移动设备上进行测试。您还可以在Chrome devtools中使用设备模拟器。结构化数据标记允许Google在搜索结果中更突出地显示您的内容。例如,包含适当标记属性的AMP文章可能会在SERP中获得令人垂涎的轮播位置,如下所示。

    Google AMP轮播

    Google AMP轮播

    这是纽约时报网站上AMP页面的示例。如您所见,它非常基础和简单,这正是AMP的目标。这可确保它快速加载并提供更好的可用性。

    Google AMP页面示例

    Google AMP页面示例

    与任何新平台一样,您应该权衡利弊,并决定它是否适合您的业务和/或网站。

    Google AMP的优点

    • AMP是免费和开源的。
    • AMP绝对可以改善您的WordPress网站的加载时间。请记住,速度是一个排名因素。
    • 在SERP中更好的展示位置,具有轮播的可能性,以获得更好的点击率。在与流行发布商的一项实施中Google AMP的点击率达到了600%
    • Google AMP强制采用许多推荐的Web性能实践,例如防止大型CSS和JS框架。
    • 可能会以积极的方式影响您的转化。
    • 在过去的一年中进行了很多改进,现在Google AMP中可以轻松获得广告选项。这意味着杂志和新出版物可以保留甚至增加其AdSense收入。
    • 自动图像优化(甚至转换为WebP格式!)
    • AMP Lite为慢速网络连接引入了进一步优化。Google的字节数总共减少了45%。

    Google AMP的缺点

    • AMP目前不是排名因素,但将来可能会。这可以被视为利弊。
    • 如果您不是开发人员,AMP可能难以实施和测试。然而,幸运的是WordPress平台比其他平台更容易一些。
    • 引入了您必须担心的全新独立平台和功能。简单地优化我们的移动网站发生了什么?
    • 可能会以负面方式伤害或影响您的转化。
    • 有报道称,谷歌AMP在谷歌分析中弄乱了统计数据
    • 有些人的参与度更差,跳出率更高。
    • 仍然是可能不受支持的第3方脚本和应用程序。
    • 不支持某些较旧的浏览器,例如Internet Explorer 11。他们表示,总的来说,他们将支持Chrome、Firefox、Edge、Safari和Opera等主要浏览器的2个最新版本。它们支持桌面、手机、平板电脑和相应浏览器的网络视图版本。
    • 阅读Jan Dawson的观点,为什么Google AMP使发布到网络变得更难,而不是更容易。
    • 阅读Alex Kras关于Google AMP的一些问题的文章,以及Google AMP项目技术负责人的回应。
    • Tim Kadlec分享了他对Google AMP的看法以及对更好替代方案的需求:内容性能策略

    截至2017年2月,Google AMP已开始显示直接发布者的URL。以前它只显示从缓存中提供服务的Google版本。这从品牌的角度提出了人们的担忧。幸运的是,谷歌也意识到了这一点并做出了改变。现在,浏览器的URL字段将继续显示Google URL。但是,AMP标题区域将显示一个链接或链图标,即所谓的“锚点”按钮。单击此按钮将显示发布者的直接URL,以便可以轻松复制和粘贴。这仍然不是一个完美的解决方案,但总比没有好。

    谷歌开发者博客

    img src:谷歌开发者博客

    这是另一个失去品牌的例子。

    另一个不使用Google AMP的原因 –> 你失去了你的品牌 🙂 cc @HuffingtonPost你可能想考虑一下 🙂 pic.twitter.com/n3LEHIOEBZ

    – Syed Balkhi (@syedbalkhi) 2017年1月19日

     

    同样重要的是要注意,如果存在的唯一移动版本页面是AMP版本,即使Google将其索引切换到移动优先索引,Google仍将使用桌面版本进行索引。

    所以@maileohye确认,在有桌面和AMP的情况下,谷歌将首先为移动设备索引桌面。#搜索状态

    – 詹妮弗·斯莱格 (@jenstar) ,2016年11月14日

     

    如何在WordPress中设置Google AMP

    值得庆幸的是,现在在WordPress中实施Google AMP比6个月前要容易得多。WordPress插件和整个平台都取得了很大进展。但请记住,您的代码必须通过Google验证才能在SERP中显示您网站的AMP版本。插件会将您的帖子转换为AMP版本,但Google决定改为显示AMP版本。

    基本上它的工作原理是您的WordPress文章获得分配给它的不同URL。这一切都由WordPress插件自动处理。通常 /amp 或 /?amp 会附加到您当前的文章中。下面是一个例子:

    原始博客文章URL:https://domain.com/blog-post

    AMP博客文章URL:https://domain.com/blog-post /amp/

    谷歌AMP相关WordPress插件

    插件库中目前有2个流行的WordPress插件,可以帮助您使用Google AMP进行设置。第一个是免费的官方AMP插件,它实际上是由Automattic的团队开发的。

    Automattic的官方Google AMP插件

    Automattic的官方Google AMP插件

    在撰写本文时,它目前有超过200,000次活跃安装。您可以从WordPress插件库下载它 ,也可以在 WordPress 仪表板中的“安装插件”下搜索它。您可以在“Appearance AMP”编辑器下稍微自定义外观(如下所示)。但是,该插件的选择非常有限,它取决于您是否了解如何为AdSense或Analytics等功能实施其他过滤器

    WordPress AMP样式

    WordPress AMP样式

    同样重要的是要注意它只支持文章,不支持页面。尽管他们已经宣布他们正在努力添加此功能。以下是安装插件后我们的WordPress文章的示例。

    WordPress AMP预览

    WordPress AMP预览

    如果您想要一种简单的方法来添加附加功能,那么这就是WP插件的AMP for WP发挥作用的地方。这基本上是官方AMP插件的更高级版本,并为您提供额外的功能和支持。它由Ahmed KaludiMohammed Kaludi开发, 他们还经营着一家成功的WordPress主题商店。

    适用于WordPress的AMP for WP 

    适用于WordPress的AMP for WP

    在撰写本文时,它目前有超过70,000次活跃安装。您可以从WordPress插件库下载它 ,也可以在WordPress仪表盘中的“安装插件”下搜索它。此插件允许您使用Google AMP设置进行更多自定义。此外,它确实支持页面。下面我们将深入探讨仪表板中AMP插件设置中可用的自定义和功能。

    你可以看到AMP在这篇文章上运行 https://kinsta.com/blog/google-amp/amp/. (更新:从9月初开始,kinsta不再运行AMP。查看关于为什么选择禁用Google AMP的案例研究)您可以在下面的Kinsta博客文章的SERP中看到一个示例。您可以看到AMP徽标。

    SERP中Kinsta AMP的示例

    SERP中Kinsta AMP的示例

    General

    在常规屏幕下,您可以添加徽标、自定义大小,还可以选择是否要在页面上启用 AMP。根据您的网站和流量,您可能只想在您的博客(帖子类型)上启用 AMP。

    加速移动页面一般选项

    加速移动页面一般选项

    主页

    在主页下,您可以启用或禁用主页支持、覆盖主页缩略图大小,以及选择当用户点击徽标时您希望发生的事情(转至非AMP版本的AMP版本)。

    AMP主页

    AMP主页

    页面构建器

    在页面构建器下,您可以启用它以允许使用AMP小部件。

    AMP页面构建器

    AMP页面构建器

    设计

    在设计下,您可以启动文章构建器或从预先设计的模板中进行选择。您可以打开HTTPS进行搜索,还可以添加“立即呼叫”按钮。然后有一个自定义CSS的选项。例如,在我们的网站上,我们添加以下代码来自定义标题的颜色:

    .amp-wp-header {background-color:#5CC0C0;}
    .amp-wp-header {background-color:#5CC0C0;}
    .amp-wp-header {background-color:#5CC0C0;}

    自定义设计

    自定义设计

    文章页

    在Single下,您可以启用社交图标、禁用链接、显示作者简介,甚至更改相关文章的选项。

    AMP文章页

    AMP文章页

    广告

    在广告屏幕下,您可以启用AdSense并选择展示位置。此插件是使用Google AMP添加AdSense的最简单方法之一。对于那些依靠广告来运行您的网站的人来说,这可能是一个非常有用的功能。

    AMP广告

    AMP菜单

    在菜单下,您可以选择是否在菜单URL的末尾添加/amp/。也许您希望您的访问者留在启用了AMP的网站上,如果是这样,那么您会希望启用此功能。

    AMP菜单

    AMP菜单

    社交媒体

    在社交菜单下,您可以添加要在移动设备上显示以用于分享的社交网络。对于Facebook,您需要注册一个免费的App ID

    AMP社交

    AMP社交

    搜索引擎优化

    SEO屏幕可能是最重要的屏幕之一,因为这与Google如何查看和排名您的AMP内容有关。我们建议启用“元描述”选项。如果您使用的是Yoast SEO插件,那么我们还建议启用“Meta Tags from Yoast”和“Yoast Description in ld+jason”选项。

    AMP SEO选项

    AMP SEO选项

    分析

    分析屏幕允许您为Google Analytics以及Google标签管理器添加跟踪脚本。您需要这样做以确保您的报告数据保持最新。

    AMP分析

    AMP分析

    它还支持Segment Analytics、Piwik Analytics、Quantcast Measurement、comScore、Effective Measure、StatCounter、HitStats Analytics、Yandex Metrika和Chartbeat Analytics。

    结构化数据

    结构化数据屏幕可让您自定义默认的结构化数据徽标和发布图像。

    AMP结构化数据

    AMP结构化数据

    Contact Form

    联系表格屏幕只是让您启用Contact Form 7支持。

    AMP联系表

    AMP联系表

    通知

    在通知屏幕下,您可以启用它以显示cookie警告。这对于隐私法更严格的国家/地区的人可能很有用。

    AMP通知

    AMP通知

    评论

    在评论屏幕下,您可以启用对3rd方评论系统的支持,例如Disqus和Facebook评论。

    AMP评论

    AMP评论

    高级设置

    在高级设置下,您可以启用移动重定向。请记住,默认情况下,只会为从SERP中单击它的移动用户启用AMP。如果移动用户直接浏览您的网站,除非您启用重定向,否则他们将无法获得启用AMP的页面。您还可以在此屏幕上输入自定义HTML并更改页脚链接操作。

    AMP高级设置

    AMP高级设置

    扩展

    开发人员还提供高级扩展,您可以购买这些扩展以进一步扩展AMP插件。您可能想要考虑的一些流行选项是电子邮件选项、CTA按钮和自定义文章类型支持。

    AMP扩展

    AMP扩展

    这是运行的AMP for WP插件的文章外观。