推荐广告应插在<article>或主内容容器（如<main>）闭合标签之后、紧邻其后，不可直接塞入</body>前；否则易被SEO误判为正文、被读屏器误读或遭CMS重复渲染。
推荐广告该放在 article 后还是 body 末尾？
必须插在 <article> 或主内容容器（如 <main>、<div class="content">）的闭合标签之后，紧邻其后。放错位置会导致：SEO 把广告当正文、移动端被 footer 覆盖、或滚动到底部时广告“跳一下”才出现。
常见错误是直接塞进 </body> 前——这时它可能脱离语义流，被读屏器误读为独立区块；更糟的是，某些 CMS（如 WordPress 的 block editor）会自动把末尾 div 收进 content 区域，导致重复渲染。
用 div + CSS 实现响应式推荐位（不依赖 iframe）
iframe 虽简单，但加载慢、无法 SEO、移动端常白屏。推荐用本地托管的 <img> 或轻量 <picture> 配合 CSS 控制：
-
width: 100%+max-width: 728px（适配桌面横幅），移动端自动缩为320px - 加
margin-top: 2rem分隔正文，避免紧贴段落末尾显得像“续写” - 用
@media (max-width: 600px)把高度从90px降到60px，防止小屏挤压文字行高 - 务必设
loading="lazy"和decoding="async"，否则拖慢 LCP
示例结构：
立即学习“前端免费学习笔记（深入）”；
<article>
<p>…文章正文…</p>
</article>
<div class="ad-recommend" aria-hidden="true" role="presentation">
<picture>
<source media="(min-width: 601px)" srcset="ad-728x90.webp">
<img src="ad-320x60.webp" alt="推荐：XXX 服务" width="320" height="60">
</picture>
</div>
怎么让推荐广告不被 AdBlock 拦截？
AdBlock 主要靠 class/id 名称规则匹配，比如屏蔽含 ad、banner、recommend 的元素。但改名不是万能解——太花哨（如 xyz123）反而触发高级过滤规则。
更稳妥的做法是：
- 避开常见关键词：不用
ad-、rec-、promo-开头的 class；可选section-footer、content-suggestion - 不单独包裹广告图，而是把推荐文案和图片混排：
<div class="content-suggestion"><h3>你可能也喜欢</h3><img><p>限时优惠中</p></div> - 禁用
data-ad类属性（AdGuard 明确拦截），也不在 JS 中调用adsbygoogle等已知广告函数
为什么推荐广告点了没反应？检查这三点
用户点推荐位却无跳转，问题往往不在链接本身，而在上下文干扰：
- 父容器有
pointer-events: none（常见于某些动画库或全局遮罩层）→ 改成pointer-events: auto并只对子元素设none -
<a>标签被event.preventDefault()拦截（尤其用了第三方弹窗脚本时）→ 检查控制台是否有未捕获的 JS 错误，临时禁用其他 script 测试 - 广告图用了
background-image而非<img>→ background 无法绑定原生 click，必须用<div onclick="window.open(...)">手动处理
最隐蔽的坑：CSS 的 z-index 层级被 <header> 或 sticky 导航栏盖住，表面可点，实际点击事件落在了上层元素上——用浏览器开发者工具的“选择元素”功能悬停验证。
