SEO Uyumlu Web Tasarım Nedir? Kriterler ve Kontrol Listesi

SEO uyumlu web tasarım; bir web sitesinin yalnızca güzel görünmesini değil, önemli içeriğinin kullanıcılar ve arama motorları tarafından erişilebilir, anlaşılabilir, gezilebilir ve ölçülebilir olmasını sağlayan tasarım ve geliştirme yaklaşımıdır. Bu yaklaşım bilgi mimarisini, mobil deneyimi, semantik HTML'yi, taranabilir bağlantıları, performansı, içerik sunumunu ve teknik yayın kontrollerini tasarım sürecinin parçası yapar.

SEO uyumlu olmak bir sıralama garantisi değildir. Güzel renkler, özgün bir görünüm veya hareketli öğeler tek başına sayfayı üst sıraya taşımaz. Tasarım kararları; içeriği gizlediğinde, bağlantıları taranamaz yaptığında, mobil sürümü eksilttiğinde veya sayfayı ağırlaştırdığında arama görünürlüğünü zorlaştırabilir. Doğru hedef, “SEO özelliği eklemek” değil; arama ve kullanıcı görevlerini engellemeyen, test edilebilir bir sistem kurmaktır.

SEO Uyumlu Web Tasarım Nedir, Ne Değildir?

Google'ın SEO Başlangıç Rehberi, mantıklı site organizasyonu ve açıklayıcı URL'lerin kullanıcıların ve arama motorlarının sayfalar arasındaki ilişkiyi anlamasına yardımcı olabileceğini açıklar. (Google SEO Starter Guide) Bu nedenle SEO uyumu, tasarım bittikten sonra başlık ve açıklama alanlarını doldurmaya indirgenemez.

Tasarımdan Önce Arama Görevini ve Sayfa Haritasını Belirleyin

Wireframe çizmeden önce hedef kitlenin hangi soruyu hangi sayfa türünde çözmesi gerektiğini yazın. “Web tasarım” gibi geniş bir konu; hizmet sayfası, fiyatlandırma rehberi, ajans seçimi, teknik kontrol listesi ve eğitim içeriği gibi farklı niyetlere ayrılabilir. Bu görevler tek URL'de karıştırıldığında hem kullanıcı kararı hem de içerik sahipliği belirsizleşir.

Her öncelikli sayfa için şu alanları kaydedin:

• Sayfanın tek temel amacı ve hedef kullanıcı görevi
• İkincil sorular ve başka bir sayfaya aktarılacak konular
• Sayfa türü: hizmet, kategori, ürün, karşılaştırma, rehber veya destek
• Menü, kategori, breadcrumb ve bağlamsal iç link içindeki yeri
• Başarı ölçümü: bilgi bulma, nitelikli form, satın alma veya başka bir görev
• İçerik ve teknik güncellemenin sorumlusu

Bu çalışma, yalnız anahtar kelime listesi değildir. Aynı niyeti hedefleyen birden fazla sayfa varsa güncelleme, birleştirme veya ayrıştırma kararı verin. Yeni proje kapsamını sayfa bazında kurmak için web sitesi ihtiyaç dokümanı rehberindeki içerik ve işlev alanlarını kullanabilirsiniz.

Bilgi Mimarisi, URL ve İç Linkler Nasıl Tasarlanmalı?

Site ağacı şirket içi departman adlarını kopyalamak zorunda değildir. Kullanıcının hizmeti, ürünü veya cevabı bulma yolu esas alınmalıdır. Menü bütün sayfaları taşımak için değil, öncelikli bölümleri anlaşılır biçimde göstermek için kullanılır; ayrıntılı ilişkiler kategori sayfaları, breadcrumb ve içerik içi bağlantılarla tamamlanır.

URL kısa olmak zorunda değildir; kalıcı, açıklayıcı ve yönetilebilir olmalıdır. Yıl veya kampanya gibi değişkenleri ancak sayfanın kimliğinin gerçek parçasıysa kullanın. Tasarım yenilemesinde çalışan bir URL yalnız “daha güzel slug” için değiştirilmemelidir. Değişiklik gerekiyorsa eski URL, en yakın eşdeğer yeni URL'ye 301 ile yönlendirilir.

Google, sayfaları bulmak için bağlantıları kullanır ve genellikle href niteliği bulunan standart  bağlantılarını tarayabildiğini belirtir. Bağlantı metni de hedefi açıklamalıdır. (Google link best practices) “Tıklayın” yerine bağlamı anlatan doğal anchor kullanın; aynı kelimeyi site genelinde mekanik biçimde tekrar etmeyin.

Semantik HTML ve Başlık Hiyerarşisi Neden Tasarım Kararıdır?

Bir metnin büyük ve kalın görünmesi onu teknik olarak başlık yapmaz. Sayfanın ana bölümleri main, nav, header ve footer gibi uygun yapılarla; başlıklar ise anlamlı bir sıra içinde işaretlenmelidir. W3C, başlıkların içerik organizasyonunu ilettiğini ve yardımcı teknolojiler tarafından sayfa içi gezinmede kullanılabildiğini açıklar. (W3C WAI Headings)

Başlık seviyesini görsel boyuta göre değil, içerik ilişkisine göre seçin. Butonu bağlantı, bağlantıyı buton gibi taklit etmeyin. Form alanlarına görünür etiket, hatalara açıklayıcı mesaj, görsellere amaca uygun alternatif metin verin. Bu kurallar yalnız SEO için değil; klavye, ekran okuyucu ve farklı cihaz kullanan insanların görevi tamamlayabilmesi içindir.

Mobil Tasarımda İçerik ve Bağlantı Eşdeğerliğini Koruyun

Responsive tasarım masaüstü sayfayı daraltmak değildir. Okuma sırası, menü, filtre, tablo, form, sabit öğeler ve dokunma alanları dar ekranda yeniden değerlendirilmelidir. Ancak mobil sadeleştirme, önemli metinleri ve bağlantıları tamamen kaldırmak anlamına gelmemelidir.

Google mobil sürümün içeriğini indeksleme ve sıralama için kullandığını, responsive tasarımı uygulaması ve bakımı kolay bir model olarak önerdiğini belirtir. Mobil ve masaüstünde ana içerik eşdeğer olmalı; kullanıcı etkileşimi gerektiren bir hareket gerçekleşmeden birincil içerik erişilebilir kalmalıdır. (Google mobile-first indexing best practices)

Mobil kontrolde yalnız ekran görüntüsüne bakmayın. Menüden hedef sayfaya gidin, formu hatalı ve doğru verilerle gönderin, yatay taşmayı, odak sırasını, açılır alanları, çerez katmanını ve dil geçişini gerçek görevlerle test edin.

JavaScript ve Etkileşimler Taranabilir İçeriği Engellememeli

JavaScript kullanmak başlı başına SEO sorunu değildir. Sorun; sayfanın ana metninin, bağlantılarının veya meta bilgilerinin hata veren bir istemci işlemesine bağımlı kalmasıdır. Tasarım sistemi, içerik yüklenemediğinde veya bir script engellendiğinde kullanıcının ne göreceğini de tanımlamalıdır.

Google JavaScript çalıştırabilse de tarayıcı erişimi ve oluşturma sürecinde dikkate alınması gereken farklılıklar bulunduğunu açıklar. (Google JavaScript search troubleshooting) Kritik içerik ilk HTML'de veya güvenilir sunucu çıktısında bulunmalı; gerçek bağlantılar href taşımalı; sonsuz kaydırma için taranabilir sayfalama yolu düşünülmeli; URL Denetleme ile oluşturulmuş çıktı kontrol edilmelidir.

Performans Tasarım Briefine Nasıl Girer?

Hero video, büyük görseller, özel yazı tipleri, animasyon kütüphaneleri, üçüncü taraf etiketler ve yoğun bileşenler tasarım kararlarıdır; performans etkileri son aşamada yalnız geliştiricinin sorunu sayılamaz. Briefte öncelikli sayfalar, ana içerik öğesi, kabul edilebilir medya bütçesi ve ölçüm koşulları tanımlanmalıdır.

Core Web Vitals; yükleme için LCP, etkileşim yanıtı için INP ve görsel kararlılık için CLS ölçümlerini kullanır. web.dev önerilen “iyi” eşikleri LCP için 2,5 saniye veya daha az, INP için 200 ms veya daha az, CLS için 0,1 veya daha az olarak açıklar ve değerlendirmeyi sayfa yüklemelerinin 75. yüzdelik dilimine bağlar. (web.dev Web Vitals)

Bu değerler tasarım garantisi değildir. Laboratuvar testi geliştirme sırasında karşılaştırma sağlar; saha verisi gerçek kullanıcı koşullarını gösterir ve yeterli veri oluşması zaman alabilir. Ana sayfa skorunu bütün siteye genellemeyin. Hizmet, yazı, kategori, ürün ve form gibi temsilî şablonları mobil ve masaüstünde ayrı izleyin.

Görsel ve Medya Kullanımında SEO Uyumlu Kriterler

• Görseli yerleşimde gösterileceği boyuta uygun üretin; gereksiz büyük dosya göndermeyin.
• Uygun durumda WebP veya AVIF, responsive kaynaklar ve doğru sıkıştırma kullanın.
• Genişlik ve yükseklik bilgisiyle yerleşim alanını ayırarak beklenmedik kaymayı azaltın.
• İlk ekrandaki ana görseli koşulsuz lazy-load etmeyin; ekran altındaki medyayı gecikmeli yükleyin.
• Bilgi taşıyan görsele açıklayıcı alt metin yazın; dekoratif görseli anlamsız anahtar kelimelerle doldurmayın.
• Görsel içine gömülü metni tek bilgi kaynağı yapmayın; gerekli içeriği HTML olarak da sunun.
• Video için poster, boyut, kontrol, altyazı ve yükleme stratejisini belirleyin.

“Daha çok görsel daha iyi SEO” diye bir kural yoktur. Görsel, kullanıcının kararını veya açıklanan süreci destekliyorsa değerlidir. Sayfayı ağırlaştıran ve içerik tekrarına dönüşen dekorasyon azaltılmalıdır.

Title, Meta Açıklama, Canonical ve Yapılandırılmış Veri

Her önemli sayfanın amacını açıklayan benzersiz bir title ve görünür H1 bulunmalıdır. Meta açıklama sayfanın faydasını dürüstçe özetler; tıklama garantisi veya doğrudan sıralama vaadi değildir. Sosyal paylaşım görseli, canonical, robots talimatları ve çok dilli sayfalarda karşılıklı hreflang şablon düzeyinde ele alınmalıdır.

Yapılandırılmış veri sayfanın görünür içeriğiyle eşleşmelidir. Google, doğru işaretlemenin zengin sonuç görünümünü garanti etmediğini ve gizli ya da yanıltıcı içerik işaretlenmemesi gerektiğini belirtir. (Google structured data guidelines) Tasarımda görünmeyen SSS'leri FAQ şemasına eklemek veya gerçek olmayan değerlendirmeleri işaretlemek doğru değildir.

Çok Dilli ve Yenilenen Sitelerde Tasarım Kararları

Çok dilli bir sitede yalnız menüyü çevirmek yetmez. Her dil için ayrı ve kalıcı URL, karşılıklı dil geçişi, yerelleştirilmiş başlıklar, eşdeğer ana içerik ve doğru hreflang ilişkisi gerekir. Mobil menüde dil karşılığını bulamayan kullanıcı ile yanlış eşleşen arama motoru aynı mimari sorunun farklı sonuçlarını yaşar. Ayrıntılı plan için çok dilli web sitesi rehberini inceleyebilirsiniz.

Site yenilemesinde eski URL envanteri çıkarılmadan yeni menü ve sayfa ağacı kesinleştirilmemelidir. Korunabilen adresleri koruyun; birleşen veya taşınan sayfalar için bire bir 301 haritası hazırlayın; her eski sayfayı ana sayfaya göndermeyin. Tasarım, içerik ve yönlendirme aynı yayın planında test edilmelidir.

SEO Uyumlu Web Tasarım Kabul Matrisi

Aşağıdaki matris Kumsal Ajans içerik yenileme ve web teslim kontrolü için oluşturulan pratik bir karar aracıdır. Her satırın sahibi ve kanıtı proje başında belirlenirse “SEO uyumlu” ifadesi ölçülebilir bir teslim kapsamına dönüşür.

Yayın Öncesi Kontrol Listesi

• Öncelikli sayfaların amacı ve hedeflediği görev birbirinden ayrılmış mı?
• Önemli URL'lere menü, kategori veya bağlamsal iç linkten ulaşılabiliyor mu?
• Başlık sırası ve sayfa bölgeleri anlamlı HTML ile uygulanmış mı?
• Mobilde ana içerik, meta bilgiler ve bağlantılar masaüstüyle eşdeğer mi?
• JavaScript hatasında kritik içerik ve bağlantılar erişilebilir kalıyor mu?
• Hero, font, video ve üçüncü taraf scriptlerin performans etkisi test edilmiş mi?
• Görsellerin boyutu, formatı, dimensions ve alt metni uygun mu?
• Title, meta description, canonical, robots ve hreflang doğru URL'yi gösteriyor mu?
• Yapılandırılmış veri görünür içerikle eşleşiyor mu?
• Eski URL'ler için bire bir koruma veya 301 kararı var mı?
• Form, arama, filtre, dil geçişi ve 404 senaryoları mobilde test edilmiş mi?
• Yayın sonrası ölçüm ve güncelleme sorumlusu belli mi?

Sık Yapılan Hatalar

• Görsel estetiği doğrudan sıralama faktörü gibi sunmak
• SEO'yu tasarım bittikten sonra eklenecek meta alanları sanmak
• Anahtar kelimeyi başlık, buton ve alt metinlerde mekanik biçimde tekrarlamak
• Mobilde uzun içeriği ve önemli bağlantıları tamamen kaldırmak
• Menü öğelerini yalnız JavaScript tıklamasına bağlamak
• Büyük video ve animasyonları performans bütçesi olmadan eklemek
• Tek bir PageSpeed skorunu bütün site ve gelecek için garanti saymak
• Schema veya sitemap kullanımını indeksleme ve zengin sonuç garantisi olarak sunmak
• Yenilemede eski URL'leri kaybetmek veya hepsini ana sayfaya yönlendirmek
• Canlı yayın sonrası ölçüm ve bakım sahibini tanımlamamak

Sonuç

SEO uyumlu web tasarımın özü; arama görevini, içerik yapısını, erişilebilir arayüzü ve teknik yayın koşullarını aynı proje içinde yönetmektir. Başarı yalnız sitenin güzel görünmesi veya bir araçtan yüksek puan alması değildir. Önemli sayfaların bulunabilmesi, doğru amaçla anlaşılması, mobilde tamamlanabilmesi ve değişikliklerin ölçülebilir biçimde yönetilmesidir.

Proje tekliflerini değerlendirirken bu kriterleri somut teslimatlara dönüştürmek için web sitesi teklif karşılaştırma puan kartını; yayın sonrası SEO ve teknik bakım sınırını ayırmak için web sitesi bakımı ve SEO farkı rehberini kullanabilirsiniz.