如何在不破坏 reCAPTCHA v3 徽章的情况下隐藏它

你可以隐藏 reCAPTCHA 徽章，Google 允许这样做。但有一个大多数教程略过的要点：你必须用可见的署名文本替换它，否则你就违反了 reCAPTCHA 服务条款。本指南涵盖有效的 CSS、Google 要求的确切措辞，以及之后如何确认 v3 仍在为你的流量评分。

徽章为何会出现

reCAPTCHA v3 没有复选框，也没有图片拼图。它在后台悄悄为访客评分。右下角那个浮动徽章是你的站点正在运行它的唯一迹象，而这正是重点。徽章是 Google 向你的用户披露数据收集的方式。

检查它，你会发现一个带有如下内联样式的包装元素：

<div class="grecaptcha-badge" data-style="bottomright" style="  width: 256px;  height: 60px;  position: fixed;  visibility: visible;  right: -186px;      /* collapsed, only the 70px logo sticks out */  bottom: 14px;  box-shadow: gray 0px 0px 5px;  transition: right 0.3s ease 0s;"></div>

那个 right: -186px 比徽章的任何其他方面都更让人困惑，而它并不是 bug。徽章宽 256px，Google 将其中 186px 停在屏幕外，只露出徽标图块。悬停其上，一个过渡会把它滑回 right: 0 以显示完整面板。

重要的细节是，这些是 内联 样式。你样式表中一条普通的 right: -256px 规则在特异性之争中会落败，这就是为什么许多悄悄移动徽章的尝试毫无效果。

Google 的条款究竟怎么说

Google 的 reCAPTCHA 常见问题在一个条件下允许隐藏徽章：

只要你在用户流程中可见地包含 reCAPTCHA 品牌标识，就允许隐藏徽章。

实际上：如果隐藏了徽章，署名必须在每个运行 reCAPTCHA 的页面或表单上可见。不是塞进你的隐私政策里。不是放在折叠的页脚手风琴中。而是可见的、处于流程中的、用户实际所在的位置。

隐藏徽章却不署名的站点，可能面临其 site key 被禁用的风险。这是真实的执行机制，而非理论上的，因此值得你花三十秒。

第 1 步：用 CSS 隐藏徽章

使用 visibility: hidden，而不是 display: none。设置 display: none 会把元素完全从布局树中移除，这在某些浏览器和脚本加载组合下会导致 reCAPTCHA 脚本行为异常。visibility 让盒子保持可测量，同时使其不可见。 display: none 会将该元素完全移出布局树，这在某些浏览器与脚本加载组合下会导致 reCAPTCHA 脚本运行异常。而 visibility 则能在隐藏方框的同时，让它仍可被测量。

/* Hide the reCAPTCHA v3 badge.
   Google's inline styles set visibility: visible, so !important
   is genuinely required here. */
.grecaptcha-badge {
    visibility: hidden !important;
}

如果你只想在某些页面上去掉它，请限定范围而不是全局：

/* Only hide the badge on checkout and contact. */
body.page-checkout .grecaptcha-badge,
body.page-contact .grecaptcha-badge {
    visibility: hidden !important;
}

第 2 步：添加署名

在每个使用 reCAPTCHA 的表单的提交按钮正下方放入这段内容。两个链接都是必需的。没有它们的纯文本不满足该条件。

<p class="recaptcha-terms">
  本站受 reCAPTCHA 保护，并适用 Google
  <a href="https://policies.google.com/privacy">隐私政策</a> 和
  <a href="https://policies.google.com/terms">服务条款</a> 。
</p>

小号字体没问题，但要保持可读。要求是它可见，而灰底上 8px 的灰字如果有人细看是站不住脚的：

.recaptcha-terms {
    font-size: 0.8rem;
    line-height: 1.4;
    color: #6b7280;
    margin-top: 0.75rem;
}

第 3 步：检查 v3 是否仍在运行

隐藏徽章不应影响 token 生成，但请确认而非寄希望。在你的页面上打开控制台，手动请求一个 token：

// Paste into the browser console on your own page.
// A healthy v3 setup returns a long token starting with "03A".
grecaptcha.ready(function () {
    grecaptcha
        .execute("YOUR_SITEKEY", { action: "verify" })
        .then(function (token) {
            console.log("token length:", token.length);
            console.log(token.slice(0, 24) + "...");
        });
});

拿回一个 token，说明你的 CSS 没有破坏任何东西。如果它抛出 grecaptcha is not defined，说明 reCAPTCHA 脚本一开始就没加载，与徽章无关。你可以在我们的 实时 reCAPTCHA v3 演示页面.

上与一个已知良好的设置进行对比。

不要做什么

做法	为什么会失败
display: none	将元素从布局中移除。在不同浏览器和脚本加载组合下曾导致行为不一致。
opacity: 0 且无署名	仍然违反条款。不可见就是不可见，无论你用哪个属性做到的。
用 JavaScript 删除该节点	脚本可能会重新注入它，而你白白引入了一个竞态条件。
仅在隐私政策中署名	Google 要求它在用户流程中可见，而不是埋在另一个页面里。
z-index: -1	以不可预测的方式把徽章推到其他元素后面。在没有背景的页面上，它仍可能显示。

常见问题

隐藏徽章会降低我的 reCAPTCHA v3 评分吗？

不会。评分来自用户行为和浏览器信号，而非徽章是否在屏幕上。隐藏它不会改变请求的评估方式。

我可以移动徽章而不是隐藏它吗？

可以，如果位置是你唯一的不满，这是更安全的选项。设置 data-badge="bottomleft" 或 data-badge="inline" 在你的 reCAPTCHA 元素上。使用 内联 时你自己定位容器，而且由于徽章保持可见，你无需署名文本。

这也适用于 reCAPTCHA v2 吗？

仅适用于隐形 v2。v2 复选框小组件本身即为声明，因此没有单独的徽标需要处理。隐形 v2 会显示与 v3 相同的浮动徽标，并遵循相同的规则。我们关于 reCAPTCHA 是什么及其工作原理 的指南介绍了各版本之间的差异。

Google 真的会强制执行吗？

site key 可能因违反条款而被停用。对于低流量网站这种情况并不常见，但添加署名代码片段只需半分钟，因此实在没有理由去冒这个风险。

小结

使用 visibility: hidden !important隐藏徽标，在提交按钮下方添加包含两个 Google 链接的署名段落，然后在控制台中确认 token 仍能正常生成。这就是完整的合规做法，大约只需五分钟。

如果你是在代码层面处理 reCAPTCHA v3，而不仅仅是调整样式，CapSkip 是一款 本地验证码识别工具 ，它在你自己的机器上运行，并通过你已在使用的 API 返回 token。我们的 reCAPTCHA v3 识别工具 页面提供了集成细节。