Typecho文章页适配AMP的一些参考

尚寂新
尚寂新
2017/11/28 10:17

前两天看到泽泽dalao开始折腾新玩具了-AMP,听他说这东西不仅在谷歌那边有效,百度搜狗这边也是认AMP的,看到这里我折腾的心就油然而生了 但国内做AMP的实在是太少了 下面的文章也是我搜刮来进行整理的 阅读之后应该能有个大概的了解,给网站适配上AMP

AMP这个 他就是一个静态页面加速方案,对于Typecho这种博客来说,评论那块就可以直接省掉了 或者是学v2ex的AMP页面,把评论消息留着,评论框不给,要去完整版才能进行评论否则只能看评论 所以关于AMP的适配面究竟是只适配文章页好 还是全站适配,我在segmentfault上发了这个问题,如果有知情人士的话请跟一下,是适配文章页还是全站...

由于时间问题,我这也只有手机没法进行适配AMP的工作(起码半个月之后才能动工吧),感觉AMP对比百度的MIP,MIP之前我也尝试适配过,但百度那坑die的规范简直不是规范啊 照着他的文档根本做不出来一样的东西,并且要适配的话必须全站覆盖(抛弃了我的instantclick全站覆盖计划),其他搜索引擎还无法收录,提交MIP数据还需要手动引入 而AMP没有这些缺点,于是计划用AMP

相关内容:

下面的内容就来自于第二个链接,做了适当精简和修改

什么是AMP?

Accelerated Mobile Pages (AMP) 直译过来就是在移动设备上快速加载的网页。它是由 Google 发起的一个开源项目,主要目的是缩短静态内容的渲染时间从而有效提升网站的加载速度

AMP HTML 规范

AMP HTML 在 HTML 的基础上加了一些使用限制,并且添加了AMP自定义的组件。

AMP 禁用部分 HTML 标签如 <frame><form><input> 等。部分 HTML 标签必须使用AMP 自定义的组件来替换如 <img><video><amp-img><amp-video> 替换。

AMP在HTML基础上也提供一些扩展组件,如 <amp-carousel><amp-iframe><amp-youtube> 等,但是使用扩展组件时必须引入相应的JS文件。

一个简单的 AMP HTML 示例:

<!doctype html>
<html amp lang="en">
<head>
<meta charset="utf-8">
<title>Hello, AMPs</title>
<link rel="canonical" href="http://example.ampproject.org/article-metadata.html">
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<script type="application/ld+json"> 
{ 
"@context": "http://schema.org", 
"@type": "NewsArticle", 
"headline": "Open-source framework for publishing content", 
"datePublished": "2015-10-07T12:02:41Z",
 "image": [ "logo.jpg" ]
 } 
</script> 
<style amp-boilerplate>
body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>
<noscript>
<style amp-boilerplate>
body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}
</style>
</noscript> 
<script async src="https://cdn.ampproject.org/v0.js"></script> 
</head> 
<body> 
<h1>Welcome to the mobile web</h1> 
</body> 
</html>

将上面的代码保存为 .html 文件,在浏览器中就可以正常运行,从这个示例可以看出,AMP HTML 的写法和HTML差不多,但是又有自己的规范要求:

HTML文件DTD 必须是 <!doctype html>

顶层标签必须包含 AMP 属性如 <html amp> ,方便其他程序识别 AMP HTML;

必须在 HEAD 区域中放置 <link rel="canonical" href="$SOME_URL"/> 标签,指定该页面普通版本的 URL;如果只有一个版本,则使用当前 URL;

必须将 <meta charset="utf-8"> 放置在 HEAD 区域最开始的位置;

必须在 HEAD 区域包含这个 ViewPort: <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui">

这个JS必须作为HEAD区最后加载的元素<script async src="https://cdn.ampproject.org/v0.js"></script>

必须在 HEAD 区域包含上面示例所示的 <style amp-boilerplate><noscript> 的相关代码;

更多 AMP HTML 相关说明,可移步 AMP HTML官方文档

自定义组件

AMP HTML 自定义5个组件 amp-adamp-embedamp-imgamp-pixelamp-video

组件直接以标签的形式进行使用,如页面中需要加载 videoimg 使用相应的组件即可

amp-video amp-img 组件实际是使用HTML原生 <video> <img> 标签来实现,所以在页面上的展示效果和原生HTML一致。

amp-adamp-embed 组件主要用于引入广告类信息,使用iframe的方式来实现。

AMP JS

AMP JS 是 AMP 技术的核心。AMP JS 负责协调资源的加载时机和优先级,它还负责页面的性能优化,AMP JS 也负责提供验证器等调试功能,在URL最后加 #development=1 就会开启调试模式,AMP会自动加载验证器,并在控制台显示本页不符合AMP规范的报错信息,这样,debug就变成了一个很方便的事情

Google除了这种方式之外,还提供了浏览器拓展插件来debug,这样就更为方便了(其实还有一个工具来着 不过忘了23333)

Google AMP Cache

Google AMP Cache 是一个基于代理机制的内容分发网络(CDN),它会分发所有合格的AMP文件,它会抓取AMP页面并进行缓存,自动提升页面的性能。使用Google AMP Cache,页面、JS文件、图片等都是从同一个源获取,并且使用HTTP2.0来优化性能。就是你的AMP页面被谷歌收录之后,那个页面的内容就直接给谷歌进行CDN加速了(也算一个福利吧)

这个缓存机制还带有的验证系统,以确保网页不受外部资源的限制,能随时随地正常运行。它能自动验证网页是否符合AMP HTML的规范。

总结

AMP有利于网站SEO,在网站内容差不多的情况下,使用AMP的网站在 Google 搜索中可以获得更靠前的排名。但由于国内网络环境:Google在中国只有北京节点,如AMP JS、AMP Components 必须从 cdn.ampproject.org 加载;Web Font 必须从 fonts.googleapis.com 加载,这些源在国内访问速度很慢甚至直接被墙。引入第三方资源受限。并且需要遵循严格的代码规范指引。

等到有时间的话我会自行操作适配AMP,届时我会发一篇新的文章分享适配的经验泽泽dalao还等着抄我css呢(´・ω・`)

已有 4 条评论 (旧评论在前)
  1. holmesian
    回复
    2017-12-01 23:49 Windows NT10

    请试试AMP的插件:https://holmesian.org/AMP-for-Typecho

    1. 尚寂新 博主
      回复
      2017-12-02 06:37 Android 5.1

      看样子你站点是强制amp吧
      我这边已经是amp和mip双支持了 哈哈
      比较喜欢集成到主题里去 听说插件左一个钩子又一个钩子影响性能

  2. 知道91博客
    回复
    2017-12-05 00:31 Windows NT10

    我还是觉得自适应网站体验比较好些~

    1. 尚寂新 博主
      回复
      2017-12-06 12:29 Android 5.1

      mip和amp是针对搜索引擎入口页面的方案 我这块只是文章页覆盖了amp和mip 全站仍然是instantclick加自适应方式的方案 感觉这个对于潜度访问(就看一篇文章)的人是很有用的 因为用不着加载全站资源

添加新评论 (Markdown Supported)
(ノ°ο°)ノ