Google reCAPTCHA se ha vuelto casi omnipresente para proteger sitios web contra spam y abuso automatizado. En su última versión, reCAPTCHA v3, Google solo muestra una pequeña insignia en la esquina inferior derecha de la página. Si bien esta insignia cumple con los requisitos de atribución, puede desentonar con el diseño de tu sitio o distraer a los usuarios. En este artículo, te explicaré cómo eliminar esta insignia de tu sitio, especialmente si usas WordPress, sin infringir las condiciones de servicio de Google.
Durante muchos años, Google ofreció reCAPTCHA v2 (segunda versión), que invitaba a los usuarios a resolver rompecabezas basados en imágenes o a marcar una casilla para demostrar que eran humanos. Si bien era efectivo, añadía fricción a la experiencia del usuario y, en ocasiones, requería varios desafíos en una sola sesión. Para solucionar esto, Google introdujo reCAPTCHA v3 (tercera versión), que se ejecuta completamente en segundo plano y asigna una puntuación de riesgo a cada solicitud. El único elemento visible es una pequeña insignia que enlaza con la política de privacidad y las condiciones de servicio de Google.
Antes de ocultar la insignia, es fundamental comprender los requisitos legales de Google. Según... Preguntas frecuentes sobre reCAPTCHAPuedes ocultar la insignia siempre que incluyas una atribución visible en otra parte del flujo de usuario, normalmente en el pie de página de tu sitio. Esto garantiza que los usuarios sigan sabiendo que tu sitio está protegido por la tecnología antibots de Google.
Google recomienda agregar el siguiente aviso al pie de página:
Este sitio está protegido por reCAPTCHA y se aplican las políticas de privacidad de Google. Política de Privacidad y Condiciones de servicio aplicar.Una vez agregada esta atribución, ocultar la insignia es muy sencillo. Agregue esta línea de CSS a su hoja de estilos:
.grecaptcha-badge { visibilidad: oculta; }Si lo prefieres puedes insertarlo directamente en tu <head> sección:
.grecaptcha-badge { visibility: hidden; }En WordPress, la forma más fácil es ir a Apariencia → Personalizar → CSS adicional Y pegue el fragmento ahí. Este enfoque mantiene la insignia en el flujo del documento, lo que permite que los scripts reCAPTCHA se ejecuten correctamente, pero la hace invisible para los usuarios.
Importante: No utilizar pantalla: ninguna; en la insignia. Eliminarla por completo del DOM puede impedir que el script reCAPTCHA se cargue o informe correctamente las puntuaciones de riesgo, lo que desactiva la protección contra spam y expone los formularios a bots. visibilidad: oculta; garantiza que la insignia permanezca presente en el marcado sin ser visible.
Beneficios de ocultar la insignia
Quizás te preguntes por qué querrías ocultar la insignia. Estas son las principales ventajas:
- Imágenes más elegantes:La insignia puede superponerse a elementos importantes de la interfaz de usuario o verse fuera de lugar, especialmente en las pantallas de los dispositivos móviles.
- Experiencia de usuario mejorada:Con reCAPTCHA v3 ejecutándose de forma invisible, los usuarios finales no tendrán que hacer clic ni resolver problemas adicionales.
- Marca consistente:Eliminar elementos de la interfaz de usuario de terceros ayuda a mantener un diseño limpio y cohesivo.
Solución de problemas y mejores prácticas
- Si la insignia aún aparece, borre el caché de su navegador y cualquier caché de CDN para asegurarse de que se aplique su nuevo CSS.
- Utilice las herramientas de desarrollo de su navegador para inspeccionar el
Insignia .grecaptchaelemento y confirme que ninguna otra hoja de estilo esté anulando su regla. - Verifique nuevamente que el texto de atribución del pie de página sea claramente visible y coincida con la redacción recomendada por Google.
- Supervise periódicamente la documentación de Google en caso de que cambie su política con respecto a la visibilidad de las insignias.
Consideraciones de accesibilidad
Aunque la insignia sea invisible, asegúrese de que su sitio permanezca accesible:
- Utilice HTML semántico para la atribución de su pie de página para que los lectores de pantalla puedan anunciarlo correctamente.
- Asegúrese de que ocultar la insignia no interfiera con el orden de enfoque ni con la navegación.
Siguiendo estos sencillos pasos, puede mantener una integración sin insignias de reCAPTCHA v3, a la vez que conserva su potente protección contra spam en segundo plano. Esta solución mantiene su interfaz limpia, mejora la usabilidad y cumple con los requisitos legales de Google. Si tiene algún problema o pregunta, no dude en dejar un comentario a continuación. ¡Que disfrute programando!
Foto de Caio
