WordPress文章页秒变谷歌AMP加速移动页面插件AMP

转载   守望轩  2017-06-28 16:30:54  256 人阅读  22 条评论

投放广告联系   诚邀合作伙伴   赞助我们   本站公告   轻松一刻

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

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

WordPress文章页秒变谷歌AMP加速移动页面插件AMP Plugins 第1张

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

WordPress文章页秒变谷歌AMP加速移动页面插件AMP Plugins 第2张

AMP 插件简单介绍

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

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

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

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

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

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

AMP 插件设置

启用 AMP 插件后就可以使用,不用任何设置。当然,如果你觉得该插件所展示出来的 AMP 页面配色不好看,你也可以进行简单设置。

WordPress 后台 >> 外观 >> AMP >> AMP >> Design,然后就可以直接设置 AMP 页面头部文字颜色和背景色、文章内链接颜色及文章页背景色(白或黑),具体见下图所示:

WordPress文章页秒变谷歌AMP加速移动页面插件AMP Plugins 第3张

AMP 插件效果图

1、AMP 页面在 PC 端展示

WordPress文章页秒变谷歌AMP加速移动页面插件AMP Plugins 第4张

2、AMP 页面在手机端的展示

WordPress文章页秒变谷歌AMP加速移动页面插件AMP Plugins 第5张

3、AMP 页面在 Google 搜索的展示

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

WordPress文章页秒变谷歌AMP加速移动页面插件AMP Plugins 第6张

历史上的今天:

文章标签: ,   ,  
原文地址:https://www.watch-life.net/wordpress/wordpress-google-amp.html
温馨提示:文章内容仅代表作者个人观点,不代表boke112导航赞同其观点和对其真实性负责!
版权声明:本文为转载文章,来源于 守望轩 ,版权归原作者所有,欢迎分享本文,转载请保留出处!
WordPress虚拟主机和VPS服务器推荐

 发表评论


  1. 明月登楼学习笔记
    明月登楼学习笔记 【进士】 @回复

    感觉AMP的样式,国内浏览器支持都没有,这点儿是很尴尬的!

  2. 狂放
    狂放 【秀才】 @回复

    其实特想搞一个mip,可是鸟哥的主题有很多js,不方便改

    • 懿古今
      懿古今【村长】2017-08-09 09:17  回复

      @狂放其实你可以模仿这个插件搞一个MIP的,MIP页面其实就是去掉很多不必要的功能和样式,仅保留最纯粹的,所以不管什么主题,其实都是可以搞的

  3. BanYuner
    BanYuner 【进士】 @回复

    这个插件之前有了解,但是不能加载css等特效,可能站点就失去了色彩

    • boke112导航
      boke112导航【村长】2017-07-01 20:10  回复

      @BanYunerMIP或AMP的特点就是快,所以除了必要的内容,其他的都不加载

  4. 钛客志
    钛客志 【秀才】 @回复

    要是有同时兼容AMP和MIP的插件多好,反正除了wordpress我没看到typecho有AMP的插件

    • boke112导航
      boke112导航【村长】2017-06-30 09:15  回复

      @钛客志喜欢折腾的话,可以根据这个插件修改成MIP,感觉AMP和MIP其实都差不多,应该可以修改整合一下

  5. 明月登楼
    明月登楼 【王爷】 @回复

    国内还是不要用AMP了吧,真心没有啥效果的!还会被百度收录很多尾缀amp的链接,很鸡肋的!

    • boke112导航
      boke112导航【村长】2017-06-29 16:28  回复

      @明月登楼[嘻嘻] 感觉原理是一样的,可以通过修改这个插件,把它变成一个MIP插件应该也不错

  6. 爱时尚
    爱时尚 【尚书】 @回复

    AMP真的会加快访问速度吗

    • 玉满斋官方旗舰店
      玉满斋官方旗舰店 【书童】2017-06-29 10:36  回复

      @爱时尚我感觉这个所谓的“快”在目前“墙”的情况下几乎可以无视了!

  7. 寒辞
    寒辞 【书童】 @回复

    觉得挺不错的,学习了

    • 韭菜韭菜
      韭菜韭菜 【小白】2017-06-29 02:41  回复

      @寒辞果断MARK!!!!!

  8. E书之家
    E书之家 【秀才】 @回复

    只知道百度mip,都差不多

    • boke112导航
      boke112导航【村长】2017-06-29 08:47  回复

      @E书之家懂得折腾的话,把这个插件稍作修改就能变成百度的MIP插件了

  9. 小萝博客
    小萝博客 【状元】 @回复

    只可惜被闭了

  10. 励志语录
    励志语录 【进士】 @回复

    感谢分享,学习了

  11. 自由职业
    自由职业 【小白】 @回复

    学习到了 谢谢博主~!! 棒棒哒~!

  12. 写给工厂上班的人
    写给工厂上班的人 【举人】 @回复

    首先是没看懂AMP,然后再看看,觉得有落伍了,看不懂,先学习哈。

    • boke112导航
      boke112导航【村长】2017-06-28 17:35  回复

      @写给工厂上班的人如果有谷歌方面的用户,这个还是挺好用的,毕竟什么都不用操作就是按照一个官方提供的插件就可以得到文章的AMP页面,感觉还不错

  13. 爱玩手机网
    爱玩手机网 【小白】 @回复

    移动加速是不错的,单一看是谷歌的而且还要改链接结构。还是呵呵了

    • boke112导航
      boke112导航【村长】2017-06-28 17:34  回复

      @爱玩手机网[疑问] 安装这个插件后不会改动任何原有的东西,只是会在文章页的HTML代码中添加两条标签记录而已,同时会多一个AMP页面,这个在数据库是看不到的