• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >html5 > seozac:Google的AMP-加速移动页面

seozac:Google的AMP-加速移动页面

作者:匿名 字体:[增加 减小] 来源:互联网 时间:2018-12-03

本文主要包含Google,AMP等相关知识,匿名希望在学习及工作中可以帮助到您
原文标题:Google的AMP-加速移动页面,作者 Zac

上星期在第6届SEO排行榜上做了一个演讲,分享了一些国际上SEO行业的最新情况。其中一个内容是Google的AMP项目,也在这里聊一下。

AMP,Accelerated Mobile Pages,译意大致是”加速的移动页面”,是Google去年10月份推出的一个提高移动页面访问速度的技术,具体技术细节可以在项目官网看到,有简单的中文版。(详见:Google AMP 是什么鬼?)

简单而不一定准确地说,AMP页面是大大简化了的移动页面,因此加载更快。

AMP有几个特点:

AMP的HTML代码是标准HTML的一个子集,某些代码不让用了,如table, frame等

CSS代码也简化,而且要写在HTML中,不能调用外部CSS文件

JS大部分不能用了,当然就快了,但很多互动功能也就没了

资源控制,比如图片、视频等用户下拉到图片时再加载

高度缓存,Google将页面缓存在自己服务器了

AMP具体应用是今年2月份才上线的,仅仅使用在新闻结果中,支持了AMP的新闻页面显示在顶部图片轮播中,用户点击其中的新闻时,缓存在Google服务器上的极为简化的AMP版本确实是秒开。

目前AMP新闻页面只在10多个国家显示,不包括中国,也不包括新加坡。

如果仅限于新闻网站,我也就不那么关心了。不过8月2号Google又公布,AMP将应用于所有类型的移动页面。其实在这之前,除了BBC、纽约时报等新闻网站,连ebay这种网站也已经上线了AMP版本。所有移动页面都支持AMP的话,更多网站将有动力加上AMP版本了。

普通页面的AMP现在还没有出现在正常Google搜索结果中,只在这个地址的demo中可以看到:g.co/ampdemo

我也赶紧实验了一下AMP,信息类网站,如博客,还是很适合AMP的。WordPress实现AMP很简单,下载、启用AMP插件就行了。插件会给帖子页面创建AMP版本(首页、分类、翻页等页面没有)。比如本帖子的URL是:

https://www.seozac.com/gg/google-amp/ ?

AMP页面就是在原页面后加个 /amp/ :

https://www.seozac.com/gg/google-amp/amp/

在原帖子 HTML代码中,需要用amphtml标签指明AMP版本地址:

<link rel=”amphtml” href=”https://www.seozac.com/gg/google-amp/amp/” />

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

<link rel=”canonical” href=”https://www.seozac.com/gg/google-amp/” />

这样,Google就知道谁对应谁了。

在Google搜索结果中是这样展现的(如上所说,从demo地址可以看到):

Google的AMP-加速移动页面01

页面描述最前面有个闪电标记和AMP字样。用户点击后页面秒开,显示的是Google服务器上的缓存:

https://www.google.com.sg/amp/www.seozac.com/baidu/aureum-algorithm/amp/

AMP页面打开是这个样子:

Google的AMP-加速移动页面02

点击本帖的AMP地址就可以看到AMP版本的样子,桌面电脑也一样能正常访问。目前WordPress的AMP插件把导航、留言等等都去掉了,只剩下帖子内容本身,确实是简化到家了,HTML文件只有10几K。如果自己开发AMP版本的话,还是可以多少加上点东西的,比如重要导航。

AMP的目的没别的,就是快,也确实是快了,但不一定适合必须有交互功能的页面,如电子商务网站。即使像博客帖子这种页面,拿掉评论功能是否真的用户友好也还要观察。纯信息类页面确实很适合。

Google最近在大力推AMP(谷歌为什么要推出AMP计划?),很可能AMP会变成国际上信息类网站移动页面的主流。采用AMP的页面是否对排名有帮助呢?目前是没有,Google明确表示,AMP不在排名算法中,但谁知道以后呢。SEO们,尤其是做英文网站的,还是要密切关注。

百度会不会支持AMP呢?短时间应该不会,(目前百度搜狗已经宣布支持了哦,详见:百度、搜狗、雅虎正式支持AMP)倒不是百度愿意不愿意,而是AMP页面需要调用官网的JS库,貌似是控制资源之类的功能(如图片延迟)的:

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

任何国外的东西,说qiang就qiang,百度想支持也危险,中文网站没法用啊。呵呵,呵呵。

以上就是seozac:Google的AMP-加速移动页面的详细内容,更多请关注微课江湖其它相关文章!

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

  • seozac:Google的AMP-加速移动页面
  • Google AMP 是什么鬼?
  • HTML5实践-使用css3如何完成google涂鸦动画的详解
  • HTML5 Google电吉他 可用键盘弹奏的图文代码介绍
  • 想做一款基于HTML5的卡牌游戏,有什么好的引擎推荐么?
  • 电子行业中,以0x开头颜色表示法和以#开头的颜色表示法有什么区别?
  • 以HTML5现在的技术条件,能出《刀塔传奇》这种效果的游戏吗?有哪些大公司在开发HTML5的中重度游戏项目?
  • 微信如何实现向浏览器注入JS API,并且调用方式就像浏览器原生API一样?
  • 如何利用HTML&JS等前端知识开发Android应用?
  • 什么情况下更适合使用 font-icon,相比图片 css sprites 有哪些优势?

相关文章

  • 2018-12-03HTML5应用:离线的应用以及存储的应用
  • 2018-12-03认识HTML5的WebSocket
  • 2018-12-03怎样用 JavaScript 准确获取手机屏幕的宽度和高度?
  • 2018-12-03原生js 有没有 手机移动端 滑动 的事件?
  • 2017-08-06HTML5移动端开发中的Viewport标签及相关CSS用法解析
  • 2018-12-03关于动画应用的6篇文章推荐
  • 2018-12-03Html5移动端获奖无缝滚动动画实现
  • 2018-12-03HTML5 组件Canvas实现电子钟的图文代码详情介绍
  • 2018-12-03基于第一个PhoneGap(cordova)的应用详解 _html5教程技巧
  • 2018-12-03HTML5 history新特性pushState、replaceState及两者的区别 _html5教程技巧

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • 带你认识HTML5中的WebSocket
    • HTML5 Canvas像素处理使用接口介绍
    • 基于mo.js制作的17种炫酷图标动画特效
    • HTML5+CSS3绘制锯齿状的矩形_html5教程技巧
    • html5使用canvas实现跟随光标跳动的火焰效果_html5教程技巧
    • 在国内前端领域里优秀的人很多,为什么没人做出 angularjs 、jQuery 之类优秀的框架?
    • SVG进阶|SVG渐变(SVG GRADIENTS)
    • HTML5标签与HTML4标签的区别示例介绍
    • html5播放视频教程
    • 手机端怎样用rem+scss做适配

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

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