Cara Menyembunyikan Badge reCAPTCHA v3 Tanpa Merusaknya

Anda boleh menyembunyikan badge reCAPTCHA. Google mengizinkannya. Tetapi ada syarat yang dilewatkan sebagian besar tutorial: Anda harus menggantinya dengan teks atribusi yang terlihat, atau Anda melanggar Ketentuan Layanan reCAPTCHA. Panduan ini membahas CSS yang berfungsi, kata-kata persis yang diminta Google, dan cara memastikan v3 masih menilai trafik Anda setelahnya.

Mengapa badge itu bisa muncul

reCAPTCHA v3 tidak memiliki kotak centang dan tidak ada teka-teki gambar. Ia menilai pengunjung secara diam-diam di latar belakang. Badge mengambang di sudut kanan bawah itu adalah satu-satunya tanda bahwa situs Anda menjalankannya, dan memang itulah maksudnya. Badge adalah cara Google mengungkapkan pengumpulan data kepada pengguna Anda.

Periksa elemennya dan Anda akan menemukan wrapper yang membawa gaya inline seperti ini:

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

Itu right: -186px membingungkan orang lebih dari hal lain apa pun soal badge, dan itu bukan bug. Badge-nya selebar 256px, dan Google menyimpan 186px di antaranya di luar layar sehingga hanya ubin logonya yang mengintip keluar. Arahkan kursor ke sana dan sebuah transisi akan menggesernya kembali ke right: 0 untuk menampilkan panel lengkap.

Detail pentingnya adalah bahwa ini adalah inline gaya. Sebuah right: -256px aturan di stylesheet Anda kalah dalam pertarungan spesifisitas, itulah sebabnya begitu banyak upaya memindahkan badge secara diam-diam tidak berpengaruh apa pun.

Apa yang sebenarnya dikatakan ketentuan Google

FAQ reCAPTCHA Google mengizinkan penyembunyian badge dengan satu syarat:

Anda diperbolehkan menyembunyikan badge selama Anda menampilkan atribusi reCAPTCHA secara terlihat dalam alur pengguna.

Dalam praktiknya: jika badge disembunyikan, atribusi harus terlihat di setiap halaman atau formulir tempat reCAPTCHA berjalan. Bukan diselipkan di kebijakan privasi Anda. Bukan di dalam akordeon footer yang terlipat. Terlihat, di dalam alurnya, di tempat pengguna sebenarnya berada.

Situs yang menyembunyikan badge tanpa atribusi berisiko site key-nya dinonaktifkan. Itu adalah mekanisme penegakan yang nyata, bukan sekadar teori, jadi hal itu layak mendapat tiga puluh detik waktu Anda.

Langkah 1: sembunyikan badge dengan CSS

Gunakan visibility: hidden, bukan display: none. Mengatur display: none menghapus elemen sepenuhnya dari pohon tata letak, dan hal itu pernah menyebabkan skrip reCAPTCHA berperilaku salah pada kombinasi browser dan pemuatan skrip tertentu. Visibility menjaga kotak tetap dapat diukur sekaligus membuatnya tidak terlihat.

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

Jika Anda hanya ingin menghilangkannya pada halaman tertentu, batasi cakupannya alih-alih menerapkannya secara global:

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

Langkah 2: tambahkan atribusi

Letakkan ini tepat di bawah tombol kirim pada setiap formulir yang memakai reCAPTCHA. Kedua tautan wajib ada. Teks biasa tanpa keduanya tidak memenuhi syarat.

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

Teks kecil boleh saja, tetapi jaga agar tetap terbaca. Syaratnya adalah terlihat, dan teks abu-abu 8px di atas latar abu-abu tidak akan lolos jika ada yang memeriksa:

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

Langkah 3: pastikan v3 masih berjalan

Menyembunyikan badge seharusnya tidak memengaruhi pembuatan token, tetapi pastikan alih-alih sekadar berharap. Buka konsol di halaman Anda dan minta token secara manual:

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

Jika token kembali, berarti CSS Anda tidak merusak apa pun. Jika ia melempar grecaptcha is not defined, skrip reCAPTCHA memang tidak pernah dimuat sejak awal dan badge tidak ada hubungannya dengan itu. Anda dapat membandingkannya dengan penyiapan yang diketahui baik di halaman demo reCAPTCHA v3 langsung.

Satu catatan yang perlu diketahui: token membuktikan bahwa skripnya berjalan, bukan bahwa skor Anda sehat. Menyembunyikan badge tidak berpengaruh pada penilaian, tetapi banyak hal lain berpengaruh. Skor rendah adalah masalah tersendiri dengan perbaikan tersendiri.

Apa yang tidak boleh dilakukan

Pendekatan	Mengapa gagal
display: none	Menghapus elemen dari layout. Pernah menyebabkan perilaku yang tidak konsisten pada berbagai kombinasi browser dan pemuatan skrip.
opacity: 0 tanpa atribusi	Tetap saja pelanggaran ketentuan. Invisible tetaplah tak terlihat, dari properti mana pun Anda sampai ke sana.
Menghapus node dengan JavaScript	Skripnya bisa menyuntikkan ulang, dan Anda menambahkan race condition tanpa guna.
Atribusi hanya di kebijakan privasi	Google memintanya secara terlihat dalam alur pengguna, bukan terkubur di halaman lain.
z-index: -1	Mendorong badge ke belakang elemen lain secara tak terduga. Pada halaman tanpa latar belakang, badge itu tetap bisa terlihat.

Pertanyaan yang sering diajukan

Apakah menyembunyikan badge menurunkan skor reCAPTCHA v3 saya?

Tidak. Skor berasal dari perilaku pengguna dan sinyal browser, bukan dari apakah badge tampil di layar. Menyembunyikannya sama sekali tidak mengubah cara sebuah permintaan dinilai.

Bisakah saya memindahkan badge alih-alih menyembunyikannya?

Ya, dan itu opsi yang lebih aman jika keluhan Anda hanya soal penempatan. Setel data-badge="bottomleft" atau data-badge="inline" pada elemen reCAPTCHA Anda. Dengan inline Anda memosisikan container-nya sendiri, dan karena badge tetap terlihat Anda tidak memerlukan teks atribusi.

Apakah ini berlaku untuk reCAPTCHA v2?

Hanya untuk invisible v2. Widget kotak centang v2 sudah merupakan pengungkapannya sendiri, jadi tidak ada badge terpisah yang perlu diurus. Invisible v2 menampilkan badge mengambang yang sama seperti v3 dan mengikuti aturan yang sama. Panduan kami tentang apa itu reCAPTCHA dan cara kerjanya membahas perbedaan antar versi.

Apakah Google benar-benar akan menegakkannya?

Site key dapat dinonaktifkan karena pelanggaran ketentuan. Hal ini jarang terjadi pada situs bertrafik rendah, tetapi menambahkan cuplikan atribusi hanya butuh setengah menit, jadi tidak ada alasan nyata untuk menanggung risikonya.

Ringkasan

Sembunyikan badge dengan visibility: hidden !important, tambahkan paragraf atribusi dengan kedua tautan Google di bawah tombol kirim Anda, lalu pastikan pembuatan token masih berfungsi di konsol. Itulah keseluruhan jalur yang patuh, dan hanya butuh sekitar lima menit.

Jika Anda bekerja dengan reCAPTCHA v3 di dalam kode dan bukan sekadar menatanya, CapSkip adalah pemecah captcha lokal yang berjalan di komputer Anda sendiri dan mengembalikan token melalui API yang sudah Anda pakai. Lihat pemecah reCAPTCHA v3 halaman memuat detail integrasinya.