你也可以成为AMP专家-学会优化AMP的7个最佳做法

飞飞  发表于 2019-02-20 20:28 | 复制链接分享      上一主题  翻页  下一主题
如何检测自己的网站是否适合使用 AMP

谷歌 AdSense 团队为网站站长们准备了一个可以自行测试 AMP 是否适用的网站。首先连接你的 GA 账户和 AdSense 账户,使两者相通。接著使用你的 AdSense 账户登陆 AMP 测试网址,你就能轻松通过网页中呈現出的自动数据,检查现有网站的 4 个关键质量指标。

点此进入 AMP 测试网址


g66FdFhq78Fh5hrO.jpg


AMP测试网址DEMO页面

在 AMP 测试网页展示的数据中,主要包含以下 4 个关键质量指标以及分组数据对比。

Bounce Rate 跳出率

Avg. Page Load Time (sec) 平均页面加载时间

Pages/Session 页面/访问

Avg. Session Duration /平均
访问时长


在 AMP 测试网址下方的对比数据中不难发现,越长的网页加载时间直接影响了网页跳出率。这一项发现同时适用于移动端和桌面端网页,尤其是超过 10 秒的加载时长导致跳出率持续攀升。而越短的加载时长,在访问数一定的情况下,跳出率大幅度减少。

欢迎使用 AMP 测试网址

查看你自己的网站数据,并检测你的网站是否具有以上特征。

GOCcHP1ocsMPys20.jpg


AMP 测试网址 DEMO 页面

查看完你的网站数据之后,如果发现自己的网页时长并不理想,尤其是访问次数集中在移动端页面,这说明你的网站此刻的确需要使用 AMP 功能。这项功能将帮助你在进行网页广告变现之前,优化网页流量和访问时长。

AdSense 团队现正召集对 AMP 有兴趣或需要技术支持的网站发布商。大家可以直接通过下面这个问卷来报名。我们会帮助参与报名的站长检测网站是否适合安装 AMP,并根据情况安排相应的技术支持。

BZ0pQtD0WfgWKnZd.jpg
优化 AMP 的 7 个最佳做法

1. 在 AMP 网页上展示与非 AMP 网页相同数量的广告,以实现每页收益最大化

当你使用AMP并看到网页加载时长、网站访问次数等多方面都有所提升之后,请不要急于安装更多的广告位置。AMP 项目的目标是帮助提高网页加载速度,让用户获得最佳体验。AMP 上投放广告也本着这样的目标,力求广告能够快速安全地呈现给用户、极具吸引力且效果卓著,而不是过度增加每个页面的广告比重。

小贴士

AMP广告入门指南

2. 在 AMP 中展示广告,你需要将自定义  组件添加到 AMP 网页中

在非 AMP 网页(传统 HTML)中,若要展示广告,需要添加一段 JavaScript 代码,才能投放来自广告网络的广告。出于性能和安全原因,你不能在 AMP 网页中添加第三方 JavaScript。因此,要在 AMP 中展示广告,你需要将自定义  组件添加到 AMP 网页中。

  第 1 步:添加 amp-ad 脚本

组件是 AMP 库的一个自定义广告扩展组件。 本质上是专为优化性能而精心设计的自定义 JavaScript。要运行  组件,你必须在 AMP 网页的 head 部分添加此组件所需的 JavaScript:

  第 2 步:添加 amp-ad 标记到 AMP 网页

超过 100 个广告服务商和广告网络提供与 AMP 的内置集成。要为指定广告网络添加广告,请添加  标记,然后在 type 属性中指定广告网络。

在本例中,我们添加一个广告位来投放 a9 网络中的广告:

  第 3 步:指定广告单元的大小

将 width 和 height 属性添加到  标记中,以便指定 AMP 网页上广告的大小:

  第 4 步:设置广告网络参数

每个网络都具有投放广告所需的特定数据属性。请参阅广告网络的  文档并添加所需的属性。在下面的示例中,a9 网络需要其他参数以指定广告的大小及其他详细:

  第 5 步:(可选)指定占位符

根据具体的广告网络,你可以选择在广告可供查看前显示占位符。这样做可防止出现空白,从而提供更好的用户体验。要指定占位符,请通过 placeholder 属性添加一个子元素。有关详情请参阅占位符和后备行为。

  第 6 步:(可选)指定后备行为

根据具体的广告网络,你可以选择在没有广告可投放时显示后备元素。要指定后备行为,请通过 fallback属性添加一个子元素。有关详情请参阅占位符和后备行为。

完成以上步骤,恭喜你可以在 AMP 网页上投放广告了。

3. 投放 AMPHTML 广告

AMPHTML 广告是一种更快速、更精简且更安全地在网页上投放广告的方式。虽然 AMP 网页支持传统的 HTML 广告,但这些广告的加载速度可能很慢。要让广告本身与 AMP 网页的其余内容一样快速显示,你可以制作 AMPHTML 格式的广告。AMPHTML 广告仅在经过验证后才会投放,可确保广告的安全性和良好表现。最重要的是,此类广告可以在网络上的任何位置(而不只是在 AMP 网页上)投放。

AMPHTML 广告是按照 AMPHTML 广告规范使用 AMP HTML 编写的(AMP HTML 的一种变体 + CSS)。这意味着广告无法再运行任意 JavaScript,而任意 JavaScript 正是导致传统广告表现很差的首要原因。因此,与核心 AMP 一样,核心广告 JavaScript 用例也内置于 AMP 开放源代码项目中,以保证广告实现良好行为。

小贴士

AMPHTML 广告优势、格式和工作原理

4. 利用定位数据增强广告请求

作为快速获取投放机制的一部分,实时配置 (RTC) 功能使发布商能够利用在运行时检索到的第一方和第三方定位信息增强广告请求。对于每个广告位,RTC 最多支持对定位服务器发出 5 次出价邀约,相关结果会附加到广告请求中。要对你的广告使用 RTC,你所使用的广告网络必须支持 RTC 和快速获取。

AMP RTC 发布商实现指南

AMP 实时配置

5. 展示位置与控件:优化广告展示位置

在第一个视口的正下方展示第一个广告(“非首屏”),以提供最佳用户体验。

除非你使用的是高级 CSS 或媒体查询,否则请确保你的广告单元位于网页中央,以便为用户提供最佳移动网页体验。

对 AMP 广告资源启用多尺寸广告请求,以增加广告竞价压力并提高收入。

6. 需求与定价:为广告确定合适的价格

跨所有销售渠道(包括直接和间接销售渠道)销售 AMP 网页上的广告单元,以最大限度提高你 AMP 网页上的广告资源的竞争力。

为 AMP 网页上的广告资源定价(价格与非 AMP 网页上的广告资源相差无几)。监控效果并适当调整价格。

确保所有广告需求渠道都在争夺你 AMP 网页上的广告资源,以提高竞争压力。

7. 广告类型:投放最佳类型的广告

避免使用尺寸很大的广告文件。

避免使用插页式广告或其他会导致内容在广告加载时重排的广告格式。

进行优化以提高可见度:将 data-loading-strategy 设置为 prefer-viewability-over-views。

通过支持的播放器或 amp-iframe 在视频内容中展示广告,以通过各种类型的内容创收。

使用多尺寸广告请求实现原生广告,以与展示广告展开竞争,从而在提供优质用户体验的同时增加需求压力。

  距米网  

找到您想要的设计

工程师、学生在线交流学习平台
关注我们

手机版- 距米网 |苏公网安备32041102000587号

© 2017-2025 居居米 苏ICP备18040927号-1