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

土木坛子

March 23, 2017

网站速度优化-Google-AMP

赖博主以前不愿意使用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>

AMP AdSense

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>

AMP AdSense

下面的代码是首屏（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广告又干净、整洁、快速，和内容也浑然一体，估计点击率应该会高一些。