QName AI logoQName AI
全部文章
SEO 工程2026/08/11

CSS 装饰层如何优化关键词密度：从 12 个重复水印文本节点到干净的三词组报告

某视频工具页的目标三词组已经覆盖标题、正文、FAQ 和 CTA，却被演示水印生成的重复文本压过。本文记录如何把 12 个平铺水印节点改成 CSS 伪元素或 SVG 装饰层，在不增加目标词次数、不改变视觉效果的前提下清理统计噪声，并补充无障碍边界、复测方法和关键词密度前后数据。

一次页面验收中，浏览器里的 SEO 扩展给出了一个奇怪结果：页面的目标三词组 video watermark remover 已经出现在 Title、H1、面包屑、正文、FAQ 和 CTA 中， 却只排在三词组列表第 3。排在前面的 ai preview ai 没有搜索意图，也不是页面主题， 它只是效果演示里的水印文案。

修复前，目标词出现 7 次，页面总词数为 1071，关键词密度是 0.65%； ai preview ai 出现 10 次，关键词密度反而达到 0.93%。如果只看报告，很容易继续往正文里 添加目标词。源码和渲染结果对照后，问题出在 12 个平铺水印文本节点。

脱敏后的修复前关键词密度报告，无意义三词组出现 10 次并排在目标词前面。

10 次无意义三词组是怎么产生的

三词组统计通常按连续三个英文单词滑动计数，它不理解页面主题，也不判断短语有没有搜索价值。 演示水印使用了 AI preview，平铺模式一次渲染 6 份，于是 DOM 中出现这样一串文本：

AI preview AI preview AI preview AI preview AI preview AI preview

每次向后移动一个单词，都会得到新的连续三词组。6 份相同的两词文案会产生 5 个 ai preview ai。同一种平铺效果又出现在两个内容区块里，所以最终是：

每组 5 次 × 2 个区块 = 10 次

页面还有横幅式和角标式水印，全部算下来共有 17 个 AI preview 文本节点。它们只是为了 模拟画面上的水印，却进入了正文提取结果，稀释了真正的关键词密度。目标词覆盖的位置本来没有问题， 统计噪声来自演示 UI。

不要用更多目标词掩盖 UI 噪声

把目标词从 7 次增加到 11 次，确实可以在这份报告里超过 0.93%。代价是标题、功能介绍、 FAQ 和按钮附近会重复同一句话，读者先感到生硬，搜索引擎也可能把它当作刻意堆砌。

关键词密度优化可以先检查页面里哪些内容真正承担语义。标题、说明、按钮和错误提示应该保留为 HTML 文本；背景水印、纹理、光斑和重复标记只负责视觉，不需要进入 DOM 文本和无障碍树。 这个案例没有增加一次目标词，而是把装饰文案从内容层移了出去。

把平铺水印改成 CSS 装饰层

改造前，每个水印都是一个真实文本节点：

{Array.from({ length: 6 }).map((_, index) => (
  <span key={index} className="watermark-item">
    {text}
  </span>
))}

改造后，元素只负责定位，文字由 CSS 伪元素绘制。data-watermark 继续接收本地化文案， 容器用 aria-hidden="true" 明确告诉辅助技术，这一层没有需要朗读的信息：

<div aria-hidden="true" className="watermark-grid">
  {Array.from({ length: 6 }).map((_, index) => (
    <span
      key={index}
      data-watermark={text}
      className="watermark-item before:content-[attr(data-watermark)]"
    />
  ))}
</div>

这样改完后，页面仍显示相同数量、相同角度和相同透明度的水印，但空的 <span> 不再包含 AI preview 文本节点。浏览器的 innerText 不会收集伪元素内容，这次使用的 SEO 扩展也不再把 这些装饰文字计入三词组关键词密度。

固定图案还可以做成 CSS background-image 或 SVG pattern。动态多语言水印用 content: attr(data-watermark) 更方便；固定品牌形状适合外部 SVG 背景。如果选择内联 SVG， 不要再复制十几份 <text>，否则一些文本提取器仍可能读到它。纯装饰场景可以使用外部 SVG、 data URI 或路径图形，并给承载元素加上 aria-hidden="true"。

关键词密度前后变化

修复后，水印视觉实例仍然存在，17 个可见的演示水印都能正常显示。变化只发生在内容提取层：

指标修复前修复后
页面总词数10711038
ai preview ai10 次，0.93%0 次，0%
video watermark remover7 次，0.65%，第 37 次，0.67%，第 1
演示水印视觉效果正常正常
AI preview 文本节点17 个0 个

目标词仍是 7 次。因为无关装饰文本退出了统计，总词数下降，目标关键词密度从 0.65% 升到 0.67%，并回到三词组第 1。这个变化很小，却更准确地反映页面内容，也没有牺牲可读性。

脱敏后的修复后关键词密度报告，目标三词组保持 7 次并升到第 1。

如何复测 CSS 或 SVG 装饰层

先看页面，不要只看代码。确认所有水印仍能显示，响应式布局、旋转角度、透明度和本地化文字没有变化。 然后从 document.title 和 document.body.innerText 重新提取文本，按连续三个单词计数：

const text = [document.title, document.body.innerText]
  .join('\n')
  .toLowerCase();
const words = text.match(/[a-z0-9]+(?:['-][a-z0-9]+)*/g) ?? [];
const counts = new Map();

for (let i = 0; i <= words.length - 3; i += 1) {
  const phrase = words.slice(i, i + 3).join(' ');
  counts.set(phrase, (counts.get(phrase) ?? 0) + 1);
}

console.log(counts.get('video watermark remover') ?? 0);
console.log(counts.get('ai preview ai') ?? 0);

复测还要包含四项：检查页面只有一个 H1，确认目标词仍分布在高价值位置，查看无障碍树里没有重复水印， 刷新 SEO 扩展的旧报告。扩展可能缓存上一次结果，只重新加载网页不一定会立即更新关键词密度。

哪些文字不能这样处理

CSS 生成内容只适合装饰。价格、表单标签、按钮文字、状态、错误信息、版权归属和操作说明都需要真实 HTML 文本。把这些内容移进伪元素，会让复制、翻译、辅助技术和自动化测试变得不可靠，也可能损害 SEO。

SVG 也有同样边界。信息图中的关键数字需要替代文本或正文说明；只是铺在图片上的重复纹理，才适合 作为隐藏于无障碍树的装饰层。判断方法很简单：去掉这层文字后，如果用户仍能完整理解页面，它才是装饰。

常见问题

CSS 伪元素一定不会被搜索引擎统计吗？

不能把一次扩展复测当成所有搜索引擎的固定规则。可以确认的是，伪元素内容不在 document.body.innerText 中，这次三词组统计也从 10 次降到了 0。公开页面上线后，仍应结合搜索引擎 实际抓取结果和索引表现观察。

为什么不直接删除水印元素？

页面需要用水印演示处理前后的差异。删除视觉层会让案例失去上下文；保留装饰层、移除重复文本节点， 可以同时满足产品表达、无障碍和关键词密度检查。

关键词密度升到多少才算合格？

没有一个适用于所有页面的固定百分比。关键词密度报告适合发现漏词、重复模板和异常文本，不能代替 搜索意图、内容质量与页面结构判断。目标词覆盖 Title、H1、主要段落和相关问答后，应优先清理噪声， 不用为了超过某个工具中的最高数值继续重复。

全部文章