SEO Uyumlu HTML Razor Kodlar ile Tema Geçişi Rehberi

Modern web geliştirme dünyasında, kullanıcı deneyimi (UX) artık bir lüks değil, bir zorunluluktur. Kullanıcıların sitenizde daha uzun süre kalmasını, etkileşimde bulunmasını ve geri dönmesini sağlayan en önemli faktörlerden biri de onlara kişiselleştirilmiş bir deneyim sunmaktır. İşte bu noktada, özellikle son yıllarda popülaritesi artan karanlık mod (dark mode) ve aydınlık mod arasında geçiş yapma imkanı öne çıkıyor. Peki, bu özelliği .NET platformunda Razor sözdizimini kullanarak hem performanslı hem de arama motoru optimizasyonuna (SEO) uygun bir şekilde nasıl entegre edebiliriz? Bu kapsamlı rehberde, SEO uyumlu HTML Razor kodlar kullanarak tema geçişi destekli bir yapının nasıl kurulacağını A'dan Z'ye, adım adım ve bol örnekle inceleyeceğiz.

Neden SEO Uyumlu HTML Razor Kodlar ve Tema Geçişi Önemlidir?

Konunun teknik detaylarına inmeden önce, bu birlikteliğin neden bu kadar kritik olduğunu anlamak gerekiyor. Razor, Microsoft'un .NET platformu için geliştirdiği, HTML içine C# kodu gömülmesini sağlayan güçlü bir sunucu tarafı (server-side) görüntü motorudur. Sunucu tarafında işlenen kod, tarayıcıya saf HTML olarak gönderilir. Bu durumun SEO için devasa avantajları vardır:

• Hızlı İndeksleme: Google gibi arama motoru botları, sunucuda hazırlanmış temiz HTML'i, istemci tarafında (client-side) render edilmesi gereken JavaScript framework'lerine kıyasla çok daha hızlı ve verimli bir şekilde tarar ve indeksler.
• Gelişmiş Performans: Razor ile mantıksal işlemler sunucuda yapıldığı için istemcinin yükü azalır. Bu da doğrudan sayfa yükleme hızını (PageSpeed) artırır. Google'ın sayfa hızını önemli bir sıralama faktörü olarak gördüğünü unutmamak gerekir. İstatistiklere göre, sayfa yükleme süresindeki 1 saniyelik bir gecikme bile dönüşüm oranlarını %7'ye kadar düşürebilmektedir.
• Kullanıcı Deneyimi Sinyalleri: Tema geçişi özelliği, kullanıcıların göz yorgunluğunu azaltır ve özellikle düşük ışıklı ortamlarda daha konforlu bir gezinme deneyimi sunar. Bu durum, sitenizde geçirilen süreyi artırır ve hemen çıkma oranını (bounce rate) düşürür. Bu metrikler, Google için sitenizin kalitesini gösteren önemli pozitif sinyallerdir.

Kısacası, temiz ve SEO uyumlu HTML Razor kodlar ile geliştirilmiş, kullanıcıya tema geçişi desteği sunan bir web sitesi, hem arama motorlarının hem de kullanıcıların gözünde bir adım öne çıkar.

Tema Geçişi Destekli Yapının Temeli: CSS Değişkenleri (Custom Properties)

Dinamik tema geçişinin en modern ve verimli yolu CSS değişkenleri kullanmaktır. Bu yöntem, onlarca satırlık CSS kodunu kopyalayıp yapıştırmak yerine, renk paletini merkezi bir yerden yönetmemizi sağlar. Mantık oldukça basittir: Temel renklerimizi değişken olarak tanımlarız ve ardından bu değişkenleri tüm sitemizde kullanırız. Tema değişimi ise sadece bu değişkenlerin değerlerini değiştirmekten ibarettir.

Öncelikle, CSS dosyamızın en üstüne `:root` seçicisi ile varsayılan (aydınlık) tema renklerimizi tanımlayalım. Ardından, karanlık tema için bir class (örneğin `.dark-theme`) altında bu değişkenleri yeniden tanımlayalım.

/* style.css */
:root {
  --background-color: #ffffff;
  --text-color: #333333;
  --primary-color: #007bff;
  --card-background: #f8f9fa;
  --border-color: #dee2e6;
}

body.dark-theme {
  --background-color: #1a1a1a;
  --text-color: #f0f0f0;
  --primary-color: #58a6ff;
  --card-background: #2c2c2c;
  --border-color: #444444;
}

/* Değişkenlerin kullanımı */
body {
  background-color: var(--background-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

a {
  color: var(--primary-color);
}

.card {
  background-color: var(--card-background);
  border: 1px solid var(--border-color);
}

Bu yapı sayesinde, JavaScript ile `` etiketine `dark-theme` class'ını eklediğimiz anda tüm site anında karanlık moda geçecektir. İşte bu esneklik, SEO uyumlu HTML Razor kodlar ile birleştiğinde harikalar yaratır.

Adım Adım Razor ile SEO Dostu Dinamik Tema Geçişi Uygulaması

Şimdi en heyecanlı kısma geldik: Bu yapıyı bir .NET Core MVC veya Razor Pages projesine nasıl entegre edeceğimiz. Amacımız sadece temayı değiştirmek değil, aynı zamanda kullanıcının tercihini hatırlamak ve sayfa yenilendiğinde "yanlış temanın kısa bir an görünmesi" (Flash of Unstyled Content - FOUC) sorununu yaşamamaktır. Bu, SEO ve UX için kritiktir.

1. JavaScript ile Tema Değiştirici ve `localStorage` Kullanımı

   İlk olarak, kullanıcının tema tercihini tarayıcısında saklamak ve tema değiştirme butonunu işlevsel hale getirmek için bir JavaScript kodu yazacağız. Bu kod, `localStorage` kullanarak tercihi kalıcı hale getirir.

   
   // site.js
   document.addEventListener('DOMContentLoaded', function () {
       const themeToggle = document.getElementById('theme-toggle-button');
       const currentTheme = localStorage.getItem('theme');
   
       if (currentTheme) {
           document.body.classList.add(currentTheme);
       }
   
       themeToggle.addEventListener('click', function () {
           let theme = 'light-theme'; // Default to light
           if (!document.body.classList.contains('dark-theme')) {
               document.body.classList.add('dark-theme');
               theme = 'dark-theme';
           } else {
               document.body.classList.remove('dark-theme');
           }
           localStorage.setItem('theme', theme);
       });
   });
   

2. Sunucu Tarafı Entegrasyonu: Cookie ile FOUC Sorununu Çözme

   Yukarıdaki JavaScript kodu çalışır, ancak bir problemi vardır: Sayfa yüklendiğinde önce varsayılan HTML gelir, ardından JS çalışır ve temayı değiştirir. Bu kısa süreli titreme/yanıp sönme (FOUC) kötü bir kullanıcı deneyimidir. İşte burada Razor devreye giriyor. Çözüm, kullanıcının tercihini `localStorage`'a ek olarak bir Cookie'ye de yazmak ve sunucunun sayfayı oluştururken bu Cookie'yi okumasıdır.

   JavaScript kodumuzu Cookie yazacak şekilde güncelleyelim:

   
   // ... önceki kod
   themeToggle.addEventListener('click', function () {
       let theme = 'light-theme';
       if (document.body.classList.toggle('dark-theme')) {
           theme = 'dark-theme';
       }
       localStorage.setItem('theme', theme);
       // Sunucuya bilgi vermek için Cookie set ediliyor
       document.cookie = `theme=${theme};path=/;max-age=31536000`; // 1 yıl geçerli
   });
   

3. _Layout.cshtml Dosyasında Temayı Sunucuda Ayarlama

   Projenizin ana şablon dosyası olan `Views/Shared/_Layout.cshtml` dosyasını açın. Burada, sayfa tarayıcıya gönderilmeden önce, gelen isteğin (request) Cookie'lerini okuyacağız ve tema class'ını doğrudan `` etiketine basacağız.

   
   <!DOCTYPE html>
   <html lang="tr">
   <head>
       <!-- meta tags, title, css links etc. -->
   </head>
   @{
       // Request'ten tema cookie'sini oku
       var theme = Context.Request.Cookies["theme"] ?? "light-theme";
       // Eğer cookie yoksa varsayılan light-theme olur.
       // Güvenlik için sadece beklenen değerleri kabul et
       var themeClass = (theme == "dark-theme") ? "dark-theme" : ""; 
   }
   <body class="@themeClass">
       <!-- Header, Main Content, Footer -->
       @RenderBody()
   
       <!-- scripts -->
   </body>
   </html>
   

   Bu yöntemle, sayfa tarayıcıya ulaştığında `` etiketi zaten doğru tema sınıfına (`dark-theme` veya boş) sahip olur. Böylece FOUC sorunu %100 ortadan kalkar. Bu, SEO uyumlu HTML Razor kodlar ile elde edilen en büyük kazanımlardan biridir.

Tema Yönetiminde Performans ve SEO Optimizasyonu İpuçları

Tema geçişi destekli bir yapı kurarken performansı göz ardı etmemek gerekir. Hızlı bir site, daha iyi sıralamalar demektir. İşte bazı önemli ipuçları:

• CSS ve JavaScript Minification: Projenizde kullandığınız CSS ve JS dosyalarını "minify" ederek (boşlukları, yorumları silerek) dosya boyutlarını küçültün. .NET Core projelerinde bu işlem build sırasında otomatik olarak yapılabilir.
• Render-Blocking Kaynakları Azaltın: CSS dosyalarınızı `` içinde, JavaScript dosyalarınızı ise `