广告位不是放上去就完了：目录站的广告加载顺序、占位和竞价位该怎么排

目录站的广告位摆放，大部分人只关心位置。但真正决定页面体验的往往不是位置，是加载顺序。同样的三个位，一个先渲染骨架再填广告，一个让广告脚本同步阻塞在头部，用户感受到的速度差一倍不止。

图片来源：网络，版权归原作者所有，侵权请联系删除

顺序：内容先出，广告后补

总原则是条目内容必须在广告之前完成布局。目录站的核心价值是那张列表，用户是冲着它来的，广告是附带的。

具体排法：HTML 骨架里给每个广告位预留固定高度的容器，条目列表服务端渲染直出，广告脚本异步加载，加载完成后填进预留的容器里。这样即使广告完全加载失败，页面也是完整的，只是空一块。

反过来的做法很常见也很糟糕——把广告脚本放在 <head> 里同步加载，等它返回后才继续渲染后面的列表。第三方广告网络的响应时间不由你控制，一旦它慢了，整页白屏。

占位：CLS 几乎全是这里来的

做法	CLS 影响	说明
容器无高度，广告来了才撑开	严重	列表整体下移，多次偏移
容器固定高度，广告尺寸不符	中等	只偏移一次，可接受
容器用 min-height 加媒体查询	轻微	不同屏宽给不同高度
广告位放在首屏之外	基本无	偏移发生在视口外不计入

第二行值得说明：固定高度虽然会导致一次偏移，但只有一次，而且幅度可控，实际体验远好于让广告自己撑开容器。多个广告位依次撑开时，CLS 是累加的，几个 0.05 叠起来就过了 0.1 的及格线。

移动端尤其要注意。同一个广告位在 375px 宽的屏幕上和桌面上的尺寸完全不同，用一套固定高度必然出错。至少要按屏宽分两档写 min-height。

竞价位和自然条目必须能一眼分开

这不只是合规要求，也是信任问题。目录站里混着付费收录的条目是很常见的事，但如果用户看不出哪些是买的，他们会对整个列表的公正性打问号。

三种做法是安全的：付费条目卡片上有明确的「推广」角标，颜色与自然条目有区分；列表顶部的付费区块用分隔线和标题隔开；付费条目的排序位置固定，不参与自然排序。

不安全的做法是只在鼠标悬停时显示提示，或者用一个几乎看不见的浅灰色小字。这类提示在移动端等于没有。

顺带说一句出链属性：付费位置指向对方站点的链接，该加 rel="sponsored" 就加。这个标签 2019 年就有，加上去不影响什么，不加则属于明确不符合官方指引的情形。

页面侵入形态的红线

移动端的侵入式插页是谷歌明写过的一条：打开页面就弹出盖住主体内容的广告，或者需要关掉弹窗才能看到内容，这类形态在移动搜索里会被判定为体验问题。豁免的是 cookie 提示、年龄验证、登录墙这几种必需形态。

国内还要看百度的落地页规范，其中对首屏主体内容占比和顶部广告占比都有明确要求。一个简单的自测方法：用手机打开自己的页面，第一屏里广告占了多大比例，主体内容还剩多少能看。

目录站的列表页天生内容密度高，反而不容易踩线。容易出问题的是条目详情页——内容就那么一点，四周塞满广告之后主体占比就不够了。

广告位数量该定几个

建议上限：列表页两个（顶部一个、列表中穿插一个），详情页两个（内容下方一个、侧边一个）。超过这个数，边际收益下降得很快，而体验成本是线性的。

穿插在列表里的那个位置要小心。它打断了条目的连续性，用户数到第几条会被打断一次。放在第 6 条之后比放在第 3 条之后好，因为前者至少已经让用户看到了一屏有价值的内容。

监控该盯什么

三个数字：广告脚本的平均加载耗时、页面的 CLS 分布、广告位填充失败率。

第三个最容易被忽略。填充失败率长期在 30% 以上时，说明这个位置要么尺寸不主流，要么内容相关性太差，与其留着空着，不如换成自己的内容位（比如热门分类入口）。空一块广告位不只是少赚钱，还是一个显眼的残缺区域。