WEB TASARIM SEO
Web tasarım SEO; site mimarisi, navigasyon, sayfa hızı, mobile uyum, görsel optimizasyonu ve erişilebilirlik gibi tasarım kararlarının arama motoru sıralamasına etkisini hesaba katan yaklaşımdır; bu yazıda hangi tasarım kararının Google görünürlüğünü nasıl etkilediğini ve tasarımcı ile SEO uzmanının nasıl aynı dili konuşacağını öğreneceksiniz.
1. 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ı
2. 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ı
3. 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.
4. 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
5. 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
6. 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
7. 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ı
8. 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.
9. 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.
10. 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.
Sıkça Sorulan Sorular
Mevcut sitemi yeniden tasarlatıyorum, SEO'ya zarar vermeden nasıl yaparım?
Üç kritik adım var. Birincisi: mevcut URL yapısı korunmalı; değişen URL'ler için 301 yönlendirme planı yazılmalı. İkincisi: SEO uzmanı projeye tasarım kavramından önce dahil edilmeli; sonradan eklemek geç olur. Üçüncüsü: lansman sonrası 4 hafta Search Console sıkı izlenmeli; trafik düşüşü erken yakalanmalı. Yeniden tasarım yanlış yönetilirse yüzde 30-70 organik trafik kaybı yaşanır.
Hangi sayfa hızı skoru hedef olmalı?
PageSpeed Insights'ta hem mobile hem desktop için 80+ skor hedef olabilir; 90+ mükemmel kabul edilir. Daha kritik olan Core Web Vitals: LCP 2.5sn altı, INP 200ms altı, CLS 0.1 altı. Bu üç metrik sıralama faktörü; skorun kendisinden daha belirleyicidir. Lab data değil real user data (CrUX) önemli olan veridir.
Web tasarımı için en SEO uyumlu altyapı hangisidir?
Tek bir doğru cevap yok; kapsam ve ekip yetkinliğine bağlı. WordPress geniş ekosistem ve SEO eklenti desteğiyle çoğu marka için ideal. Webflow modern tasarım imkanı sunar; performans iyidir ama SEO derinliği sınırlı. Shopify e-ticaret için standart; SEO için WordPress kadar esnek değil. Custom kod tam kontrol verir ama her SEO ihtiyacı için kod yazma gerekir; bu zaman alır.
Mobile uyum SEO için ne kadar etkili?
Çok kritik. Google 2018'den beri mobile-first indexing uyguluyor; yani siteyi mobile versiyonundan değerlendiriyor. Mobile uyumsuz site sıralama almaz; teknik olarak desktop iyi olsa bile. Modern markalar artık önce mobile tasarımı yapıp desktop'ı uyarlıyor; tersi yaklaşım eski ve etkisiz. Mobile-Friendly Test ücretsiz kontrol aracıdır.
Single Page Application (React, Vue) SEO için sorun mu?
Önceden büyük sorundu, bugün çoğunlukla çözülebilir hale geldi. Server-side rendering (SSR) veya static site generation (SSG) kullanılırsa SPA siteler de iyi sıralanır. Next.js (React) ve Nuxt.js (Vue) gibi framework'ler bu sorunu büyük ölçüde çözmüş. Saf client-side render edilen SPA hâlâ riskli; özellikle Google dışı arama motorları için.
Tasarımcı ve SEO uzmanını birlikte mi yoksa ayrı mı çalıştırmalı?
Birlikte. Tasarım projesinin kavram aşamasında her ikisi de masada olmalı. Site mimarisi, URL şablonları, içerik tipleri ve schema kararları tasarım kararlarından ayrılamaz. Tasarım bittikten sonra SEO uzmanı eklenirse birçok düzeltme maliyetli hale gelir. Modern markalar SEO ve tasarımı entegre çalıştıran ekiplerle veya ajanslarla çalışıyor.
