专栏首页守望轩让WordPress支持google AMP

让WordPress支持google AMP

1.关于AMP

在移动互联网的时代,尽管网站响应式设计可以满足多屏(pc、手机、ipad等)浏览,但google在2015年10月推出了更快移动页面访问速度的技术-Accelerated Mobile Pages(AMP 加速移动页面),AMP页面是大大简化了移动页面,旨在提高针对移动页面的访问速度,AMP的特点如下:

1.AMP的HTML代码是标准HTML的一个子集,大大简化了html的代码,部分Html代码将不再适用,如table, frame等。 2.大大简化css,且只能写在HTML中,不能调用外部CSS文件。 3.JS大部分功能不能用了,但很多互动功能也就没了,虽然影响了丰富的交互,但速度提升了速度。 4.加强对页面资源控制,比如图片、视频等用户下拉到图片时再加载。 5.充分利用高速缓存,Google将AMP页面缓存在自身的服务器上。

有关AMP的更多内容参考下面的链接: 1.AMP官方网站:https://www.ampproject.org 2.AMP2016年度回顾:http://developers.googleblog.cn/2016/11/amp-accelerated-mobile-pages.html 3.AMP的路线图:https://www.ampproject.org/roadmap

AMP刚推出时,只限于新闻的页面,2016年8月google宣布AMP将应用于所有类型的移动页面。目前,虽然google明确表示AMP页面不会影响排名,但google如此不遗余力的推广AMP,难保将来不会在算法中考虑AMP的因素。

2.让WordPress支持AMP

AMP很适合新闻、博客等信息资讯类的网站,作为老牌博客系统WordPress在2016年10月6日推出了AMP的官方插件,目前该插件极大简化了文章页面,文章AMP页面把导航、留言等都去掉了,只保留了文章内容本身,此页面也同时兼容桌面电脑(pc)上浏览,首页、分类、翻页等都没有相对应的AMP页面,我预计后续版本应该会增加更多的功能,如果你不想等,也可以直接改造这个插件加入导航、分类等功能。

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

原文章页面链接 ://www.watch-life.net/wordpress/wordpress-google-amp.html ? AMP页面的链接://www.watch-life.net/wordpress/wordpress-google-amp.html/amp

为了让google的搜索引擎检索到AMP页面,在原文章页面的HTML里需要指明AMP页面的地址,即用amphtml标签指明AMP版本地址:

<link rel="amphtml" href="//www.watch-life.net/wordpress/wordpress-google-amp.html/amp" />

在AMP的页面的HTML代码中也要用canonical标签指明原文章页面地址:

<link rel="canonical" href="//www.watch-life.net/wordpress/wordpress-google-amp.html" />

AMP页面在PC端展示

AMP页面在手机端的展示

3.AMP页面在google搜索的展示

AMP页面被google搜索索引后,在搜索结果里看到AMP的页面,页面描述最前面有个闪电标记和AMP字样。用户点击后,页面会迅速打开,显示的是Google服务器上的缓存页面。在google搜索里AMP页面如下图展现:

4.百度是否会跟进AMP?

国内的站长最关注是百度(baidu)搜索是否会跟进AMP呢?好消息是百度也支持类似AMP,坏消息是百度2016年8月搞了自己一套类似的AMP-Mobile Instant Pages(MIP 移动网页加速器),AMP和MIP非常相似,无论是HTML、CSS、禁用大部分JS、资源控制、缓存等都几乎和AMP相似,还有原页面与MIP页面的互相引用方法(加标签),都和Google AMP一样,官网的页面布局、菜单安排、技术说明里的内容几乎也是吃惊的一致,看见百度的MIP基本上是照搬AMP了。那百度为什么不和google一样用AMP呢?况且AMP还是开源的。我想一个重要的原因是AMP使用的需要调用官网的JS库,用于控制资源加载、缓存等功能:

<script src=”https://cdn.ampproject.org/v0.js” async></script>

这个恐怕是百度不愿意采用AMP的一个核心原因,鉴于国内的网络环境(伟大的qiang),难免不让人担心这个js库那天被屏蔽了。目前尚没有针对MIP的WordPress插件,如果采用WordPress采用MIP的话,目前只能靠换主题模版的方法,这种方法最麻烦的是需要单独为MIP页面启用一个二级域名,我还不打算跟进,觉得这种方法没有插件来的简单快捷。

你可能也会喜欢以下文章:

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Visual Studio 2008 每日提示(四)

    #031、 把编辑器的背景变成黑色 原文地址:http://blogs.msdn.com/saraford/archive/2007/09/06/did-yo...

    Jianbo
  • Visual Studio 2008 每日提示(八)

    #071、给所有快速查询的结果标记上书签 原文链接:Did you know… You can bookmark all of your Quick Find...

    Jianbo
  • c#的细节(一)-问号的细节

    写在最前面的话: 《c#的细节》是我当初学习c#时候,做的一些学习笔记的整理,现在回头看来这些都是非常浅显的知识,是c#非常细节的地方,同时也是不能忽略的地方,...

    Jianbo
  • 超级干货!一图看懂诸多经济学指数

    经济学其实并不总是高屋建瓴,其实,经济兴衰与民生息息相关,真正的经济学就在身边。扑克牌、口红、自行车、男士内裤、领带、女士裙摆高低等等这些,都可以作为你判断经济...

    小莹莹
  • P1093 奖学金

    题目描述 某小学最近得到了一笔赞助,打算拿出其中一部分为学习成绩优秀的前5名学生发奖学金。期末,每个学生都有3门课的成绩:语文、数学、英语。先按总分从高到低排序...

    attack
  • 获取不同手机浏览器的实际可用高度代码分享

    但是不同手机浏览器有自己的地址栏、状态栏等,window.screen.availHeight 取到的屏幕高度也包括了这两者,导至本来希望满屏显示的内容出现滚动...

    德顺
  • 职校云教室建设部署腾创NComputing软硬件一体化终端方案

    新型信息化时代的互联网+、大数据、云计算、物联网大背景下,教育信息化的2.0时代已然到来,信息的优化、整合成为当务之急,“云教室”概念顺应而生。云计...

    nc云终端yun0101.com
  • 【Spark研究】Spark之工作原理

    基本概念 理解Spark的运行模式涉及一系列概念: (1)Cluster Manager:在集群上获取资源的外部服务。目前有三种类型:1. Standalone...

    陆勤_数据人网
  • Oracle初级性能优化总结

      关于对Oracle数据库查询性能优化的一个简要的总结。 从来数据库优化都是一项艰巨的任务。对于大数据量,访问频繁的系统,优化工作显得尤为重要。由于Oracl...

    aehyok
  • 读写锁ReaderWriterLockSlim

    如果我们只是简单的使用lock方式去加锁,则会影响性能。如果采用读写锁,那么多个线程可以同时读取该对象,只有等到对象被写入锁占用的时候,才会阻塞。 也就是说某个...

    日薪月亿

扫码关注云+社区

领取腾讯云代金券