“Önce siteyi yaptıralım, sonra SEO’ya bakarız.” Bu yaklaşım, dünyanın en yaygın ve en pahalı dijital pazarlama hatasıdır.

SEO odaklı web tasarım, arama motoru optimizasyonunu tasarım ve geliştirme sürecinin ayrılmaz parçası olarak ele alır. Sonradan ekleme değil, başından entegre etme. Sonuç: hem kullanıcıyı hem de Google’ı memnun eden, organik trafik çeken ve dönüştüren bir dijital varlık.

Bu rehber, SEO odaklı web tasarımın her boyutunu — teknik altyapıdan site mimarisine, sayfa hızından içerik yapısına, UX sinyallerinden mobil optimizasyona — kapsamlı biçimde ele alır.

SEO ile Web Tasarımın Kesişimi

SEO ve web tasarım birbiriyle çelişmez — birbirini tamamlar. İyi bir web tasarımı SEO’nun zaten ihtiyaç duyduğu şeyleri sağlar: hızlı yükleme, net içerik hiyerarşisi, iyi kullanıcı deneyimi, temiz kod yapısı.

SEO’yu etkileyen tasarım kararları:

Tasarım Kararı	SEO Etkisi
Hero görsel boyutu	LCP (Largest Contentful Paint)
JavaScript ağırlığı	Crawlability, INP
Heading hiyerarşisi	İçerik yapısı, anahtar kelime sinyali
URL yapısı	Link equity, anlaşılırlık
İç linkleme	PageRank dağılımı
Mobil uyumluluk	Mobile-first indexleme
CLS (düzen kayması)	Core Web Vitals sıralama faktörü
Sayfa yapısı	Featured snippet fırsatı

Teknik SEO Altyapısı: Temel Gereksinimler

Semantik HTML

Semantik HTML hem kullanıcıya anlam katar hem de Google’ın içeriği anlamasını kolaylaştırır.

<!-- Kötü: anlamsız div dizisi -->
<div class="header">
  <div class="logo">...</div>
  <div class="nav">...</div>
</div>
<div class="main">
  <div class="article">
    <div class="h1">Başlık</div>
    <div class="p">İçerik</div>
  </div>
</div>

<!-- İyi: semantik HTML5 -->
<header>
  <a href="/" class="logo">...</a>
  <nav aria-label="Ana menü">...</nav>
</header>
<main>
  <article>
    <h1>Başlık</h1>
    <p>İçerik</p>
  </article>
</main>
<footer>...</footer>

Google, <header>, <main>, <footer>, <article>, <section>, <nav> gibi semantic etiketleri içerik yapısını anlamak için kullanıyor.

Heading Hiyerarşisi

<!-- Her sayfada tek H1 -->
<h1>Anahtar Kelime İçeren Ana Başlık</h1>

<!-- H2: Ana bölümler -->
<h2>İkincil Anahtar Kelime Bölüm Başlığı</h2>

<!-- H3: Alt bölümler -->
<h3>Spesifik Konu Başlığı</h3>

<!-- H4-H6: Detaylar için, ihtiyaç varsa -->

Yaygın hatalar:

Birden fazla H1 — her sayfada yalnızca 1 tane
H1 atlanıp H2’den başlamak
Görsel boyut için heading kullanmak (CSS kullanın)
Heading hiyerarşisini atlamak (H1’den H3’e geçmek)

URL Yapısı

URL SEO’nun en temel bileşenlerinden biri.

Kural 1: Anlamlı, okunabilir URL:

✓ domain.com/hizmetler/web-tasarim/
✗ domain.com/page?id=123&cat=5

Kural 2: Küçük harf, tire ile ayrılmış:

✓ domain.com/seo-odakli-web-tasarim/
✗ domain.com/SEO_Odakli_Web_Tasarim/

Kural 3: Türkçe karakter kullanma:

✓ domain.com/seo-odakli-web-tasarim/
✗ domain.com/seo-odaklı-web-tasarım/

Kural 4: Kısa ve öz:

✓ domain.com/web-tasarim/
✗ domain.com/hizmetlerimiz/dijital/web/tasarim-hizmetleri-istanbul/

Kural 5: Anahtar kelime içermeli:

✓ domain.com/kurumsal-web-tasarim/
✗ domain.com/hizmet-1/

Meta Etiketler

Title Tag:

<title>Kurumsal Web Tasarım İstanbul | Profesyonel Web Sitesi — Şirket Adı</title>

50–60 karakter
Ana anahtar kelime önde
Her sayfada benzersiz
Marka adı sonunda

Meta Description:

<meta name="description" content="İstanbul'da kurumsal web tasarım hizmeti. 5 yıllık deneyim, SEO uyumlu ve dönüşüm odaklı web siteleri. Ücretsiz keşif görüşmesi için iletişime geçin.">

150–160 karakter
Tıklamayı teşvik eden içerik
Anahtar kelime dahil
Her sayfada benzersiz

Canonical Tag:

<link rel="canonical" href="https://domain.com/kurumsal-web-tasarim/">

Duplicate content riskini önler; URL parametreleri, www/non-www varyasyonları için kritik.

Yapılandırılmış Veri (Schema Markup)

Schema.org yapılandırılmış verisi Google’ın içeriği anlamasını ve zengin sonuç (rich result) göstermesini sağlar.

WebSite Schema (tüm siteler için):

{
  "@context": "https://schema.org",
  "@type": "WebSite",
  "name": "Şirket Adı",
  "url": "https://domain.com",
  "potentialAction": {
    "@type": "SearchAction",
    "target": "https://domain.com/search?q={search_term_string}",
    "query-input": "required name=search_term_string"
  }
}

LocalBusiness Schema (yerel işletmeler için):

{
  "@context": "https://schema.org",
  "@type": "LocalBusiness",
  "name": "Şirket Adı",
  "image": "https://domain.com/logo.png",
  "address": {
    "@type": "PostalAddress",
    "streetAddress": "Adres",
    "addressLocality": "İstanbul",
    "addressCountry": "TR"
  },
  "telephone": "+90-xxx-xxx-xxxx",
  "openingHoursSpecification": [{
    "@type": "OpeningHoursSpecification",
    "dayOfWeek": ["Monday","Tuesday","Wednesday","Thursday","Friday"],
    "opens": "09:00",
    "closes": "18:00"
  }]
}

FAQPage Schema:

{
  "@context": "https://schema.org",
  "@type": "FAQPage",
  "mainEntity": [{
    "@type": "Question",
    "name": "SEO odaklı web tasarım ne kadar sürer?",
    "acceptedAnswer": {
      "@type": "Answer",
      "text": "Kapsama göre 4–12 hafta arasında değişir..."
    }
  }]
}

Site Mimarisi ve SEO

Site mimarisi Google’ın sitenizi nasıl taradığını ve hangi sayfaların önemli olduğunu anlamasını doğrudan etkiler.

Düz (Flat) vs Derin Mimari

Derin mimari (Kötü için SEO):

Ana sayfa → Kategoriler → Alt Kategoriler → Alt-alt kategoriler → İçerik
(4–5 tıklama)

Düz mimari (SEO için iyi):

Ana sayfa → Kategoriler → İçerik
(2–3 tıklama)

Kural: Her sayfa ana sayfadan maksimum 3 tıklamayla ulaşılabilir olmalı.

İç Linkleme Stratejisi

İç linkleme PageRank’i önemli sayfalara dağıtır ve kullanıcıyı yönlendirir.

Pillar-cluster (Sütun-Küme) modeli:

[Pillar Page: SEO Rehberi]
     ↕
[Teknik SEO] ← → [İçerik SEO] ← → [Link Building]
     ↕                  ↕                   ↕
[Hız Optimizasyonu] [Blog Yazma] [Backlink Analizi]

Pillar page; cluster sayfaları bağlar. Her cluster sayfası pillar’a döner. İç link ağı tematik otorite oluşturur.

Anchor text kuralları:

Hedef anahtar kelime (%25–35)
Kısmi eşleme (%30–40)
Marka/URL (%15–20)
Genel (“buradan okuyun” vb.) (%10–15)

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Ana Sayfa</a></li>
    <li><a href="/hizmetler/">Hizmetler</a></li>
    <li aria-current="page">SEO Odaklı Web Tasarım</li>
  </ol>
</nav>

Schema ile desteklenmiş breadcrumb arama sonuçlarında görünür hale gelir.

XML Sitemap

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://domain.com/</loc>
    <lastmod>2026-06-07</lastmod>
    <changefreq>weekly</changefreq>
    <priority>1.0</priority>
  </url>
  <url>
    <loc>https://domain.com/hizmetler/web-tasarim/</loc>
    <lastmod>2026-06-01</lastmod>
    <changefreq>monthly</changefreq>
    <priority>0.8</priority>
  </url>
</urlset>

Büyük siteler için sitemap index dosyası:

<sitemapindex>
  <sitemap><loc>https://domain.com/sitemap-hizmetler.xml</loc></sitemap>
  <sitemap><loc>https://domain.com/sitemap-blog.xml</loc></sitemap>
</sitemapindex>

Robots.txt

User-agent: *
Allow: /
Disallow: /wp-admin/
Disallow: /tesekkurler/
Disallow: /*?*    # Parametre URL'leri
Disallow: /arama/ # Arama sonuç sayfaları

Sitemap: https://domain.com/sitemap.xml

Sayfa Hızı ve Core Web Vitals

Core Web Vitals doğrudan Google sıralama faktörü.

LCP (Largest Contentful Paint): < 2.5 Saniye

LCP sayfadaki en büyük içerik öğesinin yüklenme süresi.

LCP optimizasyonu:

<!-- Hero görseli preload et -->
<link rel="preload" as="image" href="hero.webp" fetchpriority="high">

<!-- WebP formatında, doğru boyutta -->
<img
  src="hero.webp"
  width="1200" height="600"
  alt="Hero açıklaması"
  fetchpriority="high"
>

/* LCP öğesini CSS background ile yapma — optimize edilemez */
/* Kötü: */
.hero { background-image: url('hero.jpg'); }

/* İyi: */
/* <img> elemanı kullan */

Sunucu yanıt süresini iyileştir (TTFB):

CDN kullan (Cloudflare, BunnyCDN)
Sunucu cache’i aktif et
Veritabanı sorguları optimize et

INP (Interaction to Next Paint): < 200ms

INP kullanıcının etkileşimine (tıklama, klavye) sitenin ne kadar hızlı tepki verdiğini ölçer.

INP optimizasyonu:

// Uzun JavaScript görevlerini parçala
// Kötü: 500ms süren tek işlev
function processData(items) {
  items.forEach(item => heavyProcessing(item));
}

// İyi: yieldToMain ile parçala
async function processData(items) {
  for (const item of items) {
    await yieldToMain(); // Ana thread'i serbest bırak
    heavyProcessing(item);
  }
}

function yieldToMain() {
  return new Promise(resolve => setTimeout(resolve, 0));
}

CLS (Cumulative Layout Shift): < 0.1

Sayfa yüklenirken içeriklerin yer değiştirmesi. Kullanıcı bir butona tıklamak üzereyken buton kayıyor.

CLS sorunları ve çözümleri:

<!-- Her görsel için width/height zorunlu -->
<img src="product.jpg" width="400" height="300" alt="Ürün">

<!-- Reklam ve embed için yer tutucu -->
<div style="min-height: 250px;">
  <!-- Reklam buraya yüklenir -->
</div>

/* Font swap ile layout kaymayı azalt */
@font-face {
  font-family: 'CustomFont';
  src: url('font.woff2') format('woff2');
  font-display: swap;
  /* size-adjust ile metric uyumu */
  size-adjust: 105%;
  ascent-override: 105%;
}

Kullanıcı Deneyimi SEO Sinyalleri

Google, kullanıcıların sitenizde nasıl davrandığını sinyaller olarak kullanıyor.

Dwell Time (Sitede Geçirilen Süre)

Kullanıcı sayfada ne kadar kalıyor? Uzun dwell time = değerli içerik sinyali.

Dwell time artırma:

Derinlemesine, değerli içerik
İlgili iç linkler (kullanıcıyı başka sayfaya çekiyor)
Video ve interaktif içerik
Net içerik yapısı (scannability)

Pogo-sticking Önleme

Kullanıcı arama sonucuna tıklıyor, sitenize geliyor, geri dönüp başka sonuca tıklıyor — bu “pogo-sticking” Google’a olumsuz sinyal veriyor.

Önleme:

Arama niyetiyle eşleşen içerik (informational sorgu için bilgi, transactional için sayfa)
Above the fold’da yanıt hızlıca verilmeli
İlgi çekici, değer katan açılış paragrafı

Sayfa Terk Oranı (Bounce Rate)

GA4’te tek sayfa oturumu = kullanıcı geldi, başka sayfaya geçmeden gitti. Yüksek bounce rate tek başına SEO sinyali değil ama kullanıcı tatminsizliğini gösterebilir.

SEO Odaklı İçerik Yapısı

Hizmet Sayfası SEO Şablonu

URL: /hizmetler/seo-odakli-web-tasarim/

Title: SEO Odaklı Web Tasarım İstanbul | Organik Trafik Çeken Site — Şirket
Meta: İstanbul'da SEO odaklı web tasarım. Teknik SEO altyapısı, hız optimizasyonu ve içerik yapısıyla Google'da üst sıralara çıkın.

H1: SEO Odaklı Web Tasarım: Google'ı ve Kullanıcıyı Kazanan Site

[Giriş paragrafı - 100-150 kelime - ana anahtar kelime ilk 100 kelimede]

H2: SEO Odaklı Web Tasarım Neden Standart Tasarımdan Farklı?
  [Tablo veya liste - kolay tarama]

H2: SEO Web Tasarımında Teknik Altyapı
  H3: Sayfa Hızı Optimizasyonu
  H3: Schema Markup Uygulaması
  H3: Site Mimarisi ve URL Yapısı

H2: Sosyal Kanıt
  [Referanslar, case study, rakamlar]

H2: Süreç
  [Adım adım çalışma süreci]

H2: Sık Sorulan Sorular
  [FAQPage Schema ile]

[CTA - Teklif Al / İletişime Geç]

Blog Yazısı SEO Şablonu

URL: /blog/seo-odakli-web-tasarim-nedir/

Title: SEO Odaklı Web Tasarım Nedir? 2026 Kapsamlı Rehber
Meta: SEO odaklı web tasarım nedir, nasıl uygulanır? Teknik SEO, içerik yapısı ve performans optimizasyonu rehberi.

H1: SEO Odaklı Web Tasarım Nedir? [2026 Rehberi]

[Özet tablo — "Bu yazıda ne öğreneceksiniz?"]

H2: SEO ile Web Tasarım Neden Ayrılmaz?

H2: Teknik SEO Temelleri (Web Tasarımda)
  H3: Semantik HTML
  H3: URL Yapısı
  H3: Schema Markup

H2: Sayfa Hızı ve Core Web Vitals

H2: Site Mimarisi

H2: Sık Sorulan Sorular

H2: Sonuç

Featured Snippet Optimizasyonu

Belirli sorulara doğrudan Google arama sonucu sayfasında (SERP) verilen kutu yanıtlar.

Paragraph snippet için:

[Soru H2 olarak]
[Soruya doğrudan, kısa (40-60 kelime) yanıt paragrafı]
[Detaylı açıklama devam eder]

List snippet için:

<h2>SEO Odaklı Web Tasarımın Temel Bileşenleri</h2>
<ul>
  <li>Semantik HTML yapısı</li>
  <li>Hızlı sayfa yüklemesi</li>
  <li>Doğru URL yapısı</li>
  <li>Schema Markup</li>
  <li>Mobil uyumluluk</li>
</ul>

Table snippet için: Yapılandırılmış veri karşılaştırmaları HTML tablo olarak sunun.

Görsel SEO

Görseller Google’ın anlayabildiği ve sıralayabildiği içeriktir.

Görsel Dosya Adı

Kötü: IMG_20260607_123456.jpg
İyi: seo-odakli-web-tasarim-teknik-seo.webp

Alt Text

<!-- Boş alt text — SEO fırsatı kaçırıldı -->
<img src="hero.jpg" alt="">

<!-- Anahtar doldurmak — spam sinyali -->
<img src="hero.jpg" alt="web tasarım web tasarım istanbul seo web tasarım">

<!-- Doğru: açıklayıcı, doğal, anahtar kelime içerebilir -->
<img src="hero.jpg" alt="SEO odaklı web tasarım ekibi çalışırken İstanbul ofisinde">

Görsel Sıkıştırma

<!-- Modern format, lazy loading, boyut belirtimi -->
<img
  src="feature.webp"
  loading="lazy"
  width="800"
  height="533"
  alt="Özellik açıklaması"
>

Mobil SEO

Google mobile-first indexleme yapıyor — mobil versiyon birincil.

Mobil SEO Kontrol Listesi

[ ] Viewport meta etiketi mevcut
[ ] Text readable without zooming (16px+)
[ ] Touch targets ≥ 44px
[ ] Content wider than screen yok
[ ] Interstitials (pop-up) mobilde şart değil ise kullanma
[ ] LCP mobilde < 2.5s (masaüstünden genellikle daha zor)
[ ] Google Mobile-Friendly Test geçiliyor

Sayfa Hızı (Mobil)

Mobil kullanıcılar genellikle yavaş bağlantıda. 3G/4G senaryosunda test edin.

/* Ağır animasyonları reduced-motion tercihinde devre dışı */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

Yerel SEO ve Web Tasarım

Yerel işletmeler için web sitesi yerel SEO’yu desteklemeli.

NAP Tutarlılığı

Name, Address, Phone — tüm sayfalarda ve tüm platformlarda aynı format.

<!-- Schema ile işaretlenmiş NAP -->
<address itemscope itemtype="https://schema.org/LocalBusiness">
  <span itemprop="name">Şirket Adı</span>
  <span itemprop="streetAddress">Cadde No</span>
  <span itemprop="addressLocality">İstanbul</span>
  <span itemprop="telephone">+90-xxx-xxx-xxxx</span>
</address>

Yerel Sayfalar

Birden fazla şehirde hizmet veriyorsanız:

domain.com/istanbul/web-tasarim/
domain.com/ankara/web-tasarim/
domain.com/izmir/web-tasarim/

Her sayfada şehre özgü içerik — aynı içeriğin şehir adı değiştirilerek kopyalanması (duplicate content) değil.

SEO Odaklı Web Tasarım Araçları

Denetim Araçları

Araç	Kullanım
Google Search Console	Teknik sorunlar, indeksleme
Google PageSpeed Insights	Core Web Vitals
Screaming Frog	Kapsamlı site taraması
Ahrefs Site Audit	SEO sorunları
Google Rich Results Test	Schema doğrulama
WAVE / axe	Erişilebilirlik
GTmetrix	Performans detayı

Geliştirme Araçları

Araç	Kullanım
Chrome DevTools	Performans profilleme
Lighthouse	Kapsamlı denetim
WebPageTest	Gelişmiş performans testi
Semrush	Anahtar kelime, rakip

Sık Sorulan Sorular (SSS)

1. SEO odaklı web tasarım normal web tasarımdan pahalı mı? Ek iş yükü var: schema markup, hız optimizasyonu, SEO mimari planlama. Ama bu fark genellikle %10–20 ek maliyet demek. Sonradan “SEO iyileştirmesi” yapmanın maliyetiyle kıyaslandığında, başından doğru yapmak çok daha ucuz.

2. Web sitemi yaptırdım ama SEO çalışmıyor. Redesign şart mı? Önce teknik denetim. Bazı sorunlar (URL yapısı, schema, meta etiketler) redesign olmadan düzeltilebilir. Ama temel teknik sorunlar (mobil uyumsuzluk, yavaş hız, yanlış site mimarisi) varsa kısmi redesign gerekebilir.

3. Tek sayfa site (SPA) SEO için kötü mü? SPA (React, Vue) Google tarafından JavaScript render sonrası taranıyor. Pre-rendering veya SSR (Server-Side Rendering) olmadan tarama ve indeksleme gecikmesi var. SSR veya SSG (Astro, Next.js) ile SPA SEO’yu optimize edebilirsiniz.

4. WordPress mu Astro mu SEO için daha iyi? Her ikisi de mükemmel SEO sonucu verebilir. Astro statik site olarak varsayılan olarak hızlı — LCP avantajı. WordPress ise geniş SEO eklenti ekosistemi (Yoast, RankMath). Karar: dinamik içerik ihtiyacı ve teknik ekip kapasitesine göre.

5. Schema Markup gerçekten sıralamayı etkiliyor mu? Doğrudan sıralama etkisi tartışmalı ama zengin sonuç (rich result) CTR’ı artırıyor. Yıldız değerlendirmesi görünen sonuç genellikle %20–30 daha fazla tıklama alıyor. Daha fazla tıklama → daha fazla trafik.

6. Sitenin her sayfası için ayrı meta description zorunlu mu? Teknik olarak zorunlu değil ama güçlü tavsiye. Google genellikle kendi description üretiyor ama kontrol sizde olmalı. Her sayfa için benzersiz, tıklama oranı odaklı description yazın.

7. Core Web Vitals skorlarım kötü, ne yapmalıyım? PageSpeed Insights raporu detaylı tavsiye veriyor. Öncelik sırası: LCP için hero görsel optimizasyonu, INP için JavaScript azaltma, CLS için görsel boyutları belirleme. Lighthouse filmstrip görünümü hangi öğenin sorun çıkardığını gösterir.

8. “SEO uyumlu” iddiasındaki ajans/freelancer nasıl değerlendirilir? Somut sorular: “Son 3 projede ortalama organik trafik artışı neydi?” ve “Core Web Vitals hedefleriniz neler?” Teknik detay sorun: “Hreflang nedir, ne zaman kullanılır?” Genel “SEO uyumlu” iddiası değil, ölçülebilir sonuç ve teknik bilgi arayın.

Sonuç

SEO odaklı web tasarım, arama motoru optimizasyonunu sonradan eklenmiş bir katman değil, temel tasarım ve geliştirme prensiplerinden biri olarak ele alır.

Doğru uygulandığında:

Tasarım kararları Core Web Vitals’ı iyileştirir
Kod yapısı Google taramasını kolaylaştırır
İçerik organizasyonu anahtar kelime sinyali güçlendirir
Kullanıcı deneyimi SEO sinyallerini olumlu yönde etkiler

Başlangıç noktası: Yeni site projesi başlamadan önce SEO’yu kapsama dahil edin. Süregelen projeler için teknik SEO denetimi yapın ve önceliklendirilmiş iyileştirme planı oluşturun.

SEO odaklı web sitesi geliştirmek için iletişime geçin.