Web Tasarımında SEO Altyapısı Nasıl Kurulur?

Sayfa şablonlarının hangi HTML öğeleriyle kurulduğu, adreslerin nasıl oluşturulduğu, menünün taranabilir bağlantılardan oluşup oluşmadığı ve sayfanın ne kadar hızlı açıldığı, sonradan düzeltilmesi pahalı kararlardır. SEO uyumlu web tasarım, bu kararları arama motorlarının ve yapay zekâ tabanlı yanıt sistemlerinin içeriği bulabileceği, okuyabileceği ve doğru anlayabileceği biçimde vermek demektir.

Aşağıda bu altyapıyı beş katmanda ele alıyoruz: sayfanın anlamsal iskeleti, başlık ve adres yapısı, iç bağlantılar, hız ve mobil deneyim, son olarak yapılandırılmış veri ve ölçüm. Her katmanda tasarım ya da yazılım ekibine verilecek somut kararları ve yayından önce yapılacak kontrolleri bulabilirsiniz.

Semantik HTML

Semantik HTML, her içeriğin anlamına uygun öğeyle işaretlenmesidir: site başlığı için header, menü için nav, ana içerik için main, bağımsız bir yazı için article, yan içerik için aside, alt bilgi için footer. Başlıklar görsel boyut için değil, içerik hiyerarşisi için kullanılır; her sayfada konusunu anlatan tek bir H1'in, altında da sırasıyla H2 ve H3 başlıkların bulunması hem arama motorları hem de ekran okuyucu kullanan ziyaretçiler için anlaşılır bir düzen kurar. Listeler liste, tablolar tablo olarak yazılır; görsellere içeriği anlatan alternatif metin eklenir.

Bağlantılar gerçek a öğeleri ve href adresleriyle kurulmalıdır. Yalnızca JavaScript tıklama olayıyla çalışan bir menü, ziyaretçi için sorunsuz görünse de arama motoru botları için bir çıkmaz sokaktır. Aynı dikkat içerik için de geçerlidir: Önemli metinlerin sunucudan gelen HTML içinde yer alması gerekir. Google JavaScript'i işleyebilse de bu işlem gecikebilir; yapay zekâ hizmetlerine ait tarama botlarının bir kısmı ise JavaScript'i hiç çalıştırmayabilir. Kontrol için sayfanın kaynak kodunu açıp ana metnin orada görünüp görünmediğine ve Search Console'daki URL denetimi aracının oluşturduğu HTML'e bakılabilir.

Başlık ve URL yapısı

Başlık etiketi (title), arama sonucunda görünen tıklanabilir satırdır; sayfadaki H1 ile aynı olmak zorunda değildir ama aynı konuyu anlatmalıdır. Her sayfanın başlığı benzersiz olmalı, sayfanın ana konusu başa yazılmalı, marka adı ise genellikle sona eklenmelidir. Uzun başlıklar sonuçlarda kesilir. Açıklama etiketi doğrudan bir sıralama etkeni değildir, ancak sonuçtaki tıklamayı etkiler; arama motoru gerekirse onu sayfadaki başka bir metinle değiştirebilir.

Adresler kısa, okunabilir ve kalıcı olmalıdır: küçük harf, kelimeler arasında kısa çizgi, gereksiz parametre ya da kimlik numarası olmadan. Türkçe karakterlerin nasıl yazılacağına bir kez karar verip tüm sitede aynı kuralı uygulamak gerekir. İçerik yönetim sistemi, her sayfanın başlığını, açıklamasını ve adresini editörün değiştirebileceği biçimde kurulmalı; bu alanlar boş bırakıldığında da anlamlı bir varsayılan üretmelidir. Tarama aracıyla alınan bir raporda eksik, yinelenen ya da çok uzun başlıkların listelenmesi, bu bölümün kontrol noktasıdır.

İç bağlantılar

İç bağlantılar, arama motorlarının sayfaları keşfetme yolu ve hangi sayfanın daha önemli olduğunu anlama biçimidir. Tasarım aşamasında dört bağlantı katmanı planlanır: ana menü, konum yolu (breadcrumb), içerik içindeki bağlamsal bağlantılar ve ilgili içerik blokları. Bir ana konu sayfasının alt konu sayfalarına, alt sayfaların da ana sayfaya ve birbirine bağlanması, sitenin konu otoritesini görünür kılar.

Bağlantı metni, gideceği sayfayı anlatmalıdır; “buraya tıklayın” yerine “kurumsal web sitesi rehberi” gibi açıklayıcı ifadeler kullanılır. Hiçbir sayfadan bağlantı almayan yetim sayfalar, ana sayfadan çok derinde kalan içerikler ve filtre ya da sayfalama yüzünden neredeyse sınırsız sayıda adres üreten yapılar, altyapıda önlenmesi gereken sorunlardır. Konunun ayrıntıları için iç linkleme rehberimize göz atabilirsiniz.

Hız ve mobil deneyim

Google, siteleri değerlendirirken ağırlıklı olarak mobil sürümü esas alır. Bu yüzden mobil sürümden çıkarılan ya da kısaltılan içerik, arama motoru açısından hiç yokmuş gibi sayılabilir; mobil ve masaüstü sürümlerde aynı ana içerik bulunmalıdır. Dokunma alanları yeterince büyük, yazılar yakınlaştırmadan okunabilir olmalı ve sayfayı kaplayan açılır pencereler içeriğe erişimi engellememelidir.

Hız, tasarım kararlarının doğrudan sonucudur. Ana görselin doğru boyutta ve WebP ya da AVIF gibi modern bir biçimde sunulması, ekranın altındaki görsellerin geç yüklenmesi, yazı tipi ailesi ve ağırlık sayısının sınırlı tutulması, görsellere ve reklam alanlarına önceden yer ayrılması ve sohbet eklentisi, harita gibi üçüncü taraf betiklerinin ölçülü kullanılması belirleyicidir. Tasarım aşamasında sayfa ağırlığı ve üçüncü taraf betik sayısı için bir üst sınır belirlemek, sonradan yapılan hız çalışmalarından daha ekonomiktir. Ölçütlerin ayrıntısını Core Web Vitals yazımızda bulabilirsiniz.

Schema ve ölçüm

Yapılandırılmış veri (schema), sayfadaki bilginin ne olduğunu makinelerin okuyabileceği biçimde anlatır. JSON-LD biçimiyle kurum bilgisi için Organization, yerel işletmeler için LocalBusiness, konum yolu için BreadcrumbList, yazılar için Article, ürünler için Product türleri kullanılabilir. Yalnızca sayfada görünen bilgi işaretlenmelidir; görünmeyen bir içeriği işaretlemek yönergelere aykırıdır. İşaretlemenin doğruluğu Google'ın Zengin Sonuçlar Testi ve Schema.org doğrulayıcısıyla kontrol edilir.

Ölçüm altyapısı da yayından önce hazır olmalıdır: Search Console mülkü doğrulanır, XML site haritası gönderilir, Google Analytics 4 ve etiket yönetimi kurulur. Yeniden tasarımda eski sitenin trafik ve sıralama verileri kayıt altına alınır ki yayından sonra karşılaştırma yapılabilsin. İlk haftalarda dizine ekleme raporu, 404 hataları ve Core Web Vitals raporu düzenli izlenir; yayına bağlı sorunlar çoğunlukla bu dönemde ortaya çıkar.

Uygulamada sık yapılan hatalar

• Başlık etiketlerini yazı boyutu ayarlamak için kullanmak, H1'i logoya ya da slogana vermek.
• Önemli içeriği yalnızca tarayıcıda çalışan JavaScript ile yüklemek.
• Menüyü href içermeyen, yalnızca tıklama olayıyla çalışan öğelerle kurmak.
• Tüm sayfalarda aynı başlık etiketini ve açıklamayı bırakmak.
• Sayfada görünmeyen bilgiler için yapılandırılmış veri eklemek.

Çamlıca yaklaşımı

Çamlıca Reklam Ajansı olarak SEO gereksinimlerini tasarım başlamadan önce şablon düzeyinde yazıyor, geliştirme sırasında da her şablonu bu listeye göre test ediyoruz. Web projelerinin kapsamını web tasarım ve yazılım sayfamızda, tüm uzmanlık alanlarımızı hizmetler sayfamızda inceleyebilirsiniz.

Altyapı, üzerine gelecek içerik ve kampanyalarla anlam kazanır. Bu nedenle projeyi gerektiğinde SEO, AEO ve GEO; yapay zekâ, CRM ve otomasyon; dijital reklam ve performans pazarlaması ekiplerimizle birlikte yürütüyoruz. Arama görünürlüğünün yapay zekâ yanıtlarına uzanan boyutu için SEO, AEO ve GEO arasındaki farkı, sitenizden gelen taleplerin yönetimi için CRM'in ne olduğunu anlatan yazılarımıza göz atabilirsiniz.