本期的文章将带领你打通 AMP 与 SEO 的任督二脉,引导你如何从 GA 数据中检测出自己是否需要使用 AMP ?以及揭开优化 AMP 的神秘面纱,了解优化 AMP 的 7 个最佳做法。
1. 在 AMP 网页上展示与非 AMP 网页相同数量的广告,以实现每页收益最大化
当你使用 AMP 并看到网页加载时长、网站访问次数等多方面都有所提升之后,请不要急于安装更多的广告位置。AMP 项目的目标是帮助提高网页加载速度,让用户获得最佳体验。AMP 上投放广告也本着这样的目标,力求广告能够快速安全地呈现给用户、极具吸引力且效果卓著,而不是过度增加每个页面的广告比重。
2. 在 AMP 中展示广告,你需要将自定义 <amp-ad> 组件添加到 AMP 网页中
在非 AMP 网页(传统 HTML)中,若要展示广告,需要添加一段 JavaScript 代码,才能投放来自广告网络的广告。出于性能和安全原因,你不能在 AMP 网页中添加第三方 JavaScript。因此,要在 AMP 中展示广告,你需要将自定义 <amp-ad> 组件添加到 AMP 网页中。
第 1 步:添加 amp-ad 脚本
<amp-ad> 组件是 AMP 库的一个自定义广告扩展组件。<amp-ad> 本质上是专为优化性能而精心设计的自定义 JavaScript。要运行 <amp-ad> 组件,你必须在 AMP 网页的 head 部分添加此组件所需的 JavaScript:
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
第 2 步:添加 amp-ad 标记到 AMP 网页
超过 100 个广告服务商和广告网络提供与 AMP 的内置集成。要为指定广告网络添加广告,请添加 <amp-ad> 标记,然后在 type 属性中指定广告网络。
在本例中,我们添加一个广告位来投放 a9 网络中的广告:
<amp-ad type="a9"></amp-ad>
第 3 步:指定广告单元的大小
将 width 和 height 属性添加到 <amp-ad> 标记中,以便指定 AMP 网页上广告的大小:
<amp-ad type="a9">width="300" height="250"</amp-ad>
第 4 步:设置广告网络参数
每个网络都具有投放广告所需的特定数据属性。请参阅广告网络的 <amp-ad> 文档并添加所需的属性。在下面的示例中,a9 网络需要其他参数以指定广告的大小及其他详细信息:
<amp-ad type="a9"width="300" height="250"data-aax_size="300x250"data-aax_pubname="test123"data-aax_src="302"></amp-ad>
第 5 步:(可选)指定占位符
根据具体的广告网络,你可以选择在广告可供查看前显示占位符。这样做可防止出现空白,从而提供更好的用户体验。要指定占位符,请通过 placeholder 属性添加一个子元素。有关详情请参阅占位符和后备行为。
<amp-ad type="a9"width="300" height="250"data-aax_size="300x250"data-aax_pubname="test123"data-aax_src="302"><amp-img placeholder src="placeholder-image.jpg"></amp-img></amp-ad>
第 6 步:(可选)指定后备行为
根据具体的广告网络,你可以选择在没有广告可投放时显示后备元素。要指定后备行为,请通过 fallback 属性添加一个子元素。有关详情请参阅占位符和后备行为。
<amp-ad type="a9"width="300" height="250"data-aax_size="300x250"data-aax_pubname="test123"data-aax_src="302"><amp-img fallback src="fallback-image.jpg"></amp-img></amp-ad>
完成以上步骤,恭喜你可以在 AMP 网页上投放广告了。
3. 投放 AMPHTML 广告
AMPHTML 广告是一种更快速、更精简且更安全地在网页上投放广告的方式。虽然 AMP 网页支持传统的 HTML 广告,但这些广告的加载速度可能很慢。要让广告本身与 AMP 网页的其余内容一样快速显示,你可以制作 AMPHTML 格式的广告。AMPHTML 广告仅在经过验证后才会投放,可确保广告的安全性和良好表现。最重要的是,此类广告可以在网络上的任何位置(而不只是在 AMP 网页上)投放。
AMPHTML 广告是按照 AMPHTML 广告规范使用 AMP HTML 编写的(AMP HTML 的一种变体 + CSS)。这意味着广告无法再运行任意 JavaScript,而任意 JavaScript 正是导致传统广告表现很差的首要原因。因此,与核心 AMP 一样,核心广告 JavaScript 用例也内置于 AMP 开放源代码项目中,以保证广告实现良好行为。
4. 利用定位数据增强广告请求
作为快速获取投放机制的一部分,实时配置 (RTC) 功能使发布商能够利用在运行时检索到的第一方和第三方定位信息增强广告请求。对于每个广告位,RTC 最多支持对定位服务器发出 5 次出价邀约,相关结果会附加到广告请求中。要对你的广告使用 RTC,你所使用的广告网络必须支持 RTC 和快速获取。
5. 展示位置与控件:优化广告展示位置
在第一个视口的正下方展示第一个广告(“非首屏”),以提供最佳用户体验。
除非你使用的是高级 CSS 或媒体查询,否则请确保你的广告单元位于网页中央,以便为用户提供最佳移动网页体验。
对 AMP 广告资源启用多尺寸广告请求,以增加广告竞价压力并提高收入。
6. 需求与定价:为广告确定合适的价格
跨所有销售渠道(包括直接和间接销售渠道)销售 AMP 网页上的广告单元,以最大限度提高你 AMP 网页上的广告资源的竞争力。
为 AMP 网页上的广告资源定价(价格与非 AMP 网页上的广告资源相差无几)。监控效果并适当调整价格。
确保所有广告需求渠道都在争夺你 AMP 网页上的广告资源,以提高竞争压力。
7. 广告类型:投放最佳类型的广告
避免使用尺寸很大的广告文件。
避免使用插页式广告或其他会导致内容在广告加载时重排的广告格式。
进行优化以提高可见度:将 data-loading-strategy 设置为 prefer-viewability-over-views。
通过支持的播放器或 amp-iframe 在视频内容中展示广告,以通过各种类型的内容创收。
使用多尺寸广告请求实现原生广告,以与展示广告展开竞争,从而在提供优质用户体验的同时增加需求压力。