SEO Uyumlu Web Tasarım: Tasarımcının SEO Kontrol Listesi

SEO uyumlu web tasarım, sıralamayı etkileyen kararları wireframe aşamasında vermek demektir: taranabilir menü bağlantıları, sade URL yapısı, tek ve anlamlı H1, mobilde eksiksiz içerik ve LCP ≤ 2,5 sn, INP ≤ 200 ms, CLS ≤ 0,1 hedefli bir arayüz. Bu kararlar sonradan eklenemez, tasarımla birlikte gelir.

Çoğu ekip SEO'yu sitenin yayına çıkmasından sonra başlayan bir iş olarak görüyor. Oysa arama motorunun sayfanızı nasıl okuyacağını belirleyen şeylerin büyük kısmı Figma dosyasında şekilleniyor. Menü bir JavaScript düğmesiyle mi açılıyor, hero görseli 3 MB mı, mobilde bazı bölümler gizleniyor mu? Bu soruların cevabını tasarım ekibi veriyor.

Tablo iç açıcı değil. HTTP Archive'ın Web Almanac 2025 SEO bölümüne göre Haziran 2025'te mobil sayfaların yalnızca %48'i Core Web Vitals'ın üç eşiğini birden geçiyor. Sayfaların %66'sında boş olmayan bir H1 var; yani her üç sayfadan biri ana başlığı eksik yayında.

Bu rehberi SEO uzmanları için değil, tasarımcılar ve tasarım ekibiyle çalışan işletmeler için hazırladık. SEO hizmeti satın alırken neye bakacağınızı ayrı bir yazıda anlattık: SEO hizmeti alırken nelere dikkat edilmeli. Burada odak, tasarım kararlarının sıralamaya etkisi.

İçindekiler

• SEO Uyumlu Web Tasarım Ne Demek?
• Tasarım Kararları Sıralamayı Nasıl Etkiler?
• 1. Bilgi Mimarisi ve Menü Yapısı
• 2. Başlık Hiyerarşisi: Görsel Boyut ile Semantik Seviyeyi Ayırın
• 3. Mobil Öncelikli Tasarım: Akordeon ve Sekmeler
• 4. Hız: Core Web Vitals Tasarım Masasında Başlar
• 5. Görsel Adlandırma, Alt Metin ve Formatlar
• 6. Schema (Yapılandırılmış Veri): 2026'da Neler Değişti?
• 7. Erişilebilirlik ve Okunabilirlik
• Tasarımcının SEO Kontrol Listesi
• Yeniden Tasarımda SEO Kaybını Önlemek
• Sıkça Sorulan Sorular

SEO Uyumlu Web Tasarım Ne Demek?

SEO uyumlu web tasarım, görsel dili arama motorlarının okuyabildiği bir yapının üzerine kurmaktır. Güzel görünen ama taranamayan bir site, vitrini sokağa değil arka bahçeye bakan bir mağazaya benzer.

Bu yaklaşım üç katmanda çalışır:

• Yapı: Sayfaların nasıl gruplandığı, menüde neyin nerede durduğu, URL'lerin nasıl göründüğü.
• Kod çıktısı: Tasarımın HTML'e dönüştüğünde hangi başlık etiketlerini, bağlantı türlerini ve görsel özniteliklerini ürettiği.
• Deneyim: Sayfanın ne kadar hızlı açıldığı, mobilde nasıl davrandığı, yüklenirken kayıp kaymadığı.

Tasarımcı bu katmanların hepsine dokunuyor. Geliştirici tasarımı birebir koda döküyorsa, tasarımdaki her karar SEO sonucuna da birebir yansıyor.

Önemli bir ayrım: SEO uyumlu web tasarım, anahtar kelime doldurmak veya her sayfaya rastgele metin eklemek değildir. Google'ın SEO başlangıç rehberi meta keywords etiketini kullanmadığını ve anahtar kelime doldurmanın spam politikalarına aykırı olduğunu açıkça yazıyor.

Tasarım Kararları Sıralamayı Nasıl Etkiler?

Tasarım kararlarının etkisini somut görmek için en sık karşılaştığımız eşleşmeleri tabloya döktük. Sol sütundaki kararların hepsini tasarım ekibi verir.

Tablodaki satırların ortak noktası şu: hiçbiri yayından sonra küçük bir eklentiyle düzelmiyor. Menü mimarisi, görsel stratejisi ve başlık sistemi tasarım dosyasında yanlış kurulduysa, düzeltme yeniden tasarım anlamına geliyor.

1. Bilgi Mimarisi ve Menü Yapısı

Bilgi mimarisi, sitenin iskeletidir. Hangi sayfanın ana menüde durduğu, hangisinin iki tık derinde kaldığı, Google'a da hangi sayfanın daha önemli olduğunu anlatır.

İyi bir bilgi mimarisi için tasarıma başlamadan önce üç iş yapın:

1. Sayfa envanteri çıkarın. Mevcut sitede trafik alan sayfaları listeleyin; yeni yapıda hiçbirini sahipsiz bırakmayın.
2. Konu kümeleri kurun. Her hizmet sayfası, onu destekleyen blog yazıları ve SSS içerikleriyle bir küme oluşturur.
3. Derinliği sınırlayın. Önemli sayfalar ana sayfadan en fazla üç tıkla ulaşılabilir olmalı.

Menü öğeleri gerçek bağlantı olmalı

Google'ın bağlantı rehberine göre Google genellikle yalnızca href özniteliği olan <a> elemanlarını tarayabiliyor. Script olaylarıyla çalışan "bağlantı gibi davranan" öğelerden URL'leri güvenilir şekilde çıkaramıyor.

Tasarımcı için pratik karşılığı şu: mega menü, kart grid'i veya "tümünü gör" butonu tasarlarken, bu öğelerin geliştiricide gerçek bir sayfa adresine gideceğini not düşün. Tüm kartı tıklanabilir yapan tasarımlarda bile bağlantı metni anlamlı kalmalı.

Bağlantı metni de tasarım kararıdır. "Devamını oku" veya "Tıklayın" yerine hedef sayfayı anlatan kısa bir ifade seçin. Hem kullanıcı hem Google, bağlantının nereye gittiğini metinden anlar.

URL yapısını tasarım aşamasında belirleyin

URL, çoğu zaman site haritasıyla birlikte tasarım belgesinde doğar. Google'ın URL yapısı rehberi kelimeleri alt çizgi yerine tire ile ayırmayı öneriyor. Tek sayfalık uygulamalarda içerik değiştirmek için # parçası kullanmamayı da ayrıca vurguluyor.

Türkiye'de sık gördüğümüz bir sorun Türkçe karakterli URL'ler. Google UTF-8 karakterleri destekliyor, ancak /ürünler/çelik-kapı gibi bir adresi paylaştığınızda adres %C3%BC gibi kodlanmış karakterlere dönüşüyor. Bu yüzden /urunler/celik-kapi gibi ASCII bir kalıbı tasarım aşamasında standartlaştırmanızı öneriyoruz.

2. Başlık Hiyerarşisi: Görsel Boyut ile Semantik Seviyeyi Ayırın

Tasarımcıların en sık yaptığı hata, başlık etiketini yazı boyutuna göre seçmektir. "Bu metin büyük görünsün, H1 olsun" yaklaşımı, bir sayfada üç H1 veya hiç H1 olmamasıyla sonuçlanıyor.

Doğru yöntem, tipografi sistemini etiketlerden bağımsız kurmaktır. Tasarım sisteminizde "Display L", "Başlık M" gibi görsel stiller tanımlayın. Hangi metnin H1, hangisinin H2 olacağını ise içerik hiyerarşisi belirlesin.

Google bu konuda şaşırtıcı derecede esnek. SEO başlangıç rehberi, başlıkların semantik sırada olmasının ekran okuyucular için çok değerli olduğunu, ancak Google Arama açısından sıranın bozulmasının önemli olmadığını yazıyor. Yani H2'den sonra H4 gelmesi sizi cezalandırmaz.

O zaman neden dikkat edelim? Çünkü başlıklar sayfanın konusunu hem Google'a hem kullanıcıya özetliyor. Google, arama sonucundaki başlık bağlantısını oluştururken <title> etiketinin yanında sayfadaki başlıklara da bakıyor. Her sayfada konuyu net söyleyen tek bir H1 ve bölümleri anlatan H2'ler, en güvenli düzen.

3. Mobil Öncelikli Tasarım: Akordeon ve Sekmeler

Google siteleri mobil sürümleri üzerinden dizine ekliyor. Masaüstünde olup mobilde olmayan içerik, Google'ın gözünde yoktur.

Google'ın mobil öncelikli dizine ekleme rehberi tasarımcılara net bir izin veriyor: mobilde farklı bir düzen kullanabilir, içeriği akordeonlara veya sekmelere taşıyabilirsiniz. Şart, içeriğin masaüstüyle eşdeğer kalması.

Aynı rehber bir sınır da çiziyor: kaydırma, tıklama veya yazma gibi kullanıcı etkileşimi gerektiren içeriği Google yüklemiyor. Bu nedenle akordeon içeriği sayfa açılırken HTML'de hazır durmalı. Tıklanınca sunucudan çekilen içerik taranmaz.

Mobil tasarımda şu kontrolleri yapın:

• Masaüstündeki her metin bloğunun mobilde bir karşılığı var mı?
• Yapılandırılmış veri ve başlıklar iki sürümde de aynı mı?
• Yazı boyutu zum gerektirmeden okunabiliyor mu? Web Almanac 2025'e göre mobil sayfaların yaklaşık %92'si 16 px ve üzeri okunaklı yazı boyutu kullanıyor.
• Dokunma hedefleri parmakla rahatça seçilebiliyor mu?

Mobil uyumluluğun temellerini mobil uyumlu web sitesi rehberimizde ayrıntılı anlattık.

4. Hız: Core Web Vitals Tasarım Masasında Başlar

Core Web Vitals üç metrikten oluşuyor ve eşikleri web.dev üzerinde tanımlı: LCP 2,5 saniye veya altı, INP 200 milisaniye veya altı, CLS 0,1 veya altı. Google ölçümü sayfa yüklemelerinin 75. yüzdelik dilimine göre yapıyor.

Bu metriklerin her biri doğrudan bir tasarım kararına bağlı. Web Almanac verisine göre mobilde en çok zorlanılan metrik LCP: Haziran 2025'te mobil sayfaların %62'si iyi LCP skoruna sahipti.

LCP: hero görseli ve yazı tipleri

LCP, ekrandaki en büyük içerik öğesinin ne zaman göründüğünü ölçer. Çoğu kurumsal sitede bu öğe hero görseli veya hero başlığıdır.

Tasarımcı olarak yapabilecekleriniz:

• Hero'da otomatik dönen slider yerine tek ve güçlü bir görsel kullanın.
• Görseli WebP veya AVIF formatında, gerçek görüntülenme boyutunda teslim edin.
• İki yazı ailesi ve üç-dört ağırlıkla sınırlı kalın; her ek font dosyası yüklemeyi geciktirir.

Geliştiriciye de not düşün: web.dev'in LCP optimizasyon rehberi LCP görselinin asla tembel yüklenmemesi (lazy-load) gerektiğini, bunun her zaman gecikmeye yol açtığını yazıyor.

CLS: kaymayan düzen

CLS, sayfa yüklenirken öğelerin ne kadar kaydığını ölçer. Okumaya başladığınız paragrafın bir anda aşağı kayması, bu metriğin kötü olduğunu gösterir.

web.dev'in CLS rehberi görsel ve video öğelerine her zaman width ve height verilmesini veya CSS aspect-ratio ile alan ayrılmasını öneriyor. Tasarımda her görsel alanının sabit oranını belirlemek, bu işi geliştirici için kolaylaştırır. Çerez bildirimi, duyuru bandı ve reklam alanları için de yer ayırın.

INP: ağır etkileşimler

INP, kullanıcının tıklamasına sayfanın ne kadar hızlı yanıt verdiğini ölçer. Ağır animasyonlar, her kaydırmada tetiklenen efektler ve çok sayıda üçüncü taraf widget bu metriği bozar. Hareket tasarımını anlamlı geçişlerle sınırlayın.

Hız optimizasyonunun teknik tarafını Core Web Vitals rehberimizde adım adım ele aldık.

5. Görsel Adlandırma, Alt Metin ve Formatlar

Görseller tasarımcının alanıdır, ama arama motoru için de ciddi bir bilgi kaynağıdır. Google'ın görsel SEO rehberi alt metni görsele meta veri sağlayan en önemli öznitelik olarak tanımlıyor. Google alt metni, bilgisayarlı görü algoritmaları ve sayfa içeriğiyle birlikte kullanarak görselin konusunu anlıyor.

Aynı rehber dosya adının da Google'a "çok hafif ipuçları" verdiğini söylüyor. Etkisi küçük, maliyeti sıfır.

Tasarım teslim paketinde şu kuralları standart hale getirin:

• Dosya adı: hero-celik-kapi-montaj.webp gibi, tireyle ayrılmış açıklayıcı adlar.
• Alt metin: Görselin ne gösterdiğini bir cümleyle anlatın; anahtar kelime listesi yazmayın.
• Dekoratif görseller: Süs amaçlı görsellerde alt metni boş bırakın, ekran okuyucu atlasın.
• Metin içeren görseller: Başlık, fiyat veya kampanya metnini görselin içine gömmeyin; HTML'de yazın.
• Format: Google Arama BMP, GIF, JPEG, PNG, WebP, SVG ve AVIF formatlarını destekliyor.

Durum sahada hâlâ zayıf. Web Almanac 2025'e göre ortanca sayfada görsellerin %15,38'inin alt metni boş. Görselleri tasarım aşamasında adlandırmak, bu açığı kapatmanın en ucuz yolu.

6. Schema (Yapılandırılmış Veri): 2026'da Neler Değişti?

Yapılandırılmış veri, sayfadaki bilgiyi Google'ın makine tarafından okunabilir biçimde anlamasına yardım eder. Web Almanac 2025'e göre ana sayfaların %43'ü JSON-LD formatını kullanıyor.

Ancak son bir yılda Google'ın zengin sonuç politikası ciddi biçimde değişti:

• Google, Haziran 2025'teki arama sonuçlarını sadeleştirme duyurusunda Book Actions, Course Info, Claim Review, Estimated Salary, Learning Video, Special Announcement ve Vehicle Listing türlerini aşamalı olarak kaldırdı.
• Google'ın Search Central güncelleme kaydına göre FAQ zengin sonucu 7 Mayıs 2026'dan itibaren Google aramada gösterilmiyor; Google ilgili dokümantasyonu da Haziran 2026'da kaldırdı.

Bu, SSS bölümlerinin değersizleştiği anlamına gelmiyor. Kullanıcılar ve yapay zeka asistanları için net soru-cevap blokları hâlâ işe yarıyor. Değişen tek şey, Google sonuçlarındaki genişleyen SSS görünümünün artık olmaması.

Tasarımcıyı ilgilendiren kısım şu: schema, sayfada görünen içeriği tarif eder. Organization, LocalBusiness, Product, Breadcrumb ve Article gibi türleri doldurabilmek için adres, telefon, fiyat, yazar ve tarih bilgilerinin tasarımda görünür bir yeri olmalı. Görünmeyen bilgiyi işaretlemek, tutarsızlık yaratır.

7. Erişilebilirlik ve Okunabilirlik

Erişilebilirlik ve SEO aynı temele basıyor: anlamlı başlıklar, açıklayıcı bağlantılar, alt metinler ve okunabilir kontrast. Ekran okuyucunun anladığı sayfayı genelde arama motoru da anlıyor.

Tasarımda özellikle şunlara dikkat edin:

• Metin ve arka plan arasında yeterli kontrast.
• Yalnızca renkle aktarılan bilgi olmaması (örneğin hata mesajı sadece kırmızı çerçeve değil).
• Klavyeyle gezilebilen menü ve form akışı.
• Kısa paragraflar, açık ara başlıklar ve taranabilir listeler.

Erişilebilirlik standartlarının ayrıntısını web erişilebilirliği rehberimizde bulabilirsiniz.

Tasarımcının SEO Kontrol Listesi

Aşağıdaki listeyi proje fazlarına göre düzenledik. Her fazın sonunda geliştiriciye teslim etmeden önce kontrol edin.

Lansman öncesi teknik adımlar için ücretsiz SEO lansman kontrol listemizi kullanabilirsiniz. Title ve description metinlerinin arama sonucunda nasıl görüneceğini ise SERP önizleme aracımızla test edebilirsiniz.

Yeniden Tasarımda SEO Kaybını Önlemek

SEO uyumlu web tasarım en çok yeniden tasarım projelerinde sınanıyor. Yeni tasarım daha güzel olabilir, ama eski sitenin kazandığı sıralamaları korumak ayrı bir iş.

Yeniden tasarımda en sık görülen kayıplar şunlardan geliyor:

• URL'lerin değişip eski adreslerin 301 yönlendirmesiz bırakılması.
• Sıralama alan uzun sayfaların "sade görünüm" uğruna kısaltılması.
• İç bağlantıların yeni menüde kaybolması.
• Yeni tasarımın eskisinden daha ağır görseller ve scriptler taşıması.

Örnek bir senaryo düşünün: Konya'daki bir tarım makineleri üreticisi, ürün sayfalarını tek bir "Ürünlerimiz" galerisine topluyor. Galeri şık görünüyor, ama her ürünün kendi sayfası ve teknik açıklaması yok. Eskiden "pancar sökme makinesi" aramasında görünen sayfa artık mevcut değil. Tasarım kararı, doğrudan trafik kaybına dönüşüyor.

Bu riski yönetmenin adımlarını web sitesi yenileme rehberimizde ayrıntılı anlattık.

Sıkça Sorulan Sorular

SEO uyumlu web tasarım nedir?

SEO uyumlu web tasarım, sitenin bilgi mimarisini, başlık yapısını, görsellerini ve performansını arama motorlarının kolayca tarayıp anlayacağı şekilde planlamaktır. Ekip bu kararları yayından sonra değil, wireframe aşamasında verir.

Web tasarımı SEO'yu gerçekten etkiler mi?

Evet. Menünün taranabilir bağlantılarla kurulması, mobilde içeriğin eksiksiz olması ve Core Web Vitals değerleri doğrudan tasarım kararlarına bağlıdır. Taranamayan bir menü, alt sayfaların Google tarafından keşfedilmesini engelleyebilir.

Bir sayfada birden fazla H1 kullanmak sorun mu?

Google, başlıkların sırasının arama açısından önemli olmadığını belirtiyor. Yine de sayfanın konusunu net anlatan tek bir H1 kullanmak, hem kullanıcı hem ekran okuyucu hem de arama motoru için en anlaşılır düzendir.

Mobilde içeriği akordeon içine gizlemek SEO'ya zarar verir mi?

Hayır, içerik sayfa açılırken HTML'de hazırsa zarar vermez. Google, mobilde akordeon ve sekme kullanımına açıkça izin veriyor; ancak tıklanınca sunucudan yüklenen içeriği taramıyor.

Core Web Vitals için hedef değerler nelerdir?

İyi bir deneyim için LCP 2,5 saniye veya altında, INP 200 milisaniye veya altında, CLS ise 0,1 veya altında olmalıdır. Google bu değerleri sayfa yüklemelerinin 75. yüzdelik dilimine göre ölçer.

FAQ schema 2026'da hâlâ işe yarıyor mu?

Google, FAQ zengin sonucunu 7 Mayıs 2026'dan itibaren arama sonuçlarında göstermiyor. SSS bölümleri kullanıcılar ve yapay zeka asistanları için hâlâ değerli, ancak Google'da genişleyen soru-cevap görünümü artık oluşmuyor.

Görsel dosya adları SEO'yu etkiler mi?

Google, dosya adının görselin konusu hakkında çok hafif ipuçları verdiğini söylüyor. Asıl önemli öznitelik alt metindir; yine de açıklayıcı, tireli dosya adları hiçbir ek maliyet olmadan bağlam sağlar.

SEO uyumlu site için hazır tema yeterli mi?

Hazır temalar temel etiketleri doğru kurabilir, ancak ağır slider'lar, gereksiz eklentiler ve şablon başlık yapıları sık görülen sorunlardır. Temayı seçmeden önce demo sayfasının mobil Core Web Vitals değerlerini ve başlık yapısını kontrol edin.

SEO uyumlu web tasarım, tasarım ekibine ek bir yük değil, doğru sırada verilmiş kararların toplamıdır. Bilgi mimarisini, başlık sistemini, görsel stratejisini ve mobil düzeni ilk günden SEO gözüyle kurduğunuzda, yayından sonra "SEO'yu sonradan ekleme" diye bir iş kalmaz.

Yeni bir site veya yeniden tasarım planlıyorsanız web tasarım hizmetimizi ve SEO hizmetimizi inceleyebilir, projenizi konuşmak için bizimle iletişime geçebilirsiniz.