Cookie Consent ve SEO: GDPR/KVKK Uyumlu Çerez Yönetimi

Cookie Consent ve SEO: GDPR/KVKK Uyumlu Çerez Yönetimi

Çerez onayı (cookie consent), kullanıcı gizliliğini koruyan yasal bir zorunluluk olmasının yanı sıra, yanlış uygulandığında SEO performansınızı da olumsuz etkileyebilir. GDPR (Avrupa) ve KVKK (Türkiye) düzenlemeleri, web sitelerinin çerez kullanımı hakkında kullanıcıları bilgilendirmesini ve onay almasını zorunlu kılar. Bu rehberde çerez onayı yönetimini SEO dostu bir şekilde uygulamayı adım adım ele alacağız.

1. Çerez Türleri ve Yasal Gereklilikler

2. Cookie Consent'in SEO Etkisi

Çerez onayı banner'ı yanlış uygulandığında ciddi SEO sorunlarına yol açabilir:

• CLS (Cumulative Layout Shift): Banner sayfa yüklenirken layout kaymasına neden olabilir
• LCP (Largest Contentful Paint): Büyük overlay banner'lar LCP'yi bozar
• Render-blocking: Çerez script'leri sayfanın yüklenmesini yavaşlatabilir
• Googlebot etkileşimi: Google, çerez banner'ını kapatamaz; içerik erişimi engellenebilir
• Interstitial cezası: Tam sayfa kapatan banner'lar Google tarafından cezalandırılabilir

3. SEO Dostu Cookie Banner Tasarımı

<!-- SEO dostu cookie banner — alt kısımda, overlay YOK -->
<div id="cookie-consent" role="dialog" aria-label="Çerez Onayı"
     style="position:fixed; bottom:0; left:0; right:0; z-index:9999;
            background:#1a1a2e; color:#fff; padding:16px 24px;
            display:none;">
  <div style="max-width:1200px; margin:0 auto; display:flex;
              align-items:center; gap:16px; flex-wrap:wrap;">
    <p style="flex:1; margin:0; font-size:14px;">
      Bu web sitesi deneyiminizi iyileştirmek için çerezler kullanmaktadır.
      <a href="/cerez-politikasi" style="color:#60a5fa;">Çerez Politikası</a>
    </p>
    <div style="display:flex; gap:8px;">
      <button>Tümünü Kabul Et</button>
      <button>Ayarlar</button>
      <button>Reddet</button>
    </div>
  </div>
</div>

4. JavaScript ile Çerez Onay Yönetimi

// cookieConsent.js
class CookieConsentManager {
  constructor() {
    this.consentKey = 'cookie_consent';
    this.categories = {
      necessary: true,     // Her zaman aktif
      functional: false,
      analytics: false,
      marketing: false,
    };
  }

  init() {
    const saved = this.getSavedConsent();
    if (saved) {
      this.categories = saved;
      this.applyConsent();
    } else {
      this.showBanner();
    }
  }

  getSavedConsent() {
    try {
      const data = localStorage.getItem(this.consentKey);
      return data ? JSON.parse(data) : null;
    } catch {
      return null;
    }
  }

  saveConsent() {
    localStorage.setItem(this.consentKey, JSON.stringify(this.categories));
    localStorage.setItem('consent_date', new Date().toISOString());
  }

  showBanner() {
    const banner = document.getElementById('cookie-consent');
    if (banner) {
      banner.style.display = 'block';
      banner.classList.add('visible');
    }
  }

  hideBanner() {
    const banner = document.getElementById('cookie-consent');
    if (banner) banner.style.display = 'none';
  }

  acceptAll() {
    this.categories = {
      necessary: true,
      functional: true,
      analytics: true,
      marketing: true,
    };
    this.saveConsent();
    this.applyConsent();
    this.hideBanner();
  }

  rejectOptional() {
    this.categories = {
      necessary: true,
      functional: false,
      analytics: false,
      marketing: false,
    };
    this.saveConsent();
    this.applyConsent();
    this.hideBanner();
  }

  applyConsent() {
    if (this.categories.analytics) {
      this.loadScript('https://www.googletagmanager.com/gtag/js?id=G-XXXXX');
    }
    if (this.categories.marketing) {
      this.loadScript('https://connect.facebook.net/en_US/fbevents.js');
    }
  }

  loadScript(src) {
    if (document.querySelector(`script[src="${src}"]`)) return;
    const script = document.createElement('script');
    script.src = src;
    script.async = true;
    document.head.appendChild(script);
  }
}

const consent = new CookieConsentManager();
document.addEventListener('DOMContentLoaded', () => consent.init());

function acceptAllCookies() { consent.acceptAll(); }
function rejectOptionalCookies() { consent.rejectOptional(); }
function openCookieSettings() { /* Tercih modalını aç */ }

5. Google Consent Mode v2

Google Consent Mode v2, çerez onayına göre Google etiketlerinin davranışını otomatik olarak ayarlar. 2024'ten itibaren AB'de zorunlu hale gelmiştir.

<script>
  // Varsayılan: tüm izinler reddedilmiş
  window.dataLayer = window.dataLayer || [];
  function gtag() { dataLayer.push(arguments); }

  gtag('consent', 'default', {
    'ad_storage': 'denied',
    'ad_user_data': 'denied',
    'ad_personalization': 'denied',
    'analytics_storage': 'denied',
    'functionality_storage': 'denied',
    'personalization_storage': 'denied',
    'security_storage': 'granted',
    'wait_for_update': 500,
  });
</script>

<!-- GTM yükle -->
<script>
  (function(w,d,s,l,i){
    w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});
    var f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';
    j.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;
    f.parentNode.insertBefore(j,f);
  })(window,document,'script','dataLayer','GTM-XXXXX');
</script>

// Kullanıcı onay verdikten sonra güncelle
function updateGoogleConsent(categories) {
  gtag('consent', 'update', {
    'ad_storage': categories.marketing ? 'granted' : 'denied',
    'ad_user_data': categories.marketing ? 'granted' : 'denied',
    'ad_personalization': categories.marketing ? 'granted' : 'denied',
    'analytics_storage': categories.analytics ? 'granted' : 'denied',
    'functionality_storage': categories.functional ? 'granted' : 'denied',
    'personalization_storage': categories.functional ? 'granted' : 'denied',
  });
}

6. CLS Önleme Teknikleri

/* Cookie banner CLS önleme */

/* transform ile animasyon — layout shift oluşturmaz */
#cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  contain: layout style;
}

#cookie-consent.visible {
  transform: translateY(0);
}

/* Alternatif: body padding ile yer ayırma */
body.has-cookie-banner {
  padding-bottom: 80px;
}

body.consent-given {
  padding-bottom: 0;
}

7. Googlebot ve İçerik Erişimi

Googlebot çerez onayı banner'ını tıklayamaz. İçeriğinizin banner arkasında kalmaması kritiktir.

// Googlebot için önemli kurallar:
// 1. Banner ASLA içeriği tam olarak kapatmamalı
// 2. Ana içerik her zaman DOM'da mevcut olmalı
// 3. JSON-LD structured data çerez onayına bağlı olmamalı
// 4. Sayfa başlığı ve meta tag'lar onay olmadan render edilmeli

// KÖTÜ — İçeriği gizleyen overlay
<!-- <div class="overlay" style="position:fixed; inset:0; background:rgba(0,0,0,0.8)"> -->

// İYİ — Alt kısımda küçük banner
// İçerik her zaman görünür ve erişilebilir

8. KVKK Uyumluluk Checklist

• Aydınlatma metni: Çerez politikası sayfası oluşturun
• Açık rıza: Opt-in yaklaşımı kullanın (önceden işaretli kutucuk olmadan)
• Granüler kontrol: Çerez kategorilerini ayrı ayrı kabul/red imkanı
• Kolay red: Reddetme seçeneği kabul etme kadar kolay erişilebilir olmalı
• Onay kaydı: Onay tarihini ve kapsamını kaydedin
• Geri çekme: Kullanıcı onayını her zaman geri çekebilmeli
• Zorunlu çerezler: Onay gerekmez ama bilgilendirme yapılmalı
• Üçüncü taraf: Üçüncü taraf çerezlerini listeleyin
• Çerez politikası sayfası: Tüm çerezleri detaylıca açıklayın
• İletişim bilgisi: KVKK sorumlusu iletişim bilgisi

9. Popüler Cookie Consent Çözümleri

# Hafif ve SEO dostu kütüphaneler

# 1. vanilla-cookieconsent — ~10KB, açık kaynak
npm install vanilla-cookieconsent

# 2. CookieYes — Bulut tabanlı, KVKK desteği
# 3. Osano — Ücretsiz plan, ~15KB
# 4. Google Funding Choices — Google CMP entegrasyonu

// vanilla-cookieconsent örneği
import 'vanilla-cookieconsent/dist/cookieconsent.css';
import * as CookieConsent from 'vanilla-cookieconsent';

CookieConsent.run({
  guiOptions: {
    consentModal: {
      layout: 'box inline',
      position: 'bottom left',
    },
  },
  categories: {
    necessary: { enabled: true, readOnly: true },
    analytics: {},
    marketing: {},
  },
  language: {
    default: 'tr',
    translations: {
      tr: {
        consentModal: {
          title: 'Çerez Kullanımı',
          description: 'Deneyiminizi iyileştirmek için çerezler kullanıyoruz.',
          acceptAllBtn: 'Tümünü Kabul Et',
          acceptNecessaryBtn: 'Sadece Zorunlu',
          showPreferencesBtn: 'Tercihler',
        },
      },
    },
  },
  onConsent: ({ cookie }) => {
    if (cookie.categories.includes('analytics')) {
      updateGoogleConsent({ analytics: true, marketing: false });
    }
  },
});

Sonuç

Cookie consent yönetimi, yasal uyumluluk ve SEO performansını dengelemek gereken kritik bir konudur. Banner tasarımında tam sayfa overlay'lerden kaçının, CLS etkisini minimize edin ve Googlebot'un içeriğe erişimini engellemeyin. Google Consent Mode v2 ile analitik verilerinizi koruyun. KVKK ve GDPR gerekliliklerini eksiksiz uygulayın: açık rıza, granüler kontrol, kolay red ve onay kaydı. Hafif ve performanslı bir cookie consent kütüphanesi seçerek hem yasal uyumluluğu hem de kullanıcı deneyimini sağlayın.

Kaynaklar

• Google — Consent Mode
• KVKK Resmi Sitesi
• GDPR — Cookie Compliance
• vanilla-cookieconsent Dokümantasyonu
• web.dev — Cookie Notice Best Practices