谷歌搜索结果中页面标题水印显示问题的解决方法咨询

问题背景 #

练习用的测试网站运行正常，但谷歌搜索结果里的页面标题会带上水印内容（比如显示“CONTACT Contact Us”，而非预期的仅“CONTACT”）。直接删掉水印会让页面标题显得空洞怪异，试了visibility:hidden;没用，需要只在谷歌搜索结果里隐藏水印，同时保留页面上的显示效果。

当前HTML结构：

<h1 class="page-title">
    CONTACT
    <span class="watermark">Contact Us</span>
</h1>

解决方案 #

方案一：CSS伪元素生成水印（优先推荐） #

把水印文本从DOM里移除，用CSS伪元素动态生成内容。这样谷歌爬虫抓取时只能读到主标题，页面显示完全不受影响，是最可靠的方法。

修改后的HTML：

<h1 class="page-title">
    CONTACT
    <span class="watermark"></span>
</h1>

对应的CSS：

.watermark::after {
    content: "Contact Us"; /* 替换为你的水印文本 */
    /* 以下是原水印的样式，根据你的需求调整 */
    margin-left: 10px;
    font-size: 0.8em;
    color: #999;
}

方案二：JS动态注入水印 #

如果没法修改CSS，可通过JS在页面加载后添加水印文本。部分搜索引擎爬虫不执行JS，就不会抓取到水印内容，但可靠性不如伪元素方案。

修改后的HTML：

<h1 class="page-title">
    CONTACT
    <span class="watermark"></span>
</h1>
<script>
document.addEventListener('DOMContentLoaded', () => {
    document.querySelector('.watermark').textContent = 'Contact Us';
});
</script>

方案三：aria-hidden辅助属性（补充方案） #

添加aria-hidden="true"告诉屏幕阅读器忽略水印，但部分搜索引擎可能仍会读取文本，仅作为备选：

<h1 class="page-title">
    CONTACT
    <span class="watermark" aria-hidden="true">Contact Us</span>
</h1>

注意：不要用display:none，会直接让页面上的水印消失；visibility:hidden之所以没用，是因为DOM里的文本依然存在，爬虫还是会读取。

内容的提问来源于stack exchange，提问作者thecodex