Google reCAPTCHA ist zum Schutz von Websites vor Spam und automatisiertem Missbrauch nahezu allgegenwärtig. In der neuesten Version, reCAPTCHA v3, zeigt Google nur ein kleines Badge (Badge) in der unteren rechten Ecke der Seite an. Dieses Badge erfüllt zwar die Anforderungen zur Namensnennung, kann aber mit dem Design Ihrer Website kollidieren oder Nutzer ablenken. In diesem Artikel erkläre ich, wie Sie dieses Badge von Ihrer Website entfernen können – insbesondere wenn Sie WordPress verwenden – ohne gegen die Nutzungsbedingungen von Google zu verstoßen.
Viele Jahre lang bot Google reCAPTCHA v2 (zweite Version), bei dem Nutzer Bildrätsel lösen oder ein Kontrollkästchen anklicken mussten, um ihre Identität als Mensch zu beweisen. Obwohl dies effektiv war, erschwerte es die Benutzererfahrung und erforderte manchmal mehrere Aufgaben in einer einzigen Sitzung. Um dieses Problem zu lösen, führte Google ein reCAPTCHA v3 (dritte Version), das vollständig im Hintergrund läuft und jeder Anfrage einen Risikowert zuweist. Das einzige sichtbare Element ist ein kleines Badge, das auf die Datenschutzbestimmungen und Nutzungsbedingungen von Google verweist.
Bevor Sie das Badge verstecken, ist es wichtig, die rechtlichen Anforderungen von Google zu verstehen. Laut der reCAPTCHA FAQSie können das Badge verbergen, solange Sie an anderer Stelle im Benutzerfluss – normalerweise in der Fußzeile Ihrer Website – einen sichtbaren Hinweis einfügen. So werden Nutzer weiterhin darüber informiert, dass Ihre Website durch die Anti-Bot-Technologie von Google geschützt ist.
Google empfiehlt, Ihrer Fußzeile den folgenden Hinweis hinzuzufügen:
Diese Website ist durch reCAPTCHA und die Google Datenschutzrichtlinie Und Servicebedingungen anwenden.Sobald Sie diese Zuordnung hinzugefügt haben, ist das Ausblenden des Badges ganz einfach. Fügen Sie Ihrem Stylesheet diese einzelne CSS-Zeile hinzu:
.grecaptcha-badge { Sichtbarkeit: versteckt; }Wenn Sie möchten, können Sie es direkt in Ihr <head> Abschnitt:
.grecaptcha-badge { visibility: hidden; }Bei WordPress ist der einfachste Weg, zu gehen Darstellung → Anpassen → Zusätzliches CSS und fügen Sie den Snippet dort ein. Bei diesem Ansatz bleibt das Badge im Dokumentfluss, sodass reCAPTCHA-Skripte korrekt ausgeführt werden können, und ist für Benutzer gleichzeitig unsichtbar.
Wichtig: Nicht verwenden Anzeige: keine; auf dem Badge. Das vollständige Entfernen aus dem DOM kann dazu führen, dass das reCAPTCHA-Skript nicht mehr ordnungsgemäß geladen wird oder Risikobewertungen nicht mehr korrekt meldet. Dadurch wird der Spam-Schutz deaktiviert und Ihre Formulare werden Bots ausgesetzt. Verwenden Sie Sichtbarkeit: versteckt; stellt sicher, dass das Badge im Markup vorhanden bleibt, ohne sichtbar zu sein.
Vorteile des Ausblendens des Abzeichens
Sie fragen sich vielleicht, warum Sie das Abzeichen überhaupt verbergen möchten. Hier sind die wichtigsten Vorteile:
- Schlankere Grafik: Das Badge kann wichtige UI-Elemente überlappen oder fehl am Platz wirken, insbesondere auf mobilen Bildschirmen.
- Verbesserte UX: Da reCAPTCHA v3 unsichtbar ausgeführt wird, müssen Endbenutzer weder zusätzliche Klicks durchführen noch Rätsel lösen.
- Einheitliches Branding: Durch das Entfernen von UI-Elementen von Drittanbietern wird ein klares, einheitliches Design beibehalten.
Fehlerbehebung und bewährte Methoden
- Wenn das Badge weiterhin angezeigt wird, leeren Sie den Browser-Cache und den gesamten CDN-Cache, um sicherzustellen, dass Ihr neues CSS angewendet wird.
- Verwenden Sie die Entwicklertools Ihres Browsers, um die
.grecaptcha-AbzeichenElement und vergewissern Sie sich, dass kein anderes Stylesheet Ihre Regel überschreibt. - Überprüfen Sie noch einmal, ob der Text Ihrer Fußzeilenzuordnung deutlich sichtbar ist und dem von Google empfohlenen Wortlaut entspricht.
- Überwachen Sie die Dokumentation von Google regelmäßig, um zu erfahren, ob sich die Richtlinien zur Sichtbarkeit von Badges ändern.
Überlegungen zur Barrierefreiheit
Auch wenn das Badge unsichtbar ist, stellen Sie sicher, dass Ihre Site zugänglich bleibt:
- Verwenden Sie semantisches HTML für Ihre Fußzeilenzuordnung, damit Bildschirmleseprogramme sie richtig ansagen können.
- Stellen Sie sicher, dass das Ausblenden des Badges die Fokusreihenfolge oder Navigation nicht beeinträchtigt.
Mit diesen einfachen Schritten können Sie reCAPTCHA v3 ohne Badges integrieren und gleichzeitig den leistungsstarken Spam-Schutz im Hintergrund nutzen. Diese Lösung sorgt für eine übersichtliche Benutzeroberfläche, verbessert die Benutzerfreundlichkeit und erfüllt die gesetzlichen Anforderungen von Google. Bei Problemen oder Fragen hinterlassen Sie gerne unten einen Kommentar. Viel Spaß beim Programmieren!
Foto von Caio
