Typecho文章页适配AMP的一些参考
前两天看到泽泽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-ad 、 amp-embed 、 amp-img 、 amp-pixel 、 amp-video
组件直接以标签的形式进行使用，如页面中需要加载 video 、 img 使用相应的组件即可
amp-video amp-img 组件实际是使用HTML原生 <video> <img> 标签来实现，所以在页面上的展示效果和原生HTML一致。
amp-ad 、 amp-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呢(´･ω･`)
请试试AMP的插件：https://holmesian.org/AMP-for-Typecho
看样子你站点是强制amp吧
我这边已经是amp和mip双支持了 哈哈
比较喜欢集成到主题里去 听说插件左一个钩子又一个钩子影响性能
我还是觉得自适应网站体验比较好些~
mip和amp是针对搜索引擎入口页面的方案 我这块只是文章页覆盖了amp和mip 全站仍然是instantclick加自适应方式的方案 感觉这个对于潜度访问(就看一篇文章)的人是很有用的 因为用不着加载全站资源