• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > 如何让WordPress支持google AMP

如何让WordPress支持google AMP

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了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

60f2674e2fc47.jpg


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

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

原文章页面链接 :http://www.watch-life.net/wordpress/wordpress-google-amp.html ‎

AMP页面的链接:http://www.watch-life.net/wordpress/wordpress-google-amp.html/amp

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

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

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

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

AMP页面在PC端展示


60f267c1e05bc.jpg


AMP页面在手机端的展示


60f267dd78368.jpg


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

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


60f26806b44a7.jpg


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页面启用一个二级域名,我还不打算跟进,觉得这种方法没有插件来的简单快捷。


转载于:https://www.watch-life.net/wordpress/wordpress-google-amp.html


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 怎么忽略FTP登录来升级WordPress
  • WordPress控制文章评论最少字数和最大字数
  • WordPress使用钩子进行主题开发时怎么避免死循环
  • WordPress怎么实现评论自动填写QQ邮箱与昵称?
  • WordPress隐藏部分内容,评论后可见
  • WordPress程序打开速度慢的三种解决方法
  • 关于WordPress删除xmlrpc.php防DDOS攻击
  • WordPress建站教程,纯代码实现wordpress防止发布文章出现标题重复,自动检测重复标题文章
  • wordpress打开速度慢最佳解决方案
  • 一文讲解Wordpress插件怎么查找并安装

相关文章

  • 2022-04-29PHP如何去掉所有HTML标签?
  • 2022-04-29Photoshop绘制水晶质感的放大镜效果
  • 2022-04-29一起来聊聊JavaScript函数柯里化
  • 2022-04-29Wordpress如何调用个人信息
  • 2022-04-29Phpcms V9内容编辑器支持JavaScript的设置方法
  • 2022-04-29WordPress控制文章评论最少字数和最大字数
  • 2022-04-29Javascript智能识别收货地址插件,智能识别收货地址Pro
  • 2022-04-29手把手教你在html中引入另一个html文件的方法(详解)
  • 2022-04-29DEDECMS5.7使用kindeditor编辑器栏目内容无法保存
  • 2022-04-29crmeb v3订单导出功能提示连接永久转移,错误500问题修复

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • 在SQL查询中GROUP BY的含义是什么?
    • 聊聊node中怎么借助第三方开源库实现网站爬取功能
    • 小程序怎样在页面传递对象数组?
    • dedecms大量删除文章后,列表页显示错误修复办法
    • PHP高并发实例详解之商品库存超卖并发测试
    • 网站推广最全的解释
    • 关于PHP正则匹配中文
    • Mysql怎么查看字段的属性值
    • 如何使用layui中的table模块中的基础参数
    • navicat出现1045错误怎么解决

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有