Google reCAPTCHA is bijna alomtegenwoordig geworden voor het beschermen van websites tegen spam en geautomatiseerd misbruik. In de nieuwste versie, reCAPTCHA v3, toont Google slechts een kleine badge (badge) rechtsonder op de pagina. Hoewel deze badge voldoet aan de toeschrijvingsvereisten, kan deze botsen met het ontwerp van uw site of gebruikers afleiden. In dit artikel leg ik uit hoe u deze badge van uw site kunt verwijderen, met name als u WordPress gebruikt, zonder de servicevoorwaarden van Google te schenden.
Jarenlang bood Google reCAPTCHA v2 (tweede versie), waarbij gebruikers puzzels op basis van afbeeldingen moesten oplossen of een selectievakje moesten aanvinken om te bewijzen dat ze een mens waren. Hoewel effectief, zorgde het voor extra wrijving in de gebruikerservaring en vereiste het soms meerdere opdrachten in één sessie. Om dit aan te pakken, introduceerde Google reCAPTCHA v3 (derde versie), die volledig op de achtergrond draait en aan elk verzoek een risicoscore toekent. Het enige zichtbare element is een kleine badge met een link naar het privacybeleid en de servicevoorwaarden van Google.
Voordat u de badge verbergt, is het cruciaal om de wettelijke vereisten van Google te begrijpen. Volgens de reCAPTCHA Veelgestelde vragenU kunt de badge verbergen, zolang u elders in de gebruikersstroom een zichtbare toeschrijving opneemt, meestal in de voettekst van uw site. Zo blijven gebruikers ervan op de hoogte dat uw site wordt beschermd door de antibottechnologie van Google.
Google raadt aan de volgende mededeling aan uw voettekst toe te voegen:
Deze site wordt beschermd door reCAPTCHA en Google Privacybeleid En Servicevoorwaarden toepassen.Zodra je deze attributie hebt toegevoegd, is het verbergen van de badge eenvoudig. Voeg deze ene regel CSS toe aan je stylesheet:
.grecaptcha-badge { zichtbaarheid: verborgen; }Als u dat liever heeft, kunt u het rechtstreeks in uw <head> sectie:
.grecaptcha-badge { visibility: hidden; }Op WordPress is de makkelijkste manier om naar Uiterlijk → Aanpassen → Extra CSS en plak het fragment daar. Deze aanpak zorgt ervoor dat de badge in de documentstroom blijft, waardoor reCAPTCHA-scripts correct kunnen worden uitgevoerd, maar is tegelijkertijd onzichtbaar voor gebruikers.
Belangrijk: Niet gebruiken weergave: geen; op de badge. Het volledig verwijderen uit de DOM kan ervoor zorgen dat het reCAPTCHA-script niet goed laadt of risicoscores rapporteert, waardoor spambeveiliging wordt uitgeschakeld en uw formulieren worden blootgesteld aan bots. zichtbaarheid: verborgen; zorgt ervoor dat de badge aanwezig blijft in de markering, maar niet zichtbaar is.
Voordelen van het verbergen van de badge
Je vraagt je misschien af waarom je de badge überhaupt zou willen verbergen. Hier zijn de belangrijkste voordelen:
- Strakkere beelden:De badge kan belangrijke gebruikersinterface-elementen overlappen of er niet op hun plaats uitzien, vooral op mobiele schermen.
- Verbeterde UX: Omdat reCAPTCHA v3 onzichtbaar is, hebben eindgebruikers geen last van extra klikken of puzzels.
- Consistente brandingDoor UI-elementen van derden te verwijderen, behoudt u een helder en samenhangend ontwerp.
Probleemoplossing en beste praktijken
- Als de badge nog steeds wordt weergegeven, wist u de cache van uw browser en eventuele CDN-cache om ervoor te zorgen dat de nieuwe CSS wordt toegepast.
- Gebruik de ontwikkelaarstools van uw browser om de
.grecaptcha-badgeelement en bevestig dat er geen ander stijlblad uw regel overschrijft. - Controleer nogmaals of de toeschrijvingstekst in de voettekst duidelijk zichtbaar is en overeenkomt met de door Google aanbevolen formulering.
- Controleer regelmatig de documentatie van Google voor het geval het beleid ten aanzien van de zichtbaarheid van badges verandert.
Toegankelijkheidsoverwegingen
Zorg ervoor dat uw site toegankelijk blijft, ook al is de badge onzichtbaar:
- Gebruik semantische HTML voor de toeschrijving in uw voettekst, zodat schermlezers deze correct kunnen aankondigen.
- Zorg ervoor dat het verbergen van de badge de focusvolgorde of navigatie niet verstoort.
Door deze eenvoudige stappen te volgen, kunt u een badgevrije integratie van reCAPTCHA v3 behouden, terwijl u de krachtige spambeveiliging achter de schermen behoudt. Deze oplossing houdt uw interface overzichtelijk, verbetert de bruikbaarheid en voldoet aan de wettelijke vereisten van Google. Als u problemen ondervindt of vragen heeft, kunt u hieronder een reactie achterlaten. Veel plezier met programmeren!
Foto door Caio
