meta name="google" content="notranslate" 仅对google搜索页翻译按钮和第三方google translate api工具有效，chrome内置翻译完全忽略它；真正生效的是translate="no"属性和class="notranslate"。
meta name="google" content="notranslate" 只对 Google 搜索页翻译按钮、Google 翻译插件有效，对 Chrome 内置翻译功能完全无效——别指望它能关掉地址栏的地球图标或顶部横幅。
为什么 meta name="google" content="notranslate" 经常失效
这个标签不是浏览器标准，而是 Google 自己定的“约定”，Chrome 从不读它。实际生效场景非常有限：
- Google 搜索结果页里点击“网页翻译”时，会跳过标记了该
meta的页面 - 第三方基于 Google Translate API 的工具（如某些 CMS 插件）可能识别它
- 如果写错
name值（比如写成name="robots"或漏空格），整个标签直接被忽略 - 必须放在
最前面，且不能有其他<meta>（比如<meta charset>）挡在它前面
translate="no" 才是 Chrome 真正认的禁翻指令
Chrome 原生支持 HTML5 的 translate 全局属性，值只能是字面量 "no"（不是 false、"off" 或空字符串）：
- 整页禁翻：
—— 必须加在根元素上，动态插入的 DOM 也要手动补 - 局部禁翻：
<div translate="no">v1.2.3</div>—— 比class="notranslate"更可靠，优先级更高 - 父级设了
translate="no"，子元素即使没写也会继承；想局部恢复可显式写translate="yes" - 配合
lang使用更稳，比如中文内容加lang="zh-CN"，避免 Chrome 把中英文混排误判为“需翻译目标语”
class="notranslate" 是兼容性兜底方案，但有坑
这个 class 名是 Chrome 特有的约定，IE/Firefox 不识别，但它比 meta 标签对 Chrome 更有效：
- 只作用于带该 class 的元素及其子节点，不影响整页
- 不能写成
class="no-translate"或class="not-translate"，Chrome 只认字面匹配"notranslate" - 伪元素（
::before/::after）里的内容仍可能被提取翻译，原始 HTML 文本才是关键 - 动态渲染的内容（如 Vue/React 插入的节点）必须在插入后立即加 class，否则翻译引擎可能已扫描完毕
真正要让 Chrome 不弹翻译横幅、不显示地球图标，得靠用户端设置：进 chrome://settings/languages 关掉“询问是否翻译非您所用语言的网页”，或者把域名加进“不翻译的网站”列表——网页代码层面能做到的，只是让翻译引擎“看到就跳过”，而不是阻止浏览器发起翻译请求本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
