Google Translate生成的Original Text H1标签影响谷歌搜索结果的解决方法

你使用Google Translate JS库实现网站翻译功能时，自动生成的包含"Original Text"的H1标签会被谷歌搜索引擎抓取并显示在搜索结果中，可通过以下几种方法解决：

方法一：用CSS强制隐藏该元素 #

直接通过CSS选择器定位到生成的容器，将其彻底隐藏，避免搜索引擎读取到该内容：

#goog-gt-tt {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

将这段CSS添加到你的网站样式表中，即可阻止该元素被搜索引擎抓取。

方法二：用JavaScript动态移除元素 #

由于该元素是Google Translate JS动态生成的，可通过DOM监听来定位并移除它：

// 创建DOM变化监听器
const translationObserver = new MutationObserver((mutations) => {
    mutations.forEach(() => {
        const translateTooltip = document.getElementById('goog-gt-tt');
        if (translateTooltip) {
            // 移除整个自动生成的容器
            translateTooltip.remove();
            // 完成操作后停止监听，避免资源浪费
            translationObserver.disconnect();
        }
    });
});

// 监听body下的所有子元素变化
translationObserver.observe(document.body, { childList: true, subtree: true });

这段代码会在元素生成后立即移除它，确保搜索引擎无法抓取到该H1标签。

方法三：添加data-nosnippet属性阻止抓取 #

给生成的容器添加谷歌官方的data-nosnippet属性，明确告知搜索引擎不要抓取该部分内容：

const addNoSnippetAttr = () => {
    const translateTooltip = document.getElementById('goog-gt-tt');
    if (translateTooltip) {
        translateTooltip.setAttribute('data-nosnippet', '');
    }
};

// 延迟执行，确保元素已被生成
setTimeout(addNoSnippetAttr, 1200);

该方法不会移除元素，但会让谷歌搜索结果忽略这段内容。

注意事项 #

• 优先使用方法一或方法二，这两种方式能直接消除该元素的存在，避免潜在的抓取问题；
• 不要修改Google Translate的官方JS文件，否则可能导致翻译功能失效或触发反爬机制。

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