为什么 Adsense 在 AMP 页面显示空白, AMP 和 HTML 广告代码有什么区别

什么是 AMP ?

AMP 是 Accelerated Mobile Pages 的缩写,从字面上理解这是一项针对移动设备增加页面访问速度的 Web 技术,它是一项由 Google 提出的一种安全可靠的网页快速渲染技术,可以大幅度提升特别是移动设备的页面加载时间,从而让内容浏览更加方便和高效。

AMP 是通过限制加载一些 HTML、CSS 以及 JavaScript 等内容来提供更可靠且快速的页面浏览体验。这些限制是通过 AMP 一个验证器强制执行的。为弥补这些限制 AMP 定义了一系列不同于基础 HTML 的自定义元素来丰富内容,让网页不至于像文本文档(txt)那么单调。

How-To-Use-Adsense-In-AMP-Pages

从技术方面来说,采用 AMP 技术的网页之所以可以打开的这么快,这主要是因为 AMP 过滤了传统 HTML 网页代码中各种会拖慢页面渲染速度的元素,比如第三方的 JS 脚本、HTML 标签、追踪器等,经过 AMP 优化的页面在 Google 搜索结果页中会在标题后面附带一个圆形 AMP 闪电图标,不过是否会对搜索排名有帮助就不得而知了。

AMP Adsense 广告代码

回到 Google Adsense,如上所述 AMP 会过滤传统 HTML 元素,所以直接拿普通网页上的 Adsense 代码用在 AMP 页面上是无效的,只会显示一片空白区域。

Google 建议为 AMP 页面申请单独的 自适应展示广告 [Responsive]-[Display ads],目前只有展示广告和 AMP 兼容。

How-To-Use-Adsense-In-AMP-Pages

获得新申请的 Adsense 广告代码后,点击 AMP 从默认的 HTML 代码切换为 AMP 专用代码。

请注意 AMP 专用代码有一条额外的 JS 代码需要被添加到 AMP 页面的 <head> 标记内。

然后再把 AMP 专用 Adsense 代码插入到 <body> 标记内就可以正常显示了。

How-To-Use-Adsense-In-AMP-Pages

使用 Wordpress 的 AMP 插件

对于 Wordpress 用户来说可以方便的通过插件来实现 AMP 页面生成和 Adsense 代码的插入。

AMPforWP 是我测试使用的 AMP 插件,另外还有 Google 官方的 AMP 插件可供选择,但是由于我还没有使用过就不介绍它了。

安装完该插件后,从 Wordpress 左侧菜单 [AMP] –  [SETTING] – [Advertisement] 进入设置。

共有 #6 数量的位置可以插入广告单元,只需要启用需要插入广告的 AD 单元,填入刚才申请的 [Data AD Client] 和 [Data AD Slot] 就可以了,自适应广告则不需要选择尺寸,直接启用 [Responsive] 即可,设置完毕在底部点击 [Save Changes] 保存。

How-To-Use-Adsense-In-AMP-Pages

如此你就可以在 AMP 页面显示 Google Adsense 广告了。
How-To-Use-Adsense-In-AMP-Pages

You may also like...

说点什么

avatar
  Subscribe  
提醒