reCAPTCHA v3 Rozeti Bozmadan Nasıl Gizlenir

reCAPTCHA rozetini gizleyebilirsiniz. Google buna izin verir. Ancak çoğu eğitimin atladığı bir püf noktası var: onu görünür bir atıf metniyle değiştirmeniz gerekir, aksi halde reCAPTCHA Hizmet Şartları'nı ihlal etmiş olursunuz. Bu kılavuz, işe yarayan CSS'i, Google'ın istediği tam ifadeyi ve sonrasında v3'ün trafiğinizi hâlâ skorladığını nasıl doğrulayacağınızı ele alır.

Rozetin neden hiç göründüğü

reCAPTCHA v3'te checkbox ve görüntü bulmacası yoktur. Ziyaretçileri arka planda sessizce puanlar. Sağ alt köşedeki o yüzen rozet, sitenizin onu çalıştırdığının tek işaretidir ve mesele de budur. Rozet, Google'ın veri toplama işlemini kullanıcılarınıza açıkladığı yöntemdir.

İnceleyin, bunun gibi satır içi stiller taşıyan bir sarmalayıcı (wrapper) bulacaksınız:

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

Bu right: -186px rozetle ilgili her şeyden çok insanların kafasını karıştırır ve bu bir hata değildir. Rozet 256px genişliğindedir ve Google bunun 186px'ini ekran dışına park eder, böylece yalnızca logo karesi görünür. Üzerine gelin ve bir geçiş onu geri kaydırır right: 0 tam paneli göstermek için.

Önemli ayrıntı, bunların şöyle olmasıdır: satır içi stiller. Sade bir right: -256px stil sayfanızdaki kural, özgüllük (specificity) savaşını kaybeder; bu yüzden rozeti sessizce taşımaya yönelik pek çok girişim hiçbir işe yaramaz.

Google’ın koşulları aslında ne diyor

Google'ın reCAPTCHA SSS'si, rozeti gizlemeye tek bir koşulla izin verir:

reCAPTCHA markalamasını kullanıcı akışında görünür şekilde eklediğiniz sürece rozeti gizlemenize izin verilir.

Pratikte: rozet gizliyse, atıf reCAPTCHA'nın çalıştığı her sayfada veya formda görünür olmalıdır. Gizlilik politikanıza sıkıştırılmış değil. Katlanmış bir alt bilgi akordeonunun içinde değil. Görünür, akışın içinde, kullanıcının gerçekten bulunduğu yerde.

Rozeti atıf olmadan gizleyen siteler, site anahtarlarının devre dışı bırakılması riskini taşır. Bu teorik değil, gerçek bir yaptırım mekanizmasıdır; dolayısıyla otuz saniyenizi ayırmaya değer.

Adım 1: rozeti CSS ile gizleyin

Kullan visibility: hidden, değil display: none. Ayarlama display: none öğeyi yerleşim ağacından tamamen çıkarır ve bu, reCAPTCHA betiğinin belirli tarayıcı ve betik yükleme kombinasyonlarında hatalı davranmasına neden olmuştur. Visibility ise kutuyu görünmez kılarken ölçülebilir tutar.

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

Yalnızca belirli sayfalarda gitmesini istiyorsanız, global gitmek yerine kapsamlandırın:

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

Adım 2: atıf ekleyin

Bunu, reCAPTCHA kullanan her formda gönder düğmesinin hemen altına yerleştirin. Her iki bağlantı da gereklidir. Bunlar olmadan düz metin koşulu karşılamaz.

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

Küçük punto sorun değil, ama okunabilir tutun. Gereklilik, görünür olmasıdır ve gri bir arka plandaki 8px gri metin, biri bakarsa geçerli olmaz:

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

Adım 3: v3'ün hâlâ çalıştığını kontrol edin

Rozeti gizlemek token oluşturmayı etkilememeli, ancak ummak yerine bunu doğrulayın. Sayfanızda konsolu açın ve elle bir token isteyin:

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

Bir token geri alın ve CSS'iniz hiçbir şeyi bozmamış olsun. Hata verirse grecaptcha is not defined, reCAPTCHA script'i en baştan hiç yüklenmedi ve rozetin bununla hiçbir ilgisi yoktu. Bilinen sağlam bir kurulumla, bizim canlı reCAPTCHA v3 demo sayfası.

Bilinmeye değer bir uyarı: bir token, betiğin çalıştığını kanıtlar, skorunuzun sağlıklı olduğunu değil. Rozeti gizlemenin skorlamayla ilgisi yoktur, ama pek çok başka şeyin vardır. Düşük skorlar, ayrı bir çözümü olan ayrı bir sorundur.

Yapılmaması gerekenler

Yaklaşım	Neden başarısız olur
display: none	Öğeyi düzenden kaldırır. Tarayıcı ve script yükleme kombinasyonlarında tutarsız davranışa neden olmuştur.
opacity: 0 atıf olmadan	Yine de bir şart ihlali. Invisible görünmezdir, sizi oraya hangi özellik getirmiş olursa olsun.
Düğümü JavaScript ile silme	Script onu yeniden enjekte edebilir ve boşuna bir yarış durumu (race condition) eklemiş olursunuz.
Atıf yalnızca gizlilik politikasında	Google bunu, bir sayfa uzağa gömülü değil, kullanıcı akışında görünür şekilde ister.
z-index: -1	Rozeti öngörülemez bir şekilde diğer öğelerin arkasına iter. Arka planı olmayan sayfalarda yine de görünebilir.

Sık sorulan sorular

Rozeti gizlemek reCAPTCHA v3 skorumu düşürür mü?

Hayır. Skor, rozetin ekranda olup olmamasından değil, kullanıcı davranışından ve tarayıcı sinyallerinden gelir. Onu gizlemek bir isteğin nasıl değerlendirildiğine dair hiçbir şeyi değiştirmez.

Rozeti gizlemek yerine taşıyabilir miyim?

Evet ve tek şikâyetiniz yerleşimse daha güvenli seçenektir. Şunu ayarlayın: data-badge="bottomleft" veya data-badge="inline" reCAPTCHA öğenizde. Şununla: inline kapsayıcıyı kendiniz konumlandırırsınız ve rozet görünür kaldığı için atıf metnine ihtiyacınız olmaz.

Bu, reCAPTCHA v2 için geçerli mi?

Yalnızca görünmez v2 için. v2 onay kutusu widget'ı kendi başına bir bildirimdir; dolayısıyla uğraşılacak ayrı bir rozet yoktur. Görünmez v2, v3 ile aynı yüzen rozeti gösterir ve aynı kuralları izler. Şu konudaki rehberimiz: reCAPTCHA'nın ne olduğu ve nasıl çalıştığı sürümler arasındaki farkları ele alır.

Google bunu gerçekten uygular mı?

Site key'ler koşul ihlalleri nedeniyle devre dışı bırakılabilir. Düşük trafikli siteler için nadirdir, ancak atıf snippet'ini eklemek yarım dakika sürer; bu nedenle bu riski taşımak için gerçek bir neden yoktur.

Özet

Rozeti şununla gizleyin: visibility: hidden !important, her iki Google bağlantısını içeren atıf paragrafını gönder düğmenizin altına ekleyin, ardından token üretiminin konsolda hâlâ çalıştığını doğrulayın. Uyumlu yolun tamamı budur ve yaklaşık beş dakika sürer.

reCAPTCHA v3 ile yalnızca stil vermek yerine kod içinde çalışıyorsanız, CapSkip bir yerel captcha çözücü kendi makinenizde çalışır ve token'ları zaten kullandığınız API üzerinden döndürür. Bizim reCAPTCHA v3 çözücü sayfasında entegrasyon ayrıntıları vardır.