{"id":83532,"date":"2025-04-17T02:40:46","date_gmt":"2025-04-17T01:40:46","guid":{"rendered":"http:\/\/3.238.148.255\/?p=83532"},"modified":"2025-04-17T22:42:50","modified_gmt":"2025-04-17T21:42:50","slug":"hoe-de-google-recaptcha-badge-onzichtbaar-te-maken-op-de-website","status":"publish","type":"post","link":"https:\/\/blog.juandesouza.com\/nl\/tech\/hoe-de-google-recaptcha-badge-onzichtbaar-te-maken-op-de-website\/","title":{"rendered":"Hoe maak ik de Google reCAPTCHA-badge onzichtbaar op de website?"},"content":{"rendered":"<p>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.<\/p>\n<p>Jarenlang bood Google <strong>reCAPTCHA v2 (tweede versie)<\/strong>, 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 \u00e9\u00e9n sessie. Om dit aan te pakken, introduceerde Google <strong>reCAPTCHA v3 (derde versie)<\/strong>, 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.<\/p><div id=\"juand-1752218985\" class=\"juand-content juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<div style=\"width: 100%;\"><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/tbvxFW4UJdU\" width=\"100%\" height=\"500\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p>Voordat u de badge verbergt, is het cruciaal om de wettelijke vereisten van Google te begrijpen. Volgens de <a href=\"https:\/\/developers.google.com\/recaptcha\/docs\/faq#id-like-to-hide-the-recaptcha-badge-what-is-allowed\" target=\"_blank\" rel=\"noopener noreferrer\">reCAPTCHA Veelgestelde vragen<\/a>U 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.<\/p>\n<p>Google raadt aan de volgende mededeling aan uw voettekst toe te voegen:<\/p>\n<pre><code>Deze site wordt beschermd door reCAPTCHA en Google <a href=\"https:\/\/policies.google.com\/privacy\">Privacybeleid<\/a> En <a href=\"https:\/\/policies.google.com\/terms\">Servicevoorwaarden<\/a> toepassen.<\/code><\/pre>\n<p>Zodra je deze attributie hebt toegevoegd, is het verbergen van de badge eenvoudig. Voeg deze ene regel CSS toe aan je stylesheet:<\/p>\n<pre><code>.grecaptcha-badge { zichtbaarheid: verborgen; }<\/code><\/pre>\n<p>Als u dat liever heeft, kunt u het rechtstreeks in uw <code>&lt;head&gt;<\/code> sectie:<\/p><div id=\"juand-2226715881\" class=\"juand-content_2 juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<pre><code>.grecaptcha-badge { visibility: hidden; }<\/code><\/pre>\n<p>Op WordPress is de makkelijkste manier om naar <em>Uiterlijk \u2192 Aanpassen \u2192 Extra CSS<\/em> 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.<\/p>\n<p><strong>Belangrijk:<\/strong> Niet gebruiken <code>weergave: geen;<\/code> 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. <code>zichtbaarheid: verborgen;<\/code> zorgt ervoor dat de badge aanwezig blijft in de markering, maar niet zichtbaar is.<\/p>\n<h2>Voordelen van het verbergen van de badge<\/h2>\n<p>Je vraagt je misschien af waarom je de badge \u00fcberhaupt zou willen verbergen. Hier zijn de belangrijkste voordelen:<\/p>\n<ul>\n<li><strong>Strakkere beelden<\/strong>:De badge kan belangrijke gebruikersinterface-elementen overlappen of er niet op hun plaats uitzien, vooral op mobiele schermen.<\/li>\n<li><strong>Verbeterde UX<\/strong>: Omdat reCAPTCHA v3 onzichtbaar is, hebben eindgebruikers geen last van extra klikken of puzzels.<\/li>\n<li><strong>Consistente branding<\/strong>Door UI-elementen van derden te verwijderen, behoudt u een helder en samenhangend ontwerp.<\/li>\n<\/ul>\n<h2>Probleemoplossing en beste praktijken<\/h2>\n<ul>\n<li>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.<\/li>\n<li>Gebruik de ontwikkelaarstools van uw browser om de <code>.grecaptcha-badge<\/code> element en bevestig dat er geen ander stijlblad uw regel overschrijft.<\/li>\n<li>Controleer nogmaals of de toeschrijvingstekst in de voettekst duidelijk zichtbaar is en overeenkomt met de door Google aanbevolen formulering.<\/li>\n<li>Controleer regelmatig de documentatie van Google voor het geval het beleid ten aanzien van de zichtbaarheid van badges verandert.<\/li>\n<\/ul>\n<h2>Toegankelijkheidsoverwegingen<\/h2>\n<p>Zorg ervoor dat uw site toegankelijk blijft, ook al is de badge onzichtbaar:<\/p>\n<ul>\n<li>Gebruik semantische HTML voor de toeschrijving in uw voettekst, zodat schermlezers deze correct kunnen aankondigen.<\/li>\n<li>Zorg ervoor dat het verbergen van de badge de focusvolgorde of navigatie niet verstoort.<\/li>\n<\/ul>\n<p>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!<\/p><div id=\"juand-1662071501\" class=\"juand-content_3 juand-entity-placement\"><script async src=\"https:\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js?client=ca-pub-8944986240478060\"\r\n     crossorigin=\"anonymous\"><\/script>\r\n<ins class=\"adsbygoogle\"\r\n style=\"display:block; text-align:center;\"\r\n data-ad-layout=\"in-article\"\r\n data-ad-format=\"fluid\"\r\n data-ad-client=\"ca-pub-8944986240478060\"\r\n data-ad-slot=\"9601515663\"><\/ins>\r\n<script>\r\n     (adsbygoogle = window.adsbygoogle || []).push({});\r\n<\/script>\r\n<br\/><\/div>\n<p>Foto door <a href=\"https:\/\/www.pexels.com\/photo\/macbook-air-on-grey-wooden-table-67112\/\" target=\"_blank\" rel=\"noopener\">Caio<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>Google reCAPTCHA is nu een van de meest gebruikte beveiligingsmaatregelen op het web. In de nieuwste versie toont Google echter slechts een kleine badge in de rechterbenedenhoek van uw site. Hoewel deze badge zijn juridische doel dient, is het niet altijd de meest elegante ontwerpkeuze. In dit artikel laat ik u zien hoe u de reCAPTCHA-badge van uw site verwijdert, met name als u WordPress gebruikt, en tegelijkertijd volledig voldoet aan de vereisten van Google.<\/p>","protected":false},"author":1,"featured_media":97892,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1289,1290],"tags":[],"class_list":["post-83532","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tech","category-tutorials"],"aioseo_notices":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/blog.juandesouza.com\/wp-content\/uploads\/2020\/04\/pexels-caio-67112-scaled.jpg?fit=2560%2C1702&ssl=1","jetpack_shortlink":"https:\/\/wp.me\/p8STS8-lJi","jetpack_sharing_enabled":true,"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/posts\/83532","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/comments?post=83532"}],"version-history":[{"count":3,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/posts\/83532\/revisions"}],"predecessor-version":[{"id":97894,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/posts\/83532\/revisions\/97894"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/media\/97892"}],"wp:attachment":[{"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/media?parent=83532"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/categories?post=83532"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.juandesouza.com\/nl\/wp-json\/wp\/v2\/tags?post=83532"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}