So blenden Sie das reCAPTCHA-v3-Badge aus, ohne es zu beschädigen

Sie können das reCAPTCHA-Badge ausblenden. Google erlaubt das. Doch es gibt einen Haken, den die meisten Tutorials überspringen: Sie müssen es durch sichtbaren Attributionstext ersetzen, sonst verstoßen Sie gegen die Nutzungsbedingungen von reCAPTCHA. Dieser Leitfaden behandelt das CSS, das funktioniert, den genauen Wortlaut, den Google verlangt, und wie Sie anschließend bestätigen, dass v3 Ihren Traffic weiterhin bewertet.

Warum das Badge überhaupt auftaucht

reCAPTCHA v3 hat kein Kontrollkästchen und kein Bildrätsel. Es bewertet Besucher unauffällig im Hintergrund. Das schwebende Badge in der unteren rechten Ecke ist das einzige Anzeichen dafür, dass Ihre Website es einsetzt, und genau das ist der Sinn. Über das Badge legt Google die Datenerhebung gegenüber Ihren Nutzern offen.

Untersuchen Sie es, und Sie finden einen Wrapper mit Inline-Styles wie diesen:

<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>

Das right: -186px bringt Menschen bei diesem Badge mehr als alles andere durcheinander, und es ist kein Bug. Das Badge ist 256px breit, und Google parkt 186px davon außerhalb des sichtbaren Bereichs, sodass nur die Logo-Kachel hervorlugt. Fahren Sie mit der Maus darüber, und eine Transition schiebt es zurück auf right: 0 um das vollständige Panel anzuzeigen.

Das wichtige Detail ist, dass dies inline Styles. Ein einfacher right: -256px Regel in Ihrem Stylesheet verliert den Spezifitätskampf, weshalb so viele Versuche, das Badge unauffällig zu verschieben, wirkungslos bleiben.

Was Googles’ Bedingungen tatsächlich sagen

Googles’ reCAPTCHA-FAQ erlaubt das Ausblenden des Badges unter einer Bedingung:

Sie dürfen das Badge verbergen, solange Sie das reCAPTCHA-Branding sichtbar im Nutzerablauf einbinden.

In der Praxis: Wenn das Badge ausgeblendet ist, muss der Hinweis auf jeder Seite oder in jedem Formular sichtbar sein, wo reCAPTCHA läuft. Nicht versteckt in Ihrer Datenschutzerklärung. Nicht in einem eingeklappten Footer-Akkordeon. Sichtbar, im Ablauf, dort, wo der Nutzer sich tatsächlich befindet.

Websites, die das Badge ohne Attribution verbergen, riskieren, dass ihr site key deaktiviert wird. Das ist ein realer Durchsetzungsmechanismus, kein theoretischer, deshalb sind dreißig Sekunden Ihrer Zeit gut investiert.

Schritt 1: Badge mit CSS ausblenden

Verwenden visibility: hidden, nicht display: none. Das Setzen von display: none entfernt das Element vollständig aus dem Layout-Baum, und das hat dazu geführt, dass sich das reCAPTCHA-Skript in bestimmten Kombinationen aus Browser und Skript-Ladevorgang fehlerhaft verhält. Visibility hält die Box messbar und macht sie gleichzeitig unsichtbar.

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

Wenn Sie es nur auf bestimmten Seiten weghaben möchten, beschränken Sie es, statt global vorzugehen:

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

Schritt 2: Fügen Sie die Attribution hinzu

Fügen Sie dies direkt unter der Absende-Schaltfläche in jedes Formular ein, das reCAPTCHA verwendet. Beide Links sind erforderlich. Reiner Text ohne sie erfüllt die Bedingung nicht.

<p class="recaptcha-terms">
  This site is protected by reCAPTCHA and the Google
  <a href="https://policies.google.com/privacy">Privacy Policy</a> and
  <a href="https://policies.google.com/terms">Terms of Service</a> apply.
</p>

Kleingedrucktes ist in Ordnung, aber halten Sie es lesbar. Die Anforderung lautet, dass es sichtbar ist, und grauer 8px-Text auf grauem Hintergrund hält keiner Prüfung stand:

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

Schritt 3: prüfen, ob v3 weiterhin läuft

Das Ausblenden des Badges sollte die Token-Generierung nicht beeinträchtigen, aber bestätigen Sie es, statt darauf zu hoffen. Öffnen Sie die Konsole auf Ihrer Seite und fordern Sie einen Token von Hand an:

// 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) + "...");
        });
});

Sie erhalten einen Token zurück, und Ihr CSS hat nichts kaputtgemacht. Wenn es wirft grecaptcha is not defined, wurde das reCAPTCHA-Skript von vornherein nie geladen und das Badge hatte nichts damit zu tun. Sie können es mit einem als funktionierend bekannten Setup vergleichen auf unserer Live-reCAPTCHA-v3-Demoseite.

Eine Einschränkung, die Sie kennen sollten: Ein Token beweist, dass das Skript ausgeführt wurde, nicht, dass Ihr Score gesund ist. Das Ausblenden des Badges hat keinen Einfluss auf das Scoring, aber viele andere Dinge schon. Niedrige Scores sind ein separates Problem mit einer separaten Lösung.

Was man nicht tun sollte

Ansatz	Warum es fehlschlägt
display: none	Entfernt das Element aus dem Layout. Hat inkonsistentes Verhalten bei verschiedenen Kombinationen aus Browser und Skript-Laden verursacht.
opacity: 0 ohne Namensnennung	Trotzdem ein Verstoß gegen die Bedingungen. Invisible ist unsichtbar, über welche Property Sie auch dorthin gelangt sind.
Den Knoten mit JavaScript löschen	Das Skript kann es erneut einfügen, und Sie haben umsonst eine Race Condition geschaffen.
Attribution nur in der Datenschutzrichtlinie	Google verlangt es sichtbar im Nutzerablauf, nicht eine Seite entfernt versteckt.
z-index: -1	Schiebt das Badge unvorhersehbar hinter andere Elemente. Auf Seiten ohne Hintergrund kann es trotzdem sichtbar sein.

Häufig gestellte Fragen

Senkt das Ausblenden des Badges meinen reCAPTCHA-v3-Score?

Nein. Der Score ergibt sich aus dem Nutzerverhalten und Browsersignalen, nicht daraus, ob das Badge auf dem Bildschirm zu sehen ist. Es auszublenden ändert nichts daran, wie eine Anfrage bewertet wird.

Kann ich das Badge verschieben, statt es auszublenden?

Ja, und es ist die sicherere Option, wenn die Platzierung Ihr einziges Ärgernis ist. Setzen Sie data-badge="bottomleft" oder data-badge="inline" auf Ihrem reCAPTCHA-Element. Mit inline positionieren Sie den Container selbst, und da das Badge sichtbar bleibt, benötigen Sie den Attributionstext nicht.

Gilt das für reCAPTCHA v2?

Nur bei Invisible v2. Das v2-Kontrollkästchen-Widget ist seine eigene Offenlegung, es gibt also kein separates Badge zu berücksichtigen. Invisible v2 zeigt dasselbe schwebende Badge wie v3 und folgt denselben Regeln. Unser Leitfaden zu was reCAPTCHA ist und wie es funktioniert behandelt die Unterschiede zwischen den Versionen.

Wird Google dies tatsächlich durchsetzen?

Site Keys können bei Verstößen gegen die Nutzungsbedingungen deaktiviert werden. Bei Websites mit wenig Traffic ist das selten, aber das Attribution-Snippet ist in einer halben Minute hinzugefügt, es gibt also keinen wirklichen Grund, das Risiko einzugehen.

Zusammenfassung

Verbergen Sie das Badge mit visibility: hidden !important, fügen Sie den Attributions-Absatz mit beiden Google-Links unter Ihrem Absende-Button hinzu und bestätigen Sie dann in der Konsole, dass die Token-Generierung weiterhin funktioniert. Das ist der gesamte konforme Weg, und er dauert etwa fünf Minuten.

Wenn Sie’mit reCAPTCHA v3 im Code arbeiten und es nicht nur stylen, ist CapSkip ein lokaler Captcha-Löser der auf Ihrem eigenen Rechner läuft und Tokens über die API zurückgibt, die Sie bereits verwenden. Unser reCAPTCHA-v3-Löser Seite enthält die Integrationsdetails.