SEO Uyumlu Web Tasarımı Nedir? Teknik Kontrol Listesi

SEO Yayın: 26 Eylül 2026 10 dk okuma Emrah Yedekci

SEO uyumlu web tasarımı nedir?

SEO uyumlu web tasarımı, bir sitenin görsel tasarımıyla arama motorlarının o siteyi bulma, okuma ve anlama biçimini aynı anda gözeten tasarım yaklaşımıdır. "Site bitince SEO yaptırırız" cümlesi yaygın ama pahalı bir yanlıştır: taranabilirlik, URL yapısı, başlık hiyerarşisi ve sayfa hızı tasarım kararlarının içine gömülüdür. Sonradan düzeltilmeleri, baştan doğru kurulmalarından çok daha zahmetlidir.

Bu yazı bir kontrol listesidir. Her madde, Google'ın veya W3C'nin kamuya açık dokümanlarına dayanır; yazının sonundaki Kaynaklar bölümünde hepsinin bağlantısı var. Sekiz başlık altında toplandı ve sonunda yayına almadan önce tek tek işaretleyebileceğiniz bir liste bulunuyor.

1. Teknik temel: taranabilirlik ve indekslenebilirlik

Bir sayfa Google tarafından alınamıyorsa, üzerindeki hiçbir çalışmanın arama tarafında karşılığı olmaz. Google bu asgari koşulları Google Arama Temelleri — teknik gereksinimler başlığı altında topluyor. Tasarım aşamasında etkilenen kalemler:

• robots.txt: Geliştirme sırasında konan Disallow: / satırının yayında kaldığı projeler şaşırtıcı derecede yaygındır. Yayın günü kontrol listesine koyun.
• noindex etiketi: Test ortamından kopyalanan <meta name="robots" content="noindex"> aynı şekilde unutulur.
• XML site haritası: Yalnızca indekslenmesini istediğiniz, 200 döndüren, canonical URL'leri içermeli.
• Canonical: Her sayfa kendi tercih edilen adresini işaret etmeli. Aynı içeriğin www'li, www'siz, http'li, sonunda eğik çizgi olan ve olmayan hâlleri tek bir adrese yönlenmeli.
• JavaScript bağımlılığı: Ana içerik yalnızca tarayıcıda JavaScript çalıştıktan sonra oluşuyorsa risk alırsınız. Metin, bağlantı ve başlıkların sunucudan gelen HTML'de bulunması en güvenli yoldur.
• URL yapısı: Kısa, Türkçe karakter içermeyen, tire ile ayrılmış, anlamlı adresler kurun. URL'ler yayından sonra değişirse 301 yönlendirmesi zorunludur.

2. Site hızı ve Core Web Vitals

Sayfa deneyimi ölçülebilir hâle geldiğinden beri hız bir zevk meselesi olmaktan çıktı. Core Web Vitals üç metrikten oluşur ve eşikler web.dev Web Vitals dokümanı tarafından şöyle tanımlanır:

Google, bu metriklerin arama sonuçlarındaki rolünü Core Web Vitals ve Google arama sonuçları sayfasında açıklıyor: sayfa deneyimi tek başına içerik kalitesinin yerini almaz, ancak benzer yararlılıktaki sayfalar arasında fark yaratır.

Tasarım kararlarının hıza etkisi

• Hero görselleri: Sayfanın en üstündeki büyük görsel çoğu sitede LCP öğesidir. Boyutunu küçültmek, modern formata (WebP/AVIF) çevirmek ve tembel yüklemeden muaf tutmak en yüksek getirili tek müdahaledir.
• Yazı tipleri: Her ek yazı tipi ailesi ve ağırlığı ayrı bir indirme demektir. font-display: swap kullanılmazsa metin görünmeyen bir pencere oluşur.
• Boyutsuz görsel ve reklam alanları: Genişlik ve yükseklik belirtilmemiş her öğe, yüklendiğinde altındaki içeriği iterek CLS üretir. width/height niteliklerini veya aspect-ratio'yu boş bırakmayın.
• Eklenti yığını: Slider, animasyon, sohbet balonu, üç ayrı analitik ve iki piksel bir araya geldiğinde INP tahmin edilenden çok daha hızlı bozulur. Her betiği "gerçekten gerekli mi" diye sorgulayın.
• Sonradan eklenen bantlar: Çerez bandı, kampanya duyurusu veya bildirim çubuğu içeriğin üstüne ittirerek değil, üzerine binerek gelmelidir.

3. Mobil uyum

Google sayfaları mobil sürümleriyle değerlendirir. Bu, mobilde gizlenen bir içeriğin pratikte var olmadığı anlamına gelir. Tasarım tarafında dikkat edilecekler:

• Aynı içerik her iki sürümde de bulunmalı; mobilde "yer yok" diye metin silinmemeli. Gerekirse açılır-kapanır bölümlerle (<details> gibi) gizlenmeli — içerik HTML'de kalır.
• Yatay kaydırma olmamalı. Sabit genişlikli tablo, uzun URL ve taşan görseller en sık nedenlerdir; tabloları kaydırılabilir bir kapsayıcıya alın.
• Dokunma hedefleri parmak için yeterli büyüklükte ve aralıkta olmalı.
• user-scalable=no kullanmayın; yakınlaştırmayı engellemek hem erişilebilirlik hem kullanılabilirlik sorunudur.
• Formlarda doğru type ve autocomplete değerlerini kullanın; telefon alanında sayısal klavye açılmalı.

4. Bilgi mimarisi ve başlık hiyerarşisi

Başlıklar bir sayfanın içindekiler tablosudur. Hem tarayıcı yazılımları hem ekran okuyucular hem de yapay zekâ destekli arama sistemleri sayfayı bu iskeletle anlar.

• Her sayfada tek bir H1 bulunmalı ve sayfanın ana konusunu söylemeli.
• Seviyeler atlanmamalı: H1'den sonra H3 gelmemeli. Bu çok yaygın bir hatadır ve genellikle "bu başlık küçük görünsün" diye seviye değiştirmekten kaynaklanır. Boyut CSS'in işidir, seviye yapının.
• Başlıklar dekoratif amaçla kullanılmamalı; büyük görünmesi istenen bir metin başlık etiketiyle işaretlenmemelidir.
• Menü derinliği üç tıklamayı geçmemeli; her önemli sayfaya anasayfadan en fazla üç tıklamada ulaşılabilmeli.
• İç bağlantılarda bağlantı metni anlamlı olmalı. "Buraya tıklayın" yerine hedefi anlatan metin kullanın.

Nasıl kontrol edilir?

Tarayıcının geliştirici konsolunda şu satır, sayfadaki tüm başlıkları sırasıyla listeler; atlama varsa hemen görürsünüz:

document.querySelectorAll('h1,h2,h3,h4,h5,h6').forEach(b => console.log(b.tagName, b.textContent.trim().slice(0,60)))

5. İçerik kalitesi ve E-E-A-T

Tasarım, içeriğin yerini tutmaz. Google'ın yararlı, güvenilir, insan odaklı içerik oluşturma dokümanı, içeriği değerlendirirken "kim, nasıl, neden" sorularına açık cevap verilmesini ister: içeriği kim yazdı, nasıl üretildi, neden var. Bu, tasarımda da karşılığı olan bir istektir:

• Yazar bilgisi görünür olmalı. Blog yazılarında yazar adı, unvanı ve profil bağlantısı bulunsun. Bu sayfanın altındaki yazar kutusu bunun bir örneğidir.
• Yayın ve güncelleme tarihi gösterilmeli. Teknik içerikte tarih, güvenilirliğin doğrudan bir parçasıdır.
• İddialar kaynağa bağlanmalı. Sayı veriyorsanız nereden aldığınızı yazın; dış bağlantı sitenizi zayıflatmaz.
• Kurum kimliği doğrulanabilir olmalı. Adres, telefon, vergi bilgileri ve ekip sayfası; hem kullanıcı hem değerlendirme açısından güven sinyalidir.
• İlk elden deneyim anlatılmalı. Herkesin yazdığını tekrar eden bir sayfanın ayırt edici bir değeri yoktur.

6. Yapısal veri (schema.org)

Yapısal veri, sayfadaki bilgiyi makinelerin kesin olarak okuyabileceği bir biçimde tekrar ifade etmektir: bu bir hizmet, bu onun fiyatı, bu kurumun adresi, bu yazının yazarı. Google'ın yapısal veriye giriş dokümanı, bunun neden zengin sonuçlara zemin hazırladığını anlatır; sözlüğün kendisi ise schema.org üzerinde tanımlıdır.

Kurumsal bir sitede tipik olarak kullanılan türler

7. Erişilebilirlik

Erişilebilirlik bir SEO tekniği değildir; ancak erişilebilir bir sayfanın yapısı, makineler için de daha okunaklıdır. Referans standart, W3C'nin WCAG 2 yönergeleri belgesidir; başarı ölçütleri A, AA ve AAA seviyelerinde tanımlanır ve kurumsal projelerde yaygın hedef AA seviyesidir.

• Her anlamlı görselde açıklayıcı alt metni; dekoratif görsellerde boş alt="".
• Metin ile arka plan arasında yeterli renk kontrastı. Açık gri üzerine beyaz metin, tasarımda hoş görünse de okunmaz.
• Klavyeyle gezilebilirlik: Tab ile tüm etkileşimli öğelere ulaşılabilmeli ve odak halkası görünür olmalı.
• Form alanlarının her biri bir <label> ile eşleşmeli; yalnızca placeholder yeterli değildir.
• Bilgi yalnızca renkle aktarılmamalı; "kırmızı alanları doldurun" yerine metinle de belirtin.
• Sayfa dili <html lang="tr"> ile belirtilmeli.

8. Yapay zekâ aramaları: GEO ve AEO için gerçekten işe yarayanlar

Arama sonuçlarının yapay zekâ özetleriyle geldiği bir dönemde, "GEO" ve "AEO" başlıkları altında pek çok yöntem dolaşıma girdi. Google'ın konuya ayırdığı yapay zekâ optimizasyon kılavuzu dokümanı bu konuda beklenenden nettir: özel bir numara yoktur, temel SEO çalışmaları geçerliliğini korur.

Kılavuzun işe yaramaz dediği şeyler

• llms.txt benzeri dosyalar eklemek.
• Yapay zekâya özel işaretleme veya gizli talimatlar koymak.
• İçeriği yapay zekâ için yeniden yazmak, minik parçalara bölmek.
• Sorgu varyasyonlarını yakalamak için birbirine çok benzeyen çok sayıda sayfa üretmek — bu ayrıca ölçekli içerik kötüye kullanımı politikasına girer.

İşe yarayan şeyler

• Başka yerde bulunmayan, ilk elden bilgi ve deneyim içeren içerik.
• Sorunun cevabını sayfanın en üstünde, tek paragrafta net vermek.
• Anlamlı HTML: doğru başlık sırası, gerçek tablolar, gerçek listeler.
• Standart yapısal veriyle sayfadaki bilgiyi açıkça ifade etmek.
• Kurum, yazar, tarih ve kaynak bilgisini görünür kılmak.
• Teknik gereksinimleri karşılamak: taranabilirlik, hız, mobil uyum.

Kısacası yapay zekâ için ayrı bir site kurulmuyor; iyi kurulmuş bir site hem klasik sonuçlarda hem yapay zekâ özetlerinde daha iyi temsil ediliyor.

Yayına almadan önce kontrol listesi

Aşağıdaki listeyi yayın gününde tek tek işaretleyin. Maddelerin çoğu beş dakikadan kısa sürer; atlandığında haftalarca fark edilmez.

• robots.txt canlı sürümde Disallow: / içermiyor.
• Hiçbir yayın sayfasında noindex kalmamış.
• sitemap.xml güncel ve Search Console'a gönderildi.
• Her sayfada tek H1 var, başlık seviyeleri atlanmıyor.
• Her sayfanın özgün title ve meta description değeri var.
• Canonical etiketleri doğru; www/https ve eğik çizgi varyasyonları 301 ile tek adrese gidiyor.
• 404 sayfası özelleştirildi ve gerçekten 404 durum kodu döndürüyor.
• Tüm anlamlı görsellerde alt metni var; görseller WebP/AVIF ve boyutlandırılmış.
• Görsel ve iframe'lerde width/height tanımlı (CLS).
• Mobilde yatay kaydırma yok, yakınlaştırma engellenmemiş.
• Formlar gerçekten e-posta gönderiyor ve label eşleşmeleri tam.
• SSL kurulu, karışık içerik (http kaynak) uyarısı yok.
• Yapısal veri sayfadaki görünür içerikle örtüşüyor ve hata vermiyor.
• Çerez yönetimi ve KVKK aydınlatma metni yayında; ölçüm etiketleri onaya bağlı.
• Analitik ve Search Console kurulu, hedef/dönüşüm tanımlı.

Bu listenin tamamı Webtilian projelerinde yayın öncesi standart kontroldür. Kendi sitenizde nereden başlayacağınızdan emin değilseniz iletişim sayfasından ücretsiz bir ön inceleme talep edebilir, paket kapsamlarını paketler sayfasında karşılaştırabilirsiniz.

Sıkça sorulan sorular

İlgili yazılar

• Web Tasarım Ajansı Nedir, Nasıl Seçilir?Web Tasarım · 9 dk okuma
• Kurumsal Web Tasarım Rehberi: Sitede Ne Olmalı, Süreç Nasıl İşler?Web Tasarım · 9 dk okuma
• Web Sitesi İçin Nelere Dikkat Etmeliyim?Web Tasarım · 6 dk okuma