您现在的位置是:首页 > cms教程 > WordPress教程WordPress教程
WordPress支持google AMP的方法
春儿2025-03-24WordPress教程已有人查阅
导读在移动互联网的时代,尽管网站响应式设计可以满足多屏(pc、手机、ipad等)浏览,但google在2015年10月推出了更快移动页面访问速度的技术-Accelerated Mobile Pages
在移动互联网的时代,尽管网站响应式设计可以满足多屏(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:// .ampproject.org
2.AMP2016年度回顾:http://developers.googleblog.cn/2016/11/amp-accelerated-mobile-pages.html
3.AMP的路线图:https:// .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”,以本博客文章链接为例:
原文章页面链接 :http:// .watch-life.net/wordpress/wordpress-google-amp.html ?
AMP页面的链接:http:// .watch-life.net/wordpress/wordpress-google-amp.html/amp
为了让google的搜索引擎检索到AMP页面,在原文章页面的HTML里需要指明AMP页面的地址,即用amphtml标签指明AMP版本地址:
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库,用于控制资源加载、缓存等功能:
1.AMP的HTML代码是标准HTML的一个子集,大大简化了html的代码,部分Html代码将不再适用,如table, frame等。
2.大大简化css,且只能写在HTML中,不能调用外部CSS文件。
3.JS大部分功能不能用了,但很多互动功能也就没了,虽然影响了丰富的交互,但速度提升了速度。
4.加强对页面资源控制,比如图片、视频等用户下拉到图片时再加载。
5.充分利用高速缓存,Google将AMP页面缓存在自身的服务器上。
有关AMP的更多内容参考下面的链接:
1.AMP官方网站:https:// .ampproject.org
2.AMP2016年度回顾:http://developers.googleblog.cn/2016/11/amp-accelerated-mobile-pages.html
3.AMP的路线图:https:// .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”,以本博客文章链接为例:
原文章页面链接 :http:// .watch-life.net/wordpress/wordpress-google-amp.html ?
AMP页面的链接:http:// .watch-life.net/wordpress/wordpress-google-amp.html/amp
为了让google的搜索引擎检索到AMP页面,在原文章页面的HTML里需要指明AMP页面的地址,即用amphtml标签指明AMP版本地址:
<link rel="amphtml" href="http:// .watch-life.net/wordpress/wordpress-google-amp.html/amp" />
在AMP的页面的HTML代码中也要用canonical标签指明原文章页面地址:
<link rel="canonical" href="http:// .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页面启用一个二级域名,我还不打算跟进,觉得这种方法没有插件来的简单快捷。
本文标签:
很赞哦! ()
相关教程
图文教程
wordpress数据库备份的方法
尽管有许多WordPress插件可以辅助进行网站数据库的备份,但是对于站长/博主而言,掌握基本的phpMyAdmin备份操作是很有必要的。
根据用户显示不同的WordPress菜单的实现方法
如果让登录用户与未登录浏览者,显示不同的菜单,可以通过下面的代码实现:登录用户显示不同的 WordPress 菜单登录用户显示不同的WordPress菜单
WordPress函数body_class()用法介绍
wordpress的body_class()函数,顾名思义,这个函数根据不同的页面类型为body标签生成class选择器,从而让设计人员可以各方便灵活的控制不同页面中的各个元素。本文对这一函数进行
WordPress功能特色和使用方法介绍
WordPress编辑 WordPress是一种使用PHP语言开发的博客平台,用户可以在支持PHP和MySQL数据库的服务器上架设属于自己的网站。也可以把 WordPress当作一个内容管理系统(CMS)来使
相关源码
-
(自适应)pbootcms家政服务保洁保姆打扫卫生网站模板下载本模板基于PbootCMS内核开发,为家政服务企业量身定制。设计风格温馨亲切,突出家政行业的专业与贴心服务特性,多方位展示企业服务项目与优势。查看源码 -
(自适应响应式)APP应用程序软件介绍落地页源码免费下载该模板为营销技术从业者设计,提供专业的内容展示平台。采用响应式布局,适配软件介绍、APP推广等营销场景,通过可视化后台可快速搭建符合行业特性的展示网站。查看源码 -
WordPress主题模板主题巴巴/博客X主题源码免费下载博客X主题专注于内容创作领域,为博客、资讯类网站提供专业的内容展示解决方案。该模板采用精心设计的布局结构,能够有效提升内容的可读性和用户停留时间。查看源码 -
pbootcms模板(自适应)花店鲜花花卉园艺网站源码一款基于PbootCMS内核开发的花店鲜花配送与花卉园艺企业网站模板。该模板采用响应式设计,自动适配手机、平板等移动设备,确保用户在任何设备上都能获得优质浏览体验。查看源码 -
(自适应手机端)seo博客网站模板新闻资讯网站源码下载本模板为SEO博客及新闻资讯类平台深度定制,采用PbootCMS内核开发。通过模块化设计实现多行业快速适配,仅需替换图文内容即可转型为医疗、教育、科技等领域网站。响应式布局确保在手机、平板等设备上获得一致浏览体验。查看源码 -
(自适应)帝国cms7.5模板自媒体文章新闻博客为帝国CMS7.5设计的响应式模板,采用H5技术构建现代化内容展示框架。通过智能断点检测技术实现手机、平板、PC三端适配查看源码
| 分享笔记 (共有 篇笔记) |

