WordPress使用加速移动网页(AMP)指南

  • 2
  • 80 views
  • A+
所属分类:WordPress插件

今天3z学堂在进入Google AdSense后台时,发现系统有个优化,推荐3z学堂获取Accelerated Mobile Pages(AMP)网页来加速,经过一番摸索,基本搞懂了这个AMP为何物,今天3z学堂就给大家分享下~

WordPress使用加速移动网页(AMP)指南

一、什么是AMP?

在PC互联网时代,绝大部分人都使用电脑来访问网络,因此网站开发和设计人员都知道访客会以同样的方式来访问他们的网站。但是随着移动互联网的出现,所有的事情都发生了改变。智能的移动设备迅速在用户之间流行开来,意味着访客如今会通过不同设备、不同屏幕分辨率来访问同一个网站。为了更好的提高客户体验,网站必须针对移动型浏览方式进行优化。

这就是加速移动页面(AMP)能够派上用场的时候了。

WordPress使用加速移动网页(AMP)指南

AMP由Google和其他几家企业共同研发,旨在帮助开发人员创建能够在移动设备上良好运行的网站。这是一个开源的项目,意味着虽然AMP在2015年底才出现,但是它的规模和功能会随着时间的推移而不断地发展壮大。

二、AMP是怎样运作的?

正如大家所知,针对移动设备优化网站并非易事,而要想设计一个能够在台式电脑,手机,平板电脑上显示和功能都很良好的网页更是难上加难。

虽然有许多工具可以帮助您打造响应式的网站,允许您创建不同版本的网页,以适用于访客所选择的不同设备。其实这就是AMP的作用所在。一旦实施了AMP,就创建了一个独立版本的页面,只能够在屏幕较小的设备上显示。

这些新页面是您网站标准页面的定制版本,将会针对移动设备进行高度优化。他们通过移除一部分功能来强调您的内容,并且确保页面足够简洁化以确保最佳的性能。



三、AMP 的特点

  • AMP 的 HTML 代码是标准 HTML 的一个子集,大大简化了 html 的代码,部分 Html 代码将不再适用,如 table,frame 等。是一个专门开发的HTML版本,其中包含专门用于提高性能的标签和限制。
  • 大大简化 css,且只能写在 HTML 中,不能调用外部 CSS 文件。
  • AMP JS,这是一个独特的JavaScript库,该技术可以处理资源的管理和加载,原有js大部分功能不能用了,但很多互动功能也就没了,虽然影响了丰富的交互,但页面得到更快速的呈现。
  • 加强对页面资源控制,比如图片、视频等用户下拉到图片时再加载。
  • AMP缓存,充分利用高速缓存,Google 将 AMP 页面缓存在自身的服务器上,以加快检索速度。

总之,这些技术共同为在其网站上使用AMP的用户提高了大量的帮助。

四、AMP插件介绍

WordPress强大的插件库再次为大家提供了简单易用的解决方案,3z学堂共为大家介绍3款插件。

1.AMP for WordPress(官方插件)

WordPress使用加速移动网页(AMP)指南

这款插件是官方插件,由WordPress背后的Automattic公司创建的,旨在通过为所有帖子创建与AMP兼容的版本,为您的网站增加AMP支持。当用户在移动设备上访问您的网站时,他们就会看到这些新帖子,这些帖子虽然使用的是同样的URL,但是却增加了AMP 功能。

AMP 很适合新闻、博客等信息资讯类的网站,作为老牌博客系统 WordPress 早就在 2016 年 10 月 6 日就推出了 AMP 的官方插件,目前该插件极大简化了文章页面,文章 AMP 页面把导航、留言等都去掉了,只保留了文章内容本身,此页面也同时兼容桌面电脑(pc)上浏览,首页、分类、翻页等都没有相对应的 AMP 页面。

WordpPress 后台搜索安装并启用 AMP 插件后,插件会自动为文章页创建一个 AMP 文章页面,该页面链接 URL 是在原页面的链接 URL 加上“/amp”,以本博客文章链接为例:

  1. 原文章页面链接 :
  2. //www.3zschool.com/wordpress-google-amp.html
  3. AMP 页面的链接:
  4. //www.3zschool.com/wordpress-google-amp.html/amp

为了让 Google 的搜索引擎检索到 AMP 页面,该插件会在原文章页面的 HTML 代码中自动添加 canonical 标签和 amphtml 标签,具体如下所示:

  1. <link rel="canonical" href="//www.3zschool.com/wordpress-google-amp.html" />
  2. <link rel="amphtml" href="//www.3zschool.com/wordpress-google-amp.html/amp" />

同时,也会在 AMP 页面的 HTML 代码中自动添加 canonical 标签指明原文章页面地址:

  1. <link rel="canonical" href="//www.3zschool.com/wordpress-google-amp.html" />

插件基本没有什么需要额外设置的地方,大家使用默认设置就可以了。

2.AMP for WP插件

WordPress使用加速移动网页(AMP)指南

我们介绍的第一款插件AMP是由Automattic 自己开发的,这是一款非常基础的插件,可以适用大部分个人网站了,但是于部分达人来说,可能会有更高的要求,AMP for WP(全称AMP for WP – Accelerated Mobile Pages)插件就是一个不错的选择。

该插件是基础版AMP插件的扩展程序,拥有大量有用的功能和集成选项。您可以访问页面生成器,定制化AMP编辑器以及各种定制化的选项。它还能够支持页面,分类,标签以及集成了其他各种不同的工具(例如联系列表插件,SEO插件,谷歌广告联盟,分析工具等等)。

简而言之:如果您想要在不失去任何功能的情况下在网站上添加AMP,那么该插件就值得一试。

您可以在网站上下载并安装该插件:官方下载地址 AMP for MP

需要注意的是您需要先在网站上激活Automattic的AMP插件。一旦您启用了这两个插件,AMP for WP就能够为您提供大量的额外选项,您可以在网站新的AMP标签下面进行查看。

3.Glue forYoast SEO & AMP插件

WordPress使用加速移动网页(AMP)指南

Yoast SEO插件的名气应该大家都是知道的,就不给大家介绍了,基本就是个wordpress的神器!Yoast现在推出了Glue for Yoast SEO & AMP 插件,可以帮助AMP和Yoast搜索引擎优化工作顺利进行。 它确保您的SEO元数据在AMP优化的页面上得到了正确实施,甚至还添加了一些新的自定义功能。

首先需要安装好Yoast SEO 插件,然后安装好AMP插件,当这两款插件都安装好之后,您可以下载该这个新插件以将他们粘合在一起,这些工具将能够自动运作,无需您进行任何操作。

此外, Glue for Yoast SEO & AMP插件还为您的网站添加了一些定制化的设置,您可以根据您的需求进行调整。您可以通过访问WordPress仪表盘访问SEO 》 AMP 来找到这些选项。您将会看到3个选项-Post types(帖子类型), Design(设计), 和 Analytics(分析):

第一个标签可以让您在网站上为不同的帖子类型启用或禁用相应的AMP版本。 在“Design (设计)”选项中,您可以找到一些添加图像,修改颜色和包含自定义代码的选项。 最后,Google Analytics 标签可以让您输入Google Analytics(分析)跟踪代码,将该工具与AMP页面关联起来。



五、准备好了吗?

AMP相对而言依然是一项新技术,因此它必然有其局限性。当然AMP也是能够针对移动设备优化网站并改善用户体验的一种新的有效方法。凭借WordPress强大的插件,您不需要费什么工夫就能够在WordPress网站上实施AMP,并轻松地让您的网站性能得到提升。今天3z学堂的分享就到这里,大家有什么建议或者心得,欢迎于3z学堂交流分享,共同进步!

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

目前评论:2   其中:访客  2   博主  0

    • 乱翻书 乱翻书 2

      好好学习

        • 勇之助 勇之助 3

          @乱翻书 共同学习,一起进步!