虽然这项技术已经在半年前出现了,一直没有实践的主要原因是:没有动力。直到最近才发现这货已经在Google的Webmaster的中出现了名为“Accelerated Mobile Pages”
Accelerated Mobile Pages (AMP) 是一项开源计划,可让网页在移动设备上快速加载并且看起来十分美观(即使是在网速很慢的情况下)。
如果您的页面既符合 AMP 要求又包含一些额外信息,那么它们也可通过利用 Google 搜索结果中的特殊展示功能来增强自身的吸引力。
于是在周末的时候只好试试会出现什么问题了。
官方有这样一个简单的入门文档:《Create Your AMP HTML Page》,依据这个文档一步步地做了下来:
首先,我们需要先创建对应的AMP模板页
<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>
接着,我们还需要在我们的正常页面中,添加下面的一行代码,来告诉Google,我们对应的AMP页面在哪里,如下的代码所示:
<link rel="amphtml" href="https://www.phodal.com/amp/most-important-15-books-of-phodal-programmer-life/"/>
原本,我以为这样就可以了,后来我发现我太天真了。
偶然间,发现AMP有一个Debug模式,就是在URL的最后添加一个#development=1
,然后我发现出了一堆的错——在浏览器的Console里。
只好整理一下经验分享一下。
大概遇到的问题就如上面所示,如果你也在用那就祝你好运咯。
围观我的Github Idea墙, 也许,你会遇到心仪的项目