WEB TASARIM SEO

Bir web tasarımı sadece "güzel görünen bir site" değildir. Renk paleti, tipografi ve düzen kadar; site hızı, mobile uyumu, navigasyon yapısı ve sayfa mimarisi de tasarım kararlarıdır. Bu ikinci grup karar, kullanıcı deneyimini etkilediği gibi Google'ın siteyi nasıl değerlendirdiğini de doğrudan belirler.

Web tasarım SEO; tasarım kararlarının arama motoru sıralamasına etkisini hesaba katan tasarım yaklaşımıdır. SEO uzmanlarının tasarımcıyla, tasarımcıların da SEO uzmanıyla aynı dili konuşmasını sağlar. Bu birlikte çalışma olmadığında "güzel ama Google'da görünmeyen siteler" veya "üst sıralarda ama kötü tasarımdan satış üretmeyen siteler" ortaya çıkar.

Tasarım kararlarının SEO faturası altı kalemde kesilir: site mimarisi, navigasyon yapısı, sayfa hızı, mobile öncelikli tasarım, görsel optimizasyonu ve erişilebilirlik. Bu kalemler tasarım aşamasında düşünüldüğünde bedava, yayından sonra düzeltildiğinde pahalıdır — fark sadece zamanlama.

Site mimarisi ve URL yapısı

Tasarımın görünmeyen ama en kritik kısmı site mimarisidir. Sayfalar nasıl gruplanır, hangi kategori altına girer, URL'ler ne kadar derin olur; tüm bu kararlar tasarım aşamasında verilir ve sonradan değiştirilmesi zordur. Mimari ve URL kararlarının arama motoru tarafındaki karşılığını Google arama dokümantasyonu ayrıntılı biçimde tanımlar.

İyi site mimarisi

• Maksimum 3 seviye derinlik (Ana sayfa → Kategori → Sayfa)
• Her sayfaya 3 tıklamada ulaşılabilirlik
• Mantıklı kategori-alt kategori hiyerarşisi
• Tutarlı URL yapısı (anahtar kelime içeren, kısa, anlamlı)
• Breadcrumb (kırıntı) navigasyonu görünür

URL yapısı kararları

• Kelimeler tire (-) ile ayrılır, alt çizgi (_) kullanılmaz
• Türkçe karakter (ş, ç, ğ) kullanılmaz; ASCII karşılığı yazılır
• URL içinde gereksiz parametre (?id=123) olmamalı
• Mümkün olduğunca kısa, 3-5 kelime aşılmamalı

Navigasyon yapısı

Üst menü ve footer menüsü; hem kullanıcı deneyimi hem SEO için kritik tasarım öğeleridir. Yanlış menü, Google'ın siteyi yanlış kategorize etmesine yol açar.

Üst menü kuralları

• 5-7 ana link, daha fazlası dağıtır
• En önemli sayfalar mutlaka olmalı (Hakkımızda, Hizmetler/Ürünler, İletişim)
• Dropdown menüler 2 seviyeyi geçmemeli
• Mobilde hamburger menüye düşeceği için sıralama önemli

Footer kuralları

• Detay sayfalarına bağlantılar (KVKK, çerez politikası, kullanım şartları)
• Sosyal medya ikonları (büyük ikon avı yapmamak, küçük ve düzenli)
• İletişim bilgileri (adres, telefon, e-posta)
• Site haritası bağlantısı

Sayfa hızı ve performans

Google 2021'den beri Core Web Vitals adı verilen üç performans metriğini sıralama faktörü olarak değerlendiriyor. Web tasarımı kararları bu üç metriği doğrudan etkiliyor.

LCP (Largest Contentful Paint)

Sayfadaki en büyük öğenin (genelde hero görseli) yüklenme süresi. 2.5 saniyenin altı iyi kabul edilir. Hero görselin optimize edilmemiş olması, custom font'ların yavaş yüklenmesi LCP'yi öldürür.

INP (Interaction to Next Paint)

Kullanıcı etkileşimine (tıklama, kaydırma) sayfanın yanıt verme süresi. 200 ms altı hedeftir. Aşırı JavaScript yüklemesi INP'yi düşürür.

CLS (Cumulative Layout Shift)

Sayfanın yüklenirken oynama derecesi. 0.1 altı sağlıklı. Görsellerde boyut belirtilmemesi, late-loading reklamlar veya pop-up'lar CLS'i kötüleştirir.

Mobile öncelikli tasarım

Google 2018'den beri "mobile-first indexing" uyguluyor; yani siteyi önce mobile versiyonundan değerlendiriyor. Bu, tasarım yaklaşımının da değişmesi gerektiği anlamına geliyor.

Mobile öncelikli tasarım ilkeleri

• Mobile tasarım önce yapılır; desktop sonra adapte edilir
• Dokunmatik dostu buton boyutları (minimum 44x44 piksel)
• Mobil okuma için font boyutu en az 16px
• İçerik blokları arası yeterli boşluk (kazara tıklamayı önler)
• Yatay kaydırma yok; tüm içerik tek dikey akışta

Görsel ve medya optimizasyonu

Görseller sayfa hızının baş düşmanı olabilir; doğru optimize edilmediğinde sayfanın yarısını yavaşlatır. Tasarım aşamasında görsel kararları SEO ile birlikte verilmelidir.

• Format: WebP (JPG ve PNG'ye göre yüzde 30-50 küçük)
• Dosya boyutu: Görsel başına maksimum 200 KB hedef
• Boyutlandırma: Görselin gerçek görüntülenecek boyutuna sıkıştır; 4K hero görseli 1200px gösterilmek üzere yüklenmemeli
• Lazy loading: İlk görsel (LCP) hariç tüm görseller lazy yüklenir
• Alt metin: Her görsel için 50-120 karakterlik anlamlı alt metin

Tipografi ve okunabilirlik

İyi okunabilen tipografi hem kullanıcı deneyimi hem SEO için önemlidir. Kullanıcı sayfada uzun kalırsa Google bunu pozitif sinyal olarak okur.

• Gövde metin font boyutu en az 16px (mobile), 18px (desktop)
• Satır yüksekliği 1.5-1.7 arası (okuma rahatlığı için)
• Satır uzunluğu 50-75 karakter arası optimal
• Kontrast oranı en az 4.5:1 (erişilebilirlik standardı)
• Google Fonts veya custom font kullanılıyorsa font-display: swap ile yüklenir

Erişilebilirlik ve SEO

Erişilebilir bir site (engelli kullanıcılar için kullanılabilir), Google tarafından da daha kaliteli görülür. WCAG 2.1 AA standartları minimum hedef olmalı.

• Tüm görsellere alt metin
• Tüm form alanlarına label
• Klavye navigasyonu mümkün olmalı (sekme tuşuyla)
• Yeterli renk kontrastı
• Semantic HTML kullanımı (div yerine article, section, nav)
• Skip-to-content bağlantısı

Tasarım ile SEO uzmanının işbirliği

İyi sonuç için tasarımcının ve SEO uzmanının proje başında değil, kavramsal aşamada birlikte çalışması gerekir. Şu konular birlikte kararlaştırılır:

• Site mimarisi ve sayfa hiyerarşisi
• Ana navigasyon yapısı
• URL şablonları
• İçerik tipleri ve şablonları
• Schema yapı kararları
• Görsel boyut standartları
• Font seçimi (performans etkisi)

Tasarım tamamlandıktan sonra SEO uzmanı çağrılırsa birçok karar geri dönülemez şekilde verilmiş olur; düzeltme maliyeti çok daha yüksektir.

WordPress, Webflow, custom kod karşılaştırması

Hangi altyapıyla tasarım yapıldığı SEO'yu doğrudan etkiler. WordPress geniş ekosistem ve SEO eklentileriyle güçlü; Webflow modern ama sınırlı; custom kod tam kontrol ama tüm SEO çalışmasını sıfırdan yapma gereksinimi getiriyor. Detaylar için WordPress web tasarım sayfasına bakılabilir.

Hatırlanması Gerekenler

Web tasarım SEO; tasarım kararlarının arama motoru görünürlüğüne etkisini hesaba katan modern bir yaklaşımdır. Site mimarisi, navigasyon, sayfa hızı, mobile uyum, görsel optimizasyonu, tipografi ve erişilebilirlik birlikte değerlendirilir. Bu iki disiplini tek kişide birleştirmek isteyenler için web tasarımı eğitimi tasarım kararlarını SEO bilinciyle verme pratiğini kazandırır. Tasarımcı ve SEO uzmanı projeye başında birlikte girerse "güzel ve görünür" bir site ortaya çıkar; ayrı çalışırlarsa biri "güzel ama görünmez", diğeri "görünür ama satmaz" siteyle sonuçlanır. Modern markalar artık iki disiplini birbirine entegre etmiş ekiplerle çalışır.