AMP移动加速页面添加Google AdSense广告代码的设置方法

赖博主以前不愿意使用Google AMP加速网站,说因为不方便添加AdSense广告。其实通过WordPress官方AMP插件实现的AMP网页很容易就添加AdSense广告。方法和添加AMP Google Analytics是一样的,只需要添加相应的JS库AMP格式的AdSense广告单元即可。
具体方法如下:
1 在WordPress控制后台的AMP插件的amp/templates/single.php文件里/head之前添加以下JavaScript代码:
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

2 接下来在amp/templates/single.php文件里,对应文章中需要出现广告位置的地方添加AdSense单元,注意AdSense广告单元需要是AMP格式:
以下代码是自适应尺寸广告,建议放在文章标题下(非首屏Below the fold),如下图所示(注意data-ad-client和data-ad-slot的值换成你自己的ID):
<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

下面的代码是首屏(Above the fold)自适应尺寸广告,建议放在文章标题之上:
<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>
OK,WordPress官方插件AMP下的AdSense广告设置就是如此简单。
我感觉AMP页面下的AdSense广告又干净、整洁、快速,和内容也浑然一体,估计点击率应该会高一些。
AMP移动加速页面添加Google Analytics统计代码的设置方法

网站支持AMP移动网页加速加载技术后,从Google搜索移动端进入相应页面,加载速度确实如闪电般快捷,页面如出水芙蓉般清爽。
对于WordPress博客而言,如果是通过官方AMP插件实现AMP加速,该插件并不自带Google Analytics统计服务,因为官方AMP插件就相当于另一套主题。因此需要用户自己添加Analyitics代码,才能实现统计服务。
根据Google的官方总体说明,对于WordPress的官方AMP插件,Analytics代码添加方法如下(其它插件或者网站程序和此原理一样):
1 在WordPress控制后台的AMP插件的amp/templates/single.php文件里,将以下代码添加到/head标签之前。
<script async custom-element="amp-analytics"
src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
添加通用JavaScript文件
2 然后再将以下代码(注意,此段统计代码不同于Analytics以前的代码,同时请将UA-XXXXX-Y替换成你自己的ID),放到amp/templates/single.php文件里的/body标签之前:
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXX-Y"
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
添加统计代码
至此,大功靠成。
从此AMP页面也会将访问统计发到你的Google Analyitcs里面,支持实时统计。需要分析AMP页面访问时候,可以通过AMP字段过滤出相关统计页面。
网站加载速度优化技巧

网站速度的重要性不言而喻。如果不是墙的影响,土木坛子目前的加载速度异常快,我在英国加载本网站首页,可以实现500毫秒以内完成加载,半秒钟都不到。
这是如何做到的?采用了什么优化方案?简单来说,我的优化方案和技巧如下,供博客朋友提升网页速度参考使用。
简洁的主题界面
如你所见,土木坛子目前采用WordPress官方主题2012, 禁用了Google字体,除了Google Analytics统计代码,其它全部采用本域名下的资源,包括JS, 图片等静态资源——连Gravatar头像都缓存在本主机上。2012主题是自适应简洁主题,我的首页加载的数量不到10个,这样就能最大限度地减少加载请求等待时间,同时也减少主机服务器开销。
选择SSD硬盘主机
我目前使用的是英国主机QuickHostUK,SSD固态硬盘。固态硬盘存取速度比传统硬盘要快得多,这样可以大大减少访客等待的时间。可以预见,随着SSD硬盘价格不断下降,将来不采用SSD的服务器将被慢慢淘汰。而对网站速度有要求的应优先选择SSD硬盘。
使用缓存机制
本网站由WordPress程序搭建,本来是动态PHP程序按需生成页面。我使用了WP Super Cache插件缓存所有网页。插件在后台生成HTML页面缓存在主机上,避免访客每次访问都要动态生成HTML网页,同时也降低服务器的压力。访客访问网页时,主机就像一台硬盘一样直接给出需要的文件,同时该插件支持GZIP压缩,文件体积压缩后可以减少在网络传输中所需要的时间。
采用先进CDN
我采用了CloudFlare的CDN,它不是普通的CDN。它使用Anycast(任播)技术的DNS全球解析,最大速度减少DNS解析时间。同时CDN技术让访客从全球任何地方都能从最短物理距离的地方加载静态资源:图片,JS, CSS文件(JS文件会优化合并)。而且CloudFlare最近使用了HTTP/2协议,让浏览器不再受限于HTTP并发请求数量,即可以同时加载更多的请求。
总的来说,我使用的优化方案并不复杂,成本预算也不高,但让网站的加载速度得到了极大的优化效果,对主机服务器、访客双方都非常友好。在移动网络时代,性能和网速和PC有线环境有区别,因此网站更应该为访客提供快速的加载访问速度。
每篇博文都是对Google数据库的成功修改
有一次,我去Forbetty博主那里找一篇博文,我直接用Google的site搜索死活搜不出来东西,而她的博客连自带搜索框都没有,我只得用WordPress的搜索参数(域名+?s=关键词),才将需要的内容搜索出来。
我给她留言建议参加搜索框,同时表示Google搜索不出来她的博客很奇怪,照理说,WordPress博客即使不作任何处理,对Google搜索也极其友好。她回复我:她把对搜索引擎开放功能关闭了。遵守君子协议的Google自然没有索引她的博客……
这也无可厚非。关闭搜索引擎开放,网站的内容就只会限定于特定的人群,没有了搜索引擎的帮忙,传播范围会小很多。无论你的选项有多少,总会有人需要,虽然很少有人会将博客的搜索引擎开放功能关闭。
我当然不会开启这个禁止搜索引擎索引的功能。相反,我很在意Google索引——我不关心其它搜索引擎。虽然我对自己的博文实行Copyleft个人原则:自由转载,但我每次写完后会手工提交到Google(Webmaster功能),这样的好处是Google会第一时间收录我的博文。任凭他人转载,时间戳上有保证Google始终知道我是原作者。
就Google搜索引擎而言,我有时候觉得,我每写一篇博文,就像成功合法地修改了Google的数据库:我每次写一篇博文,然后在Google里的搜索结果就被我改变了一次,因为这篇博文在这之前并不存在。从此,我的经验技巧、所见所闻,就交给了这个星球上目前最好用的搜索引擎,终究会传递到需要这些信息的人眼中。我不需要再付出什么,却可以持续地为他人服务。
这种感觉还不错,也算博客的乐趣之一。
如何经营好个人博客?
我写博客的时间不算短,见惯了个人博客中的种种现象与问题。以下就是这些问题的汇总,你如果想经营一个好博客,最好不要这样。
不要常换网站域名
不是.com域名?换?域名太长?换?被墙了?换?换来换去,依然不知道自己的域名应该是什么样,搜索引擎不知道,读者也不知道。域名永远是新的。月光博客的域名 williamlong.info 怎么样?我依然记得住,或者根本不用记。就像一个常换手机号的人,你觉得靠谱吗?招牌字号经常换,还能叫“百年老字号”?
不要追求VPS主机
个人独立博客是个独立网站,需要建立在主机服务器上。建在虚拟主机上还是VPS上?一般的博客完全不必放在VPS上。服务器的安全维护和优化,需要理论技术,还需要花费大量的时间和精力。选择一个好的虚拟主机,把这些事情交给技术人员,会做得更好。
我们最多明白汽车怎么生产就够了,实在感兴趣,可以买一些成型的零件组装一下,但完全不必要买来车床和一堆钢材,自己生产零件,然后再组装成汽车。那样的话,你应该直接去汽车厂。对于博客主机也是一样的道理。除非你特别喜欢折腾服务器,或者是IT从业人员。
不要纠结博客程序
静态博客程序还是动态博客程序?简单的功能还是复杂的功能?是否支持Markdown?能不能命令行写作?严格意义上来说,无论静态还是动态,两者皆可互换。大众化的WordPress成熟一条龙解决方案有什么不好?广告、评论管理,可简单可复杂,没有什么功能不能实现,就算迁移也无障碍。
很多IT高手们“喜欢”用静态博客生成器建立博客,号称Markdown语法爽翻天,其实博客上就那么几篇日志,记录一下自己搭建的过程,然后就再也没了。居然还问:程序员博客方案哪家强?Ghost,Jekyll,Github Pages,Hexo,弄来弄去都是折腾。事实上,建立一个好博客,不需要那么多功能。
不要折腾博客外观
内容最重要,外观不是那么重要,简洁就好,又快又突出重点内容。折腾过去折腾过来的换皮,其实也只有博主自己最重视这张皮。忠实的读者也许使用RSS订阅,根本看不到你折腾的主题外观。没有好的内容,再酷的外观都是渣,有好的内容,就是白纸黑字的界面也是赞。
不要盯着广告收入
博客早期流量一般不高,自然也不会有看得见的广告收入。虽然早期也可以投放,但不要期望有可观的收入。有了每天1,000个访客以后,广告收入自然会上来。死死地盯着广告收入,不但得不到,反而耽误写作好的内容。何况,博客的意义与收获又岂止这点广告收入?
不要限制写作话题
什么都可以写,博主是个活生生的人,每个人都是多方面的,在博客里记录自己的故事就好。你不可能只懂一方面,如果你只钻研某一方面,总会有一天写得想吐,你的读者也会看得想吐。你本身的复杂多样可以让博客也丰富多彩。别怕,土木坛子既谈曲高和寡的《圣经》,也谈喜闻乐见的好莱坞女明星艳照。
不要担心写作技巧
在能写好博客之前永远是写不好。只有写了,才会发现越来越容易写。关于写作手法,博客不是作文,不是公务员考试中的申论。其实,真实的思想表述不需要太多的技巧。
你若是一个严肃的人,想方设法抖出来机灵一点都不搞笑。你是什么样的人,就用什么样的语言,把事情和意思准确、干净地表达出来,这就是写作最基本也是最重要的要求。
内容与坚持是王道
换域名,换空间,换程序,换主题,SEO推广,清除博客,重新再来,最终不再博客,只得一声叹息:原来我也博客过。大多数人在折腾怎么搭博客,很少有人坚持写博客,坚持创造好的内容。
创建一个好Blog,当好一名Blogger,只有坚持创作好的内容才是王道。为什么要经营好自己的博客?无论互联网怎么变,独立个人博客是真正属于你自己的网络空间,博客久了,自会明白。
关于经营好个人博客,博主我算不上高手,你有什么建议和看法呢?欢迎留言分享。
WordPress博文中间插入AdSense广告的方法
见到赖博主在博文中间展示AdSense广告,我觉得这效果不错,问了他之后,他直接告诉了我代码,我自己也用英文搜索了一下,发现方法很简单,只需要添加一小段代码即可,完全不需要插件。
将你的AdSense广告代码放在下述代码中的“AdSense广告代码”处,然后再将此代码放到你的WordPress博客主题中的functions.php文件末尾,就可以实现在博文第二段后显示AdSense广告。
//Insert ads after second paragraph of single post content.
add_filter( 'the_content', 'prefix_insert_post_ads' );
function prefix_insert_post_ads( $content ) {
$ad_code = '在此处两单引号之间插入AdSense广告代码';
if ( is_single() && ! is_admin() ) {
return prefix_insert_after_paragraph( $ad_code, 2, $content );
}
return $content;
}
// Parent Function that makes the magic happen
function prefix_insert_after_paragraph( $insertion, $paragraph_id, $content ) {
$closing_p = '</p>';
$paragraphs = explode( $closing_p, $content );
foreach ($paragraphs as $index => $paragraph) {
if ( trim( $paragraph ) ) {
$paragraphs[$index] .= $closing_p;
}
if ( $paragraph_id == $index + 1 ) {
$paragraphs[$index] .= $insertion;
}
}
return implode( '', $paragraphs );
}
同理,修改"ad_code"后面的数字2为1即可实现第一段后显示广告,一切由你决定。上述代码中以下代码是判断单篇日志显示广告:
如何提高博客访问量?
写博客早已不算个时髦的事情,但多少还是有些人愿意像我这样坚持写博客。虽然我一直认为博客不必关注访问量,不过,大部分博主还是在意访问量,正如球场需要球迷的喝彩,歌手需要听众的掌声。
网上有太多各种提高博客访问量的技巧,大部分是千篇一律,陈辞滥调。作为一名写博多年的博主,我也被其他博主“咨询”过。我虽没有什么独门秘技,倒也有点自己的小经验。现将这位博友与我的交流整理公布如下,分享给各位博友。
博友来信
坛子兄:
您好!
我是XX博主YY,从我开始玩博客的那天起我就关注你的博客了,你的博客文章写得非常好,都是写得实用的生活技能和感悟,对我很有启发,我也想和你一样用博客写写生活感悟,写写人生。
我了解到你正式使用独立域名写博客是在2011年才开始的,而你的博客现在的浏览量已经在我看来是非常大了,因为你的是生活博客,一个生活博客能有这样的流量真的是非常地了不起的,而我的博客是在2012年建立的,相对你的博客来说也就是推后了1年时间,但是博客流量至今每天只有100-200IP之间,想请教您的博客流量是怎么增加起来的?有没有好的推广技巧?
感激为谢!
YY
我的回信
亲爱的YY:
容我好好想一想。这个问题有些大,但也很有意思。
SEO推广技巧方面,我基本上不懂。WordPress程序注意一下TAG标签的运用,貌视很有用,其它就没什么了。
内容方面,还是要写网上没有的内容,即要原创,讲究时效性的话,你必须跑在别人前面才行——但这个显然不划算,那是新闻网站的专长。
博文是写给自己和别人看的,所以要言之有物。我讲究说实话,所以至少从这一点来讲,博文就有人味,总会有一些是值得一读的。当然,最有用的还是提供一些小技巧给别人,这样最有流量,但我不太喜欢专门写这方面的内容,这不是个人博客的重点,所以我只是偶尔点缀一下。
博客评论很重要,建议采取网站自身的评论,不要第三方的插件,“多说”、Disqus之类并不好,自身评论Google能检索,也能加快加载速度,更重要的是,评论是一个很好的内容生成器,并且评论越多,搜索引擎会认为这是一个很有价值的网站。
一定要方便读者评论——不建议设置验证码之类的东西,垃圾评论格杀勿论——WordPress博客建议用Akismet自动过滤,有意义的评论博主建议回复——并使用邮件通知原评论者。
能评论留言的读者是黄金读者(看官们现在知道如何最好地支持博客主了吧?),他们极大提高博客的活跃度——也会让搜索引擎喜欢。你的博客程序不知为何,我无法自动用JS代码填充评论信息(可能是EMBLOG程序的问题),这样不利于别人评论。
网站硬件架构方面,我用WordPress程序,感觉很好。做好缓存——极大提高访问速度,主题简洁——极大提高加载速度,采用好的主机——极大提高加载速度,
另外,我没有百度的访客,所以读者质量应该相对较高,这更让Google可能觉得这是一个很好的网站——虽然你未必认可。所以土木坛子基本上写什么话题都能在Google搜索结果中取得较好的排名。虽然土木坛子只是一个各方面话题都涉及的个人网站(熟悉的朋友知道我连成人内容也是有关注的)——区别于那些职业博客们的利基博客(专门针对某个关键词某个主题),但Google依然认为这是一个原创、有意义的网站。
其它对于中文博客,其实只要博主认真写,Google都会给出很好的排名——因为大家都盯着百度,而且中文网站里面有多少网站是认真创作内容的呢?很少。
胡乱讲了这么多,还是希望作为一个博主多写一些原创的、有意义的、较独特的内容,这才是博客的真谛:创作,这样也对得起自己,对得住读者。至于流量什么的,不请自来。
PS 我的博客访问量其实并不大,也就200多万的样子,毕竟是被GFW认证了的网站。
祝好,
土木坛子
关于这个话题,你有什么窍门呢?欢迎留言分享。
不建议选择Jekyll等静态博客
上次在介绍WordPress博文转换成Jekyll和Farbox博客需要的Markdown格式一文中,我说过,不建议普通博客主选择Jekyll这样的静态博客生成器,后来有博友抱怨起WordPress的不是。关于这个问题,我其实在“工具是工具、问题是问题”中也提到过。
我见过太多的人说起Jekyll静态博客的好处,我就来说说相比WordPress程序,Jekyll静态博客的缺点与不是。
用着WordPress,可以考虑随时转出到其它博客平台,但是用着其它平台,谁还能保证能转出到哪儿?比如用Jekyll的话,一堆Markdown纯文本文档能方便地转到哪去?
如果要进行批量修改博文,还有哪种方法有MySQL等数据库的方式那样方便与快捷?程序员们会说,我们可以写脚本、写程序去批量修改,可是,大部分人不是程序员,程序员用额外的手段去实现非程序员常规手段就能实现的事情,有什么意义?难道不是浪费生命?
许多人说WordPress写博客是杀鸡用牛刀,WordPress既然是牛刀,杀鸡应该很方便,一刀就将鸡杀死,如果拿个小剪子,虽然剪刀的确轻巧方便,难道没有可能要好几下?
像Jekyll, OctorPress, Farbox这些程序或服务,谁能保证它们能像WordPress这样有成熟商业模式的长远发展规划与前景?如果没有,又有谁知道能用到哪一天?有人会说,Github提供的“不限流量”的“免费主机”不会死,别忘了 sourceforge.net 这样的服务五年前不也挺火吗?谁又曾想到过Live Space, Google Reader这样的服务不也是说关了就关了,它们的后台是Microsoft, Google。Github如果关掉page功能给Jekyll有什么商业和逻辑上的问题?更关键的是,Jekyll这些程序本身都可能没有人会持续维护。
还有,Jekyll这类静态博客有两个最大的缺点:
- 对于普通用户,Jekyll等搭建过程实在是复杂与痛苦,充满了安装Ruby环境和Git命令;
- 文章一多,生成时间太长太慢,并且需要好几分钟才能看到网页效果。
这与安装WordPress不需要任何命令的难易程序不可同日而语,毕竟前者的目的是所谓的“像黑客一样写博客”……正如Farbox的开发者所说:
(静态博客)它远比你想象中要不方便。
另外,博客本来就是网站的一种形式,有了WordPress等专业化程序,可以实现复杂的功能——总有些人需要一些强大的功能。即使是Jekyll静态博客最大的优点:静态网页带来的极快速度,WordPress不也能通过缓存插件轻松实现静态页面吗?
当然,我并不是说Jekyll等静态博客不好,它让人们多了一个选择,当然是一件好事,我只是说,它并不适合普通博客主,更不能以静态博客方式的出现,就说动态博客WordPress方式就不再适合写博客。
可能,下面是你该向我开炮的时候了,欢迎留下评论轻拍土木坛子……
WordPress博文转成Jekyll和Farbox博客最简单方法
最近两年来,所谓的静态博客有抬头的趋势,尤其是在程序员博客这个圈子里,大有WordPress动态博客程序就是垃圾的感觉。
如果你也想使用静态博客,比如用Jekyll, OctoPress建立博客,可能会发现建立过程并不容易。对于WordPress博主而言,博客迁移转换也不容易,官方推荐exitwp使用Git命令去完成转换。这对于不懂Git命令有没有相应Rubby程序环境的人来说,无异于天书。
WordPress导出为Jekyll的MarkDown格式
这里推荐一个很简单的办法,将WordPress格式博客文章转换成Jekyll静态博客需要的Markdown格式:在WordPress中安装WordPress to Jekyll Exporter插件。不需复杂步骤,不需运行任何命令,最适合非程序员博客主。
对于中文博客,在安装插件前需要对数据库进行操作一下(为防止出错,操作前请备份数据库)。进入博客对应的MYSQL数据库,进入到wp_posts数据表,选择Structure模式,然后找到post_name列表,点击Drop,即删除这个列表下的所有项值,如此操作后,WordPress to Jekyll Exporter插件导出的Markdown文件会以纯数字为博文名称,避免乱码和长文件名的问题。
完成以上操作后,点击此处在github上下载此插件,安装到需要转换的WordPress博客中,在“工具”栏里,点击"Export to Jekyll",插件即会将所有博文和页面自动转换成Jekyll要求的Markdown格式,然后自动打包下载到本地电脑上。解压下载文件后,将整个文件夹放到Jekyll, OctoPress等博客文件夹中,就完成了转换过程。
Jekyll的MarkDown格式博文+FarBox
虽然上述方法是针对Jekyll静态博客,但我个人强烈建议普通博主不要选择Jekyll静态博客,相反,可以选择Farbox.com,这是一个很强大的博客平台。Farbox其实支持纯文本文件,更不消说Jekyll版本的Markdown格式。
用Dropbox账号在Farbox上建立博客后—简单得不需要介绍,将上面转换得到的Jekyll版Markdown格式博文复制到Dropbox下面的Farbox博客文件夹中(建议Farbox博客后会在Dropbox中自动生成),你的博客立马就在Farbox中生成—绑定域名等事情当然是完美支持的。
土木坛子@FarBox
作为范例,欢迎在土木坛子的每篇博文链接“tumutanzi”后面添加“.farbox.”,即:https://tumutanzi.farbox.com(支持HTTPS SSL),就会发现Farbox的美。当然,我虽然欣赏Farbox, 但土木坛子依然会坚持使用WordPress, Farbox只是用来备份而己。
Farboxb其实提供在线WordPress XML转换成Markdown格式服务,但有严重的问题:引用格式后面的标点符号会丢失。我这里介绍的方法除了iFrame语法不支持外,其它HTML语法均完美支持。另外,中文博文名称可能会乱码—系统编码的原因,需要自行下载软件批量修改文件名。
在网站中插入Google站内搜索栏
如何在网页上插入Google搜索框?直接在需要插入的地方添加如下HTML代码:
<form method="get" action="https://www.google.com/search">
<div style="border:1px solid white; padding:4px;width:20em;">
<table border="0" align="center" cellpadding="0">
<tr><td>
<input type="text" name="q" size="20" maxlength="255" value="" />
<input type="submit" value="搜索" /></td></tr>
<tr><td align="center" style="font-size:100%">
<input type="radio" name="sitesearch"
value="tumutanzi.com" checked />土木坛子
<input type="radio" name="sitesearch" value="" />Google
<br />
</td></tr></table>
</div>
</form>
上次,我用Google自定义搜索取代了WordPress系统自带的搜索栏,后来发现Google自定义搜索JavaScript代码的确影响网站的加载速度,于是又换回了WordPress的自带搜索,可惜WordPress自带的搜索功能只能搜索博文内容,无法搜索留言评论内容。
考虑到土木坛子上的留言已经超过20,000条,内容加起来比700多篇博文还要多,我觉得有必要使用Google站内搜索,于是找到了以上代码插入到网站中,替代WordPress自带搜索功能——直接在主题“小工具”选项中增加“文本”一栏,将代码填进去即可。提交搜索内容后,这个搜索框会自动跳转到Google主页搜索整个网站,也可以选择搜索整个互联网。