Web sitenizin Google’da nerede göründüğü, büyük ölçüde tasarım ve geliştirme aşamasında alınan kararlarla şekillenir. Güzel görünen ama SEO açısından sorunlu bir site, trafik çekmekte ve dönüşüm sağlamakta zorlanır. SEO uyumlu web tasarım ise kullanıcı deneyimi ve arama motoru sinyallerini birlikte optimize eden bütüncül bir yaklaşımdır.
Bu kapsamlı rehberde SEO’yu doğrudan etkileyen teknik tasarım kararlarını, Core Web Vitals optimizasyonunu, URL mimarisini, schema markup stratejisini ve sık yapılan hataları ayrıntılı biçimde ele alıyoruz.
SEO ve Tasarımın Kesişimi
SEO uzmanı ile web tasarımcısı/geliştiricisi geleneksel olarak ayrı çalışmıştır. Ancak Google’ın algoritmalarının gelişmesiyle bu iki alan artık birbirinden bağımsız yürütülemez. Tasarım aşamasında düzeltilmemiş SEO sorunu, yayına alındıktan sonra çözülmesi çok daha maliyetli hale gelir.
Tasarımın Doğrudan Etkilediği SEO Faktörleri
| Tasarım Kararı | SEO Etkisi | Ağırlığı |
|---|---|---|
| Sayfa hızı (Core Web Vitals) | Doğrudan sıralama faktörü | Kritik |
| Mobil uyumluluk | Mobile-first indexing | Kritik |
| URL yapısı | Alaka sinyali + taranabilirlik | Yüksek |
| Başlık hiyerarşisi (H1-H6) | İçerik yapısı sinyali | Yüksek |
| Görsel optimizasyonu | Hız + görsel SEO | Yüksek |
| Navigasyon ve iç bağlantı | Otorite dağıtımı + tarama | Yüksek |
| Schema markup | Zengin sonuç + anlam | Orta-Yüksek |
| JavaScript kullanımı | İndekslenebilirlik | Orta-Yüksek |
| Canonical yapısı | Duplicate content önleme | Orta |
| Erişilebilirlik (a11y) | Kullanıcı deneyimi sinyali | Orta |
Core Web Vitals: Tasarımcının Rehberi
2024’te Güncellenen Core Web Vitals
| Metrik | Açıklaması | İyi | İyileştir | Zayıf | Ölçüm Aracı |
|---|---|---|---|---|---|
| LCP | En büyük içeriğin yüklenmesi | 2.5 sn ve altı | 2.5–4.0 sn | 4.0 sn üstü | PageSpeed, CrUX |
| INP | Etkileşime yanıt süresi | 200 ms ve altı | 200–500 ms | 500 ms üstü | PageSpeed, CrUX |
| CLS | Beklenmedik yerleşim değişikliği | 0.1 ve altı | 0.1–0.25 | 0.25 üstü | PageSpeed, CrUX |
Dikkat: Google, CrUX (Chrome User Experience Report) verilerini kullanır. Bu gerçek kullanıcı verileridir; lab ortamı ölçümleri farklılık gösterebilir.
LCP: Neyi Etkiler, Nasıl Optimizasyon Yapılır?
LCP, sayfanın “kullanıcı için yüklendi” hissini belirleyen en kritik metriktir.
LCP genellikle neyi ölçer?
| İçerik Türü | LCP Olma Sıklığı | Optimizasyon Önceliği |
|---|---|---|
| Hero görsel (img, background-image) | %70–80 | En yüksek |
| H1 metin bloğu | %15–20 | Yüksek |
| Video thumbnail | %5–10 | Orta |
| SVG veya diğer | %1–5 | Duruma göre |
Hero görsel optimizasyon adımları:
- Format: WebP (JPEG’den %25–35 daha küçük) veya AVIF (WebP’den %20 daha küçük)
- Boyut: Cihaz genişliğine göre
srcsetile responsive görseller - Boyut talimatı:
widthveheightattribute’u mutlaka ekle (CLS’yi de önler) - Preload:
<link rel="preload" as="image" href="hero.webp" fetchpriority="high"> - Lazy loading YAPMA: Hero görseline
loading="lazy"ekleme; yüklemeyi geciktirir
INP Optimizasyonu: JavaScript ve Etkileşim
INP (2024’te FID’in yerini aldı), kullanıcının tıklama/dokunma gibi etkileşimlerine verilen yanıt süresini ölçer.
| INP Sorunu | Yaygın Neden | Çözüm |
|---|---|---|
| Uzun görev (long task) | Ağır JS kod bloğu | Code splitting, web workers |
| Render blocking script | 3. taraf script | Defer, async, lazy load |
| Ağır event handler | Tıklamada hesaplama | İşlemi async’e taşı |
| Senkron XHR | Eski API çağrıları | Async/await fetch |
| CSS animasyon | GPU desteklenmeyen CSS | transform/opacity kullan |
CLS: Yerleşim Kararlılığı
CLS, kullanıcı okurken öğelerin beklenmedik şekilde yerini değiştirmesini ölçer.
En sık CLS nedenleri ve çözümleri:
| CLS Nedeni | Nasıl Oluşur | Çözüm | Etki |
|---|---|---|---|
| Boyutsuz görseller | Görsel yüklenince alan değişir | width + height attribute | Kritik |
| Geç yüklenen reklam bloğu | Reklam gelince sayfayı iter | Placeholder div rezerve et | Yüksek |
| Web font FOUT | Font yüklenince metin boyutu değişir | font-display: optional veya swap | Orta |
| Dinamik içerik (banner, bildirim) | JS ile üstten içerik enjekte | İçeriği alta yerleştir | Yüksek |
| CSS animasyonu (top/left) | Position değişimi | transform: translateY() kullan | Orta |
| Embed (YouTube, sosyal) | Iframe boyutu belirsiz | aspect-ratio CSS | Orta |
Mobil-First Tasarım: Teknik Gereksinimler
Google mobile-first indexing kullanır; mobil sürüm indeksleme ve sıralama için referans alınır.
Mobil SEO Kontrol Listesi
| Kontrol | Standart | Test Aracı |
|---|---|---|
| Viewport meta etiketi | <meta name="viewport" content="width=device-width, initial-scale=1"> | Manuel |
| Metin okunabilirliği | 16px minimum font | Chrome DevTools |
| Dokunma hedefi boyutu | Min. 44x44 px (Apple) veya 48x48 dp (Google) | Lighthouse |
| Yatay kaydırma | Yok olmalı | Chrome DevTools |
| Mobil hız | LCP 2.5 sn altı ayrıca mobil için | PageSpeed Insights |
| Interstitial (popup) | Ekranın büyük bölümünü kaplamamalı | Manuel |
| Görüntü boyutu | Ekran genişliğini aşmamalı | Lighthouse |
| Responsive görseller | srcset veya picture elementi | Chrome DevTools |
URL Yapısı: Doğru Mimari
İdeal URL Tasarımı
| Kural | Doğru | Yanlış | Neden |
|---|---|---|---|
| Karakter seti | Yalnızca a-z, 0-9, tire (-) | Türkçe karakter (ş, ğ, ü) | Encoding sorunları |
| Kelime ayırıcı | Tire (-) | Alt çizgi (_) | Google tireyi ayırıcı olarak okur |
| Harf | Küçük harf | Büyük harf | Duplicate URL riski |
| Uzunluk | 3–5 kelime | 10+ kelime | Kullanıcı deneyimi |
| Dinamik parametre | Gerekiyorsa canonical | Filtresiz bırakma | Duplicate content |
| Trailing slash | Tutarlı (her zaman var veya yok) | Karışık kullanım | Duplicate URL |
URL hiyerarşisi örneği:
siteniz.com/ → Ana sayfa
siteniz.com/hizmetler/ → Hizmetler
siteniz.com/hizmetler/web-tasarim/ → Web tasarım
siteniz.com/blog/ → Blog
siteniz.com/blog/seo-nedir/ → Makale
Başlık Hiyerarşisi (Heading Structure)
Doğru Heading Kullanımı
| Etiket | Kullanım | Anahtar Kelime | Sayfa Başına |
|---|---|---|---|
| H1 | Sayfanın ana başlığı | Birincil anahtar kelime | 1 adet |
| H2 | Ana bölümler | İkincil anahtar kelimeler | 3–8 adet |
| H3 | H2 altındaki alt bölümler | LSI / ilişkili terimler | Gerektiği kadar |
| H4–H6 | Derin hiyerarşi | İsteğe bağlı | Gerektiğinde |
Yaygın hatalar:
- H1 yerine CSS ile büyütülmüş div veya p kullanmak
- Her sayfada aynı H1 (örneğin hep şirket adı)
- Görsel amaçlı H2 (büyük font istendiğinde H2’ye atlamak)
- H1’den H3’e atlamak (H2’yi atlamak)
Görsel SEO: Teknik Optimizasyon
Görsel Format Karşılaştırması
| Format | Boyut | Tarayıcı Desteği | İdeal Kullanım |
|---|---|---|---|
| JPEG | Referans (%100) | Evrensel | Fotoğraf |
| PNG | Büyük (PNG-24) | Evrensel | Şeffaflık gerektiren |
| WebP | JPEG’den %25–35 küçük | Tüm modern tarayıcılar | Fotoğraf ve grafik |
| AVIF | WebP’den %20 küçük | Çoğu modern tarayıcı | En iyi sıkıştırma |
| SVG | Vektör, boyutsuz | Evrensel | İkon, logo |
| GIF | Büyük | Evrensel | Video yerine AVIF/WebP |
Görsel yükleme best practice:
<!-- Responsive görsel (srcset + sizes) -->
<img
src="gorsel-800.webp"
srcset="gorsel-400.webp 400w, gorsel-800.webp 800w, gorsel-1200.webp 1200w"
sizes="(max-width: 768px) 100vw, 800px"
alt="Açıklayıcı alt metin buraya"
width="800"
height="500"
loading="lazy"
>
<!-- Hero görseli (fetchpriority - lazy DEĞIL) -->
<img
src="hero.webp"
alt="Hero görsel açıklaması"
width="1440"
height="600"
fetchpriority="high"
>
İç Bağlantı Mimarisi
Otorite Akışı (PageRank Distribution)
İç bağlantı yapısı, site içi otorite dağılımını belirler. Ana sayfadan en önemli sayfalara bağlantı vermek onların sıralama gücünü artırır.
| Bağlantı Türü | Otorite Akışı | SEO Değeri | Kullanım |
|---|---|---|---|
| Navigasyon menüsü | Yüksek (site geneli) | Yüksek | Tüm önemli sayfalar |
| Breadcrumb | Orta (hiyerarşi) | Orta | Kategori ve ürün |
| İçerik içi bağlantı | Yüksek (bağlamsal) | Çok yüksek | İlgili içerikler |
| Footer bağlantısı | Düşük (tekrar eden) | Düşük | Yardımcı sayfalar |
| Sidebar | Orta (tekrar eden) | Orta | İlgili içerik |
Anchor text stratejisi:
| Anchor Text Türü | Örnek | İdeal Kullanım Oranı |
|---|---|---|
| Exact match | ”web tasarım fiyatları” | %10–20 |
| Partial match | ”web tasarım konusunda” | %20–30 |
| Branded | ”Onur Öztürk’ün blogu” | %15–25 |
| Generic | ”buraya tıklayın”, “bu makale” | En az, mümkünse kaçın |
| URL | siteniz.com/… | Yalnızca gerektiğinde |
Schema Markup Stratejisi
Schema Türleri ve SEO Faydaları
| Schema Türü | Sağlayabileceği Zengin Sonuç | Zorunlu Özellikler | İdeal Sayfa |
|---|---|---|---|
| Organization | Knowledge Panel | name, url, logo | Ana sayfa |
| LocalBusiness | Haritalar entegrasyonu | name, address, phone | İletişim, ana sayfa |
| BreadcrumbList | Breadcrumb SERP görünümü | item, position | Tüm sayfalar |
| Article/BlogPosting | Haber carousel, author bilgisi | headline, author, datePublished | Blog yazıları |
| FAQPage | FAQ accordion SERP | question, answer | SSS bölümleri |
| Product | Fiyat, stok, puan SERP | name, price, availability | Ürün sayfaları |
| Service | Hizmet bilgisi | name, description, provider | Hizmet sayfaları |
| HowTo | Adım adım işlem | step, name, text | Kılavuz içerikler |
| Review/Rating | Yıldız puanı SERP | ratingValue, reviewBody | Yorum sayfaları |
Teknik uygulama: Schema markup için JSON-LD formatını tercih edin (Microdata veya RDFa yerine). JSON-LD, sayfa yapısına dokunmadan <script> etiketi içinde uygulanabilir.
JavaScript ve SEO: Dikkat Edilecekler
JavaScript Render Türleri Karşılaştırması
| Render Türü | Açıklama | SEO Uyumu | Framework |
|---|---|---|---|
| SSR (Server-Side Rendering) | Sunucuda HTML üretilir | Mükemmel | Next.js, Nuxt.js |
| SSG (Static Site Generation) | Derleme zamanında HTML | Mükemmel | Next.js, Astro, Gatsby |
| CSR (Client-Side Rendering) | Tarayıcıda render | Sorunlu | React, Vue (varsayılan) |
| ISR (Incremental Static Regen.) | Periyodik yenileme | İyi | Next.js |
| Hybrid | SSR + SSG karışık | İyi | Next.js, Nuxt.js |
CSR (Client-Side Rendering) SEO sorunu: React veya Vue ile sadece CSR kullanan siteler, Googlebot’un JavaScript’i işlemedeki gecikme nedeniyle içeriğin geç veya eksik indekslenmesiyle karşılaşabilir. Bu sorun SSR veya SSG ile çözülür.
Teknik SEO Denetim Araçları
| Araç | Ücretsiz/Ücretli | Güçlü Yönü | Kullanım |
|---|---|---|---|
| Google Search Console | Ücretsiz | Gerçek Google verisi | Sürekli izleme |
| PageSpeed Insights | Ücretsiz | Core Web Vitals | Hız analizi |
| Lighthouse | Ücretsiz | Kapsamlı denetim | Geliştirme ortamı |
| Screaming Frog | Ücretsiz (500 URL) / Ücretli | Site tarama | Teknik SEO audit |
| Ahrefs Site Audit | Ücretli | Kapsamlı SEO sorunları | Aylık denetim |
| GTmetrix | Ücretsiz/Ücretli | Hız raporu + waterfall | Hız analizi |
| Mobile-Friendly Test | Ücretsiz | Mobil uyumluluk | Kontrol |
| Rich Results Test | Ücretsiz | Schema doğrulama | Schema kontrolü |
Sık Yapılan SEO+Tasarım Hataları
| Hata | Etki | Çözüm |
|---|---|---|
| Tüm site CSR (React SPA) | Gecikmiş/eksik indeksleme | SSR/SSG’ye geçiş |
| Hero görsel background-image CSS | LCP ölçülemiyor | img elementine geçiş |
| Font boyutu görselde gömülü | Google okuyamıyor | HTML + CSS metin |
| Çok fazla thin content sayfası | Dilute quality | Noindex veya birleştir |
| Eksik viewport meta | Mobil uyum yok | Meta viewport ekle |
| Tüm görseller lazy loaded | Hero gecikmesi | Hero’ya fetchpriority=“high” |
| Infinite scroll (pagination yok) | Bot taramaz | URL tabanlı pagination |
| Büyük modal popup (mobil) | Google penalti riski | Boyutu küçült veya cihaza göre gizle |
Sıkça Sorulan Sorular
Tasarım güzel ama Google’da görünmüyorsam ne yapmalıyım? Önce Google Search Console’u kontrol edin: sayfalar indekslenmiş mi? Hangi sorgularda görünüyorsunuz? Crawl hataları var mı? Sorun genellikle teknik alanda ortaya çıkar.
WordPress SEO uyumlu mudur? WordPress iyi bir altyapı sunar. Ancak tema ve eklenti seçimi büyük fark yaratır. Astra veya GeneratePress gibi hafif temalar + Yoast/Rank Math kombinasyonu güçlü bir temel sağlar.
Sayfa hızım düşükse ne yapmalıyım? Google PageSpeed Insights ile sorun kaynağını bulun. Genellikle sıralamayla: (1) optimize edilmemiş görseller → WebP dönüşümü, (2) render-blocking JS → defer, (3) yavaş hosting → CDN veya daha iyi hosting.
Tek sayfalık React uygulaması SEO için uygun mu? Yalnızca CSR ile çalışan React uygulamaları SEO için sorunlu. Next.js veya Remix ile SSR/SSG’ye geçmek veya pre-rendering hizmeti kullanmak gerekir.
Her sayfada ayrı meta title zorunlu mu? Evet. Duplicate title, hangi sayfanın hangi sorgu için sıralanacağını Google’ın ayırt etmesini zorlaştırır ve sitenin kalitesi hakkında olumsuz sinyal verir.
Schema markup eklemek garanti sıralama getirir mi? Hayır. Schema markup zengin sonuç (rich result) kazanma şansı verir ama doğrudan sıralama faktörü değildir. Zengin sonuçlar CTR’yi artırır.
Görsel alt etiketi neden önemlidir? İki sebep: (1) Görme engelli kullanıcılar için ekran okuyucu erişilebilirliği. (2) Google’ın görseli anlaması için metin ipucu; görsel SEO ve alaka düzeyi için katkı sağlar.
SEO uyumlu web tasarım, estetikten ödün vermeden teknik mükemmeliyeti bir araya getirmektir. Site yayına alınmadan bu kararların doğru alınması; sonradan yapılacak düzeltmelere kıyasla çok daha az maliyet ve kayıp sıralama riski demektir.
İlgili yazılar: Arama Motoru Optimizasyonu | Web Tasarım Hizmetleri | WordPress SEO Uzmanı
