跳到主要内容
Mera News

出版商指南，第 5 章

广告

最近审查：2026 年 11 月

广告为新闻报道提供资金，同时也造成了读者对新闻网站的许多不满。Better Ads 联盟（Coalition for Better Ads）发布了一份低于其标准的广告形式清单。本章介绍这份清单、如何为每个广告位预留空间，以及在各种屏幕上如何放置广告。

应避免的形式

Better Ads 标准列出了 6 种桌面端形式和 10 种移动端形式。短视频和移动应用另有单独的清单。

形式桌面端移动端
弹窗广告已列入已列入
带声音自动播放的视频已列入已列入
前置插页广告带倒计时无论有无倒计时
大型固定广告超过屏幕的 30%超过屏幕的 30%
广告密度高于 50%高于 30%
带固定视频广告时的密度高于 30%未列入
闪烁的动画广告未列入已列入
带倒计时的后置插页广告未列入已列入
全屏滚动覆盖广告未列入超过页面的 30%
固定、弹出式视频广告未列入已列入
固定视频搭配大型内嵌广告（300x600 或更大）未列入已列入

密度如何计算

密度是主要内容中所有广告的高度之和，除以主要内容的总高度。它相对于主要内容来衡量，而不是相对于视口。

  • 页眉、页脚和网站导航不计算在内，相关文章也包括在内。
  • 主要内容下方的广告不计入。
  • 所有形式都计入，包括固定广告和内嵌广告。
  • 每个固定广告的高度只计一次。
  • 在桌面端，侧边栏中的广告要计入。
  • 与页面相关的视频中的前贴片和中插广告不计入。

举个例子，假设一篇移动端文章的主要内容高 5,000 像素。要保持在 30% 或以下，其上的广告高度加起来不能超过 1,500 像素。

要检查真实页面，请把下面的代码粘贴到浏览器控制台。请根据你的模板修改选择器，并加上位于 article 之外的任何固定广告或侧边栏广告的高度。

const main = document.querySelector('article');
const slots = [...main.querySelectorAll('.ad-slot')];
const adHeight = slots.reduce((sum, ad) => sum + ad.getBoundingClientRect().height, 0);
console.log((adHeight / main.getBoundingClientRect().height * 100).toFixed(1) + '%');

为每个广告位预留空间

Web.dev 把广告列为造成布局偏移的最大因素之一。请在 CSS 中预留空间。Google 警告不要用 JavaScript 来做，因为偏移可能发生在脚本加载的时候。

<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>

@media screen and (max-width: 960px) {
  #ad-slot {
    min-height: 100px;
  }
}

使用 min-height，这样更大的广告素材仍然放得下。对于有多种尺寸的广告位，Google Publisher Tag 指南提供了三种做法：

预留好处代价
最大的尺寸没有偏移小素材下方留有空白
最小的尺寸没有空白投放更大素材时发生偏移
最常投放的尺寸兼顾两者有一些偏移，也有一些空白

同一份指南和 web.dev 还有两条规则：

  • 把 fluid 广告位放在首屏以下。它们会随素材调整大小，所以总会造成偏移。
  • 不要折叠没有投放广告的广告位。移除预留的空间，造成的页面偏移可能和插入内容一样大。请改为显示占位符，只有在广告位不太可能填充时，才让它一开始就处于折叠状态。

各种屏幕上的位置

在手机上

  • 按手机布局计算密度，因为移动端的上限更低。
  • 让固定广告保持在屏幕的 30% 以下。底部的短锚定广告是常见形式。
  • 避免悬浮在文章上方的广告，以及任何需要滚动或点按才能越过的全屏广告。
  • 让第一个广告位于标题和开头段落之下，这样就不会把你的 LCP 元素往下推。

在桌面端

  • 把侧边栏广告计入密度总数。
  • 让固定广告保持在屏幕的 30% 以下。
  • 视频从静音开始，由读者选择是否开启声音。
  • 先确定文章栏的尺寸，这样侧边栏广告位加载时不会让它移位。

速度与无障碍

  • 对首屏以外的广告做懒加载，使用广告标签自带的设置，或对你控制的 iframe 使用 loading="lazy"。
  • 每个 iframe 都有自己的主线程，所以在检查 INP 时，要看一次缓慢的交互来自哪个框架。
  • 在需要同意的地方，只在读者同意之后才加载广告标签。详情见弹窗一章。
  • 为广告区域加上标签，让读屏软件用户能够识别并跳过它们。
  • 根据 WCAG 成功标准 2.2.2，自动开始、持续超过 5 秒并与其他内容并行的动态内容，需要提供暂停、停止或隐藏的方法。这适用于动画广告。
<aside aria-label="Advertisement">
  <div id="ad-slot" style="min-height: 250px;"></div>
</aside>

检查你的状况

Search Console 中的广告体验报告（Ad Experience Report）会列出违反 Better Ads 标准的广告体验。如果审核给你的网站判定为“未通过”，报告会列出 Google 发现的问题，但它可能无法涵盖所有问题。请修复它标出的问题，然后申请新一轮审核，审核范围涵盖你的整个域名。

检查清单

  • 与你的广告运营团队一起，逐项过一遍形式表格，桌面端和移动端都要看。
  • 移除弹窗、移动端的前置插页广告和倒计时广告。
  • 在手机上，测量你最长和最短的文章模板的密度。
  • 检查每个固定广告都保持在屏幕的 30% 以下。
  • 用 min-height 在 CSS 中为每个广告位预留空间。
  • 把 fluid 广告位移到首屏以下。
  • 在折叠空广告位会让页面偏移的地方，改用占位符。
  • 对首屏以外的广告做懒加载。
  • 为每个广告区域添加标签。
  • 检查桌面端和移动端的广告体验报告。

来源