Web Geliştirmede SEO: Arama Odaklı Projeler İçin Geliştiric…

Web Geliştirmede SEO: Arama Odaklı Projeler İçin Geliştiricinin Tam Rehberi

Arama motoru optimizasyonu artık tamamlanmış bir ürüne sonradan eklenen bir pazarlama detayı değil. Modern bir web projesinde çalışan her SEO geliştiricisi için SEO kararları mimari kararlardır — erken aşamada alınır, kod tabanına işlenir ve lansmandan sonra geri almak güçtür. Bu rehber, SEO'yu web geliştirme sürecine baştan nasıl entegre edeceğinizi ele alıyor: teknik temeller, performans, structured data ve genellikle göz ardı edilen uluslararasılaştırma boyutu dahil.

SEO Neden Pazarlama Backlog'una Değil, Geliştirici İş Akışına Ait

Tarihsel olarak SEO, site yayına alındıktan sonra içerik ekibine devredilirdi. Geliştiriciler kodu yazardı; pazarlamacılar anahtar kelimeleri serpiştirirdi. Bu model artık işe yaramıyor.

Modern arama sıralaması büyük ölçüde yalnızca bir SEO geliştiricisinin kontrol edebildiği sinyallere bağlıdır:

Core Web Vitals (LCP, INP, CLS) — tarayıcıda ölçülen performans metrikleri
Crawlability — robots.txt, sitemap ve canonical tag'lerin doğru kullanımı
Structured data — sayfa markup'ına gömülmüş JSON-LD şemaları
Rendering stratejisi — sayfanın server-side rendered, statik olarak oluşturulmuş ya da yalnızca client-side olup olmadığı
URL mimarisi — slug kalıpları, trailing slash'lar, hreflang tag'leri

Bunların hiçbiri bir CMS alanında ya da meta description kutusunda yaşamaz. Bunlar kod tabanında yaşar. Geliştiriciler bunlara sahip çıkmazsa kimse çıkmaz.

Web Geliştirmede SEO'nun Teknik Temelleri

1. Rendering Stratejisi

Bir geliştiricinin SEO açısından aldığı en önemli karar, sayfaların nasıl render edileceğidir. Arama crawler'ları JavaScript yürütme konusunda gelişmiş olsa da yanılmaz değiller. Anlamlı içerik görünmeden önce birden fazla client-side fetch gerektiren bir sayfa, neredeyse her zaman eşdeğer bir server-rendered sayfanın gerisinde kalır.

Kullanım senaryosuna göre önerilen yaklaşımlar:

Sayfa Türü	Tercih Edilen Strateji	Neden
Pazarlama / landing	Static Site Generation (SSG)	En hızlı TTFB, tamamen önceden render edilmiş HTML
Blog / dokümentasyon	ISR ile SSG	Tam yeniden derleme olmadan güncel içerik
Kullanıcı dashboard'ları	Client-Side Rendering (CSR)	İndeksleme gereksinimi yok
Ürün detay sayfaları	Server-Side Rendering (SSR)	Dinamik, kişiselleştirilmiş, yine de indekslenebilir

Next.js, Nuxt, Astro ve SvelteKit gibi framework'ler bu stratejilerin hepsini destekler. Önemli olan, tüm uygulama için tek bir yaklaşımı varsayılan olarak seçmek yerine her route için bilinçli bir tercih yapmaktır.

2. Semantik HTML

Crawler'lar sayfa yapısını anlamak için HTML'yi ayrıştırır. Semantik elementler onlara açık sinyaller verir:

<article>
  <header>
    <h1>Başlıkta Birincil Anahtar Kelime</h1>
    <time datetime="2025-06-01">1 Haziran 2025</time>
  </header>
  <section>
    <h2>Alt Konu Bölümü</h2>
    <p>Destekleyici içerik...</p>
  </section>
</article>

Sıralamalara zarar veren yaygın hatalar:

<nav>, <main>, <article>, <aside> yerine <div> kullanmak
Tek bir sayfada birden fazla <h1> tag'i
Görsellerde eksik alt nitelikleri
"buraya tıklayın" gibi açıklayıcı olmayan link metinleri

3. Meta Tag'ler ve Open Graph

Her indekslenebilir sayfanın benzersiz bir <title> ve <meta name="description"> etiketine ihtiyacı vardır. Bunlar arama sonuçlarında görüntülenir ve tıklama oranlarını doğrudan etkiler. Ayrıca Open Graph tag'leri, sayfaların sosyal platformlarda paylaşıldığında nasıl göründüğünü kontrol eder.

<head>
  <title>Web Geliştirmede SEO: Tam Rehber | better-i18n</title>
  <meta name="description" content="Performans, structured data ve çok dilli optimizasyon için teknik en iyi pratiklerle web geliştirmede SEO'nun nasıl uygulanacağını öğrenin." />
  <meta property="og:title" content="Web Geliştirmede SEO: Tam Rehber" />
  <meta property="og:description" content="Arama odaklı projeler isteyen geliştiriciler için pratik bir rehber." />
  <meta property="og:type" content="article" />
</head>

En iyi pratikler:

Başlıkları 60 karakterin altında tutun
Meta description'ları 150–160 karakter arasında tutun
Sayfalar arasında başlık veya açıklama asla tekrarlamamalıdır
Filtreler, sayfalama veya URL parametrelerinden kaynaklanan yinelenen içerikleri çözmek için canonical tag kullanın

4. Structured Data (JSON-LD)

Structured data, sayfa amacını doğrudan arama motorlarına iletir ve zengin sonuçları etkinleştirir (yıldız derecelendirmeleri, SSS açılır menüleri, breadcrumb'lar, makale imzaları). Bunu doküman <head>'inde satır içi bir <script type="application/ld+json"> bloğu olarak uygulayın:

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Web Geliştirmede SEO: Geliştiricinin Tam Rehberi",
  "author": {
    "@type": "Person",
    "name": "better-i18n Editoryal Ekibi"
  },
  "datePublished": "2025-06-01",
  "publisher": {
    "@type": "Organization",
    "name": "better-i18n"
  }
}

Birden fazla sayfa türünü kapsayan SEO web geliştirme çalışmaları için; sayfa meta verilerini kabul eden ve makaleler, ürünler, SSS'ler ya da breadcrumb'lar için dinamik olarak doğru JSON-LD'yi üreten yeniden kullanılabilir bir şema fabrikası oluşturun.

5. URL Yapısı

URL'ler hem bir sıralama sinyali hem de bir kullanılabilirlik sinyalidir. Temiz ve açıklayıcı URL'ler genel olanları geride bırakır.

İyi: /blog/web-gelistirmede-seo Kötü: /blog?id=4823&ref=homepage

URL hijyeni için geliştirici kontrol listesi:

Kelime ayırıcı olarak alt çizgi değil kısa çizgi kullanın
URL'leri küçük harfle yazın; büyük harf varyantlarını yönlendirin
SEO açısından önemli URL'lerde mümkün olduğunca query string kullanmaktan kaçının
Bir URL değiştiğinde 301 redirect uygulayın
Trailing slash konusunda tutarlı bir politika belirleyin ve bunu redirect'lerle uygulayın

İyi planlanmış bir SEO için site yapısı, temiz URL'lerle başlar ve içerik hiyerarşinizin navigasyonunuza nasıl yansıdığına kadar uzanır — bu hem tarama verimliliğini hem de sıralama otoritesini etkileyen bir karardır. Her global web sitesinin uyması gereken SEO kurallarının tamamına bakmak, geliştiricilere altyapı düzeyinde neyi uygulayacakları konusunda eksiksiz bir kontrol listesi sunar.

Core Web Vitals: SEO Web Geliştirmenin Ölçülebilir Hale Geldiği Yer

Google'ın Page Experience güncellemesinden bu yana Core Web Vitals, onaylanmış bir sıralama faktörüdür. Bunlar Chrome kullanıcılarından toplanan ve tanımlanmış eşiklere göre değerlendirilen gerçek kullanıcı metrikleridir.

Largest Contentful Paint (LCP)

LCP, görünür en büyük içerik öğesinin render edilmesinin ne kadar sürdüğünü ölçer. Hedef: 2,5 saniyenin altı.

LCP'yi iyileştirmek için geliştirici eylemleri:

Hero görselini <link rel="preload" as="image"> ile önceden yükleyin
Görselleri yeni nesil formatlarda sunun (WebP, AVIF)
Render'ı engelleyen script ve stylesheet'leri ortadan kaldırın
Coğrafi gecikmeyi azaltmak için CDN kullanın

Interaction to Next Paint (INP)

INP, 2024'te First Input Delay'in yerini aldı. Tüm kullanıcı etkileşimlerindeki yanıt verme hızını ölçer. Hedef: 200 milisaniyenin altı.

INP'yi iyileştirmek için geliştirici eylemleri:

Kritik olmayan JavaScript'i erteleyin
setTimeout veya Scheduler API ile uzun görevleri parçalara bölün
Event handler'larda senkron işlemlerden kaçının

Cumulative Layout Shift (CLS)

CLS, beklenmedik düzen kaymasını cezalandırır. Hedef: 0,1'in altı.

CLS'yi önlemek için geliştirici eylemleri:

Görsellere ve iframe'lere her zaman açık width ve height değerleri atayın
Dinamik olarak eklenen içerikler için alan rezerve edin (reklamlar, banner'lar)
Yüklemeden sonra mevcut içeriğin üzerine DOM düğümleri eklemeyin

Uluslararasılaştırma Boyutu: Global Kitleler İçin SEO

Web geliştirmede SEO'nun gerçekten karmaşıklaştığı yer — ve pek çok mühendislik ekibinin önemli miktarda organik trafiği masada bıraktığı yer — burasıdır. İngilizce'de teknik açıdan mükemmel bir site, Almanca, Fransızca, Japonca veya Portekizce arama sonuçlarında tamamen görünmez olabilir; içeriğin yokluğundan değil, i18n uygulamasının hatalı olmasından dolayı.

Uluslararasılaştırma SEO'yu Neden Bozar

Arama performansını mahveden yaygın i18n anti-pattern'leri:

1. Tüm dilleri aynı URL'den JavaScript geçişiyle sunmak

https://example.com/about sayfası Accept-Language başlığı de olduğunda Almanca içerik sunuyorsa ama URL hiç değişmiyorsa, arama motorları yalnızca tarama sırasında yüklenen sayfayı indeksler. Almanca arayan Alman kullanıcılar bunu asla bulamaz.

2. Eksik veya hatalı hreflang anotasyonları

hreflang nitelikleri, arama motorlarına belirli bir sayfa için hangi dil/bölge varyantının mevcut olduğunu söyler. Eksik hreflang, motorların kullanıcılara yanlış locale sunması anlamına gelir. Yanlış hreflang (eşleşmeyen dil kodları, bozuk karşılıklı linkler) sıralamaları aktif olarak düşürebilir. Siteniz İspanyolca konuşulan pazarları hedefliyorsa, hreflang ile İspanyolca konuşulan kitleleri hedefleme rehberimiz tam sözdizimini ve ihtiyaç duyduğunuz bölgesel varyantları kapsar.

3. Çevrilmemiş metadata

Gövde içeriğini çevirirken <title>, <meta name="description">, Open Graph tag'leri ve JSON-LD alanlarını kaynak dilde bırakmak, locale sayfalarının kaynak dil sorgularında sıralanması anlamına gelir — hedef pazar kullanıcıları için işe yaramaz.

Doğru Teknik Kurulum

Doğru şekilde uluslararasılaştırılmış bir URL yapısı şu şekillerde görünür:

Alt dizin: example.com/de/, example.com/fr/
Alt alan adı: de.example.com, fr.example.com
Ülke kodu TLD: example.de, example.fr

Alt dizinler genellikle bakımı en kolay seçenektir ve domain otoritesini konsolide eder. Hangi yapıyı seçerseniz seçin, her locale varyantının <head> bölümüne hreflang ekleyin:

<link rel="alternate" hreflang="en" href="https://example.com/blog/seo-in-web-development" />
<link rel="alternate" hreflang="de" href="https://example.com/de/blog/seo-in-web-development" />
<link rel="alternate" hreflang="fr" href="https://example.com/fr/blog/seo-in-web-development" />
<link rel="alternate" hreflang="x-default" href="https://example.com/blog/seo-in-web-development" />

Her sayfa, kendisi dahil tüm varyantlarını referans almalıdır. Bozuk bir karşılıklı link, tüm hreflang kümesini geçersiz kılar.

better-i18n Nereye Uyar

Büyüyen sayıdaki locale sayfası için çevirileri yönetmek — her birinin benzersiz slug'lara, çevrilmiş metadata'ya ve doğru hreflang'a ihtiyacı var — spreadsheet'ler veya parçalı CMS alanlarıyla operasyonel olarak sürdürülemez hale gelir.

better-i18n, özellikle web geliştirme ekipleri için inşa edilmiş bir lokalizasyon platformudur. Çeviri içeriğini yapılandırılmış bir API ve CMS aracılığıyla yönetir; çevrilmiş slug'ları, metadata'yı ve gövde içeriğini locale'ler arasında senkronize tutar. Çok dilli bir projede çalışan bir SEO geliştiricisi için bu önemlidir çünkü:

Slug yönetimi: better-i18n, locale'e özgü slug'ları destekler (/de/seo-im-webentwicklung); bu, çevrilmiş anahtar kelimelerin İngilizce karşılıklarından önemli ölçüde farklılaştığı İngilizce dışı pazarlarda sıralama için zorunludur.
Metadata çevirisi: Her içerik girişi, çevrilebilir title, excerpt ve özel meta alanları taşır — çevrilen sayfaların İngilizce fallback değil, tam lokalize edilmiş <title> ve <meta description> tag'lerine sahip olmasını sağlar.
Yapılandırılmış içerik: İçerik modeli, tüm locale'lerde author, category ve read_time gibi alanları zorunlu kılar; bu da dil başına eksiksiz JSON-LD şemaları oluşturmayı kolaylaştırır.

Bu, en yaygın i18n SEO başarısızlık senaryosunu ortadan kaldırır: teknik olarak çevrilmiş ancak metadata'sı, slug'ları veya hreflang anotasyonları eksik ya da tutarsız olduğu için arama motorlarına görünmez olan sayfalar.

Sitemap'ler ve Crawl Bütçesi

Sitemap, bir niyet beyanıdır — indekslenmesini istediğiniz URL'lerin listesi. Çok dilli siteler için vazgeçilmezdir.

Minimal çok dilli bir sitemap girişi:

<url>
  <loc>https://example.com/blog/seo-in-web-development</loc>
  <xhtml:link rel="alternate" hreflang="en" href="https://example.com/blog/seo-in-web-development" />
  <xhtml:link rel="alternate" hreflang="de" href="https://example.com/de/blog/seo-in-web-development" />
  <lastmod>2025-06-01</lastmod>
  <changefreq>monthly</changefreq>
  <priority>0.8</priority>
</url>

Büyük siteler için sitemap'leri programatik olarak oluşturun ve içerik türüne veya locale'e göre bölün. Her sitemap'i Google Search Console'a ve Bing Webmaster Tools'a ayrı ayrı gönderin.

Crawl bütçesi, binlerce sayfaya sahip sitelerde önem kazanır. Bütçeyi şunlara harcamaktan kaçının:

2–3. sayfanın ötesindeki sayfalanmış arşiv sayfaları
Filtre ve sıralama parametre kombinasyonları
robots.txt tarafından engellenmemiş staging veya yinelenen içerik URL'leri

SEO Denetimleri İçin Geliştirici Araçları

SEO kontrollerini geliştirme iş akışına entegre etmek, gerilemeçleri yayına gitmeden yakalar.

Lighthouse / Web Vitals

Performans ve erişilebilirlik gerilemeçlerini yakalamak için CI'da Lighthouse çalıştırın. web-vitals kütüphanesi, INP, LCP ve CLS'yi gerçek kullanıcı oturumlarında ölçmenizi sağlar:

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(console.log);
onINP(console.log);
onCLS(console.log);

Otomatik SEO Testi

@nicolo-ribaudo/seo-testing, erişilebilirlik için Cypress-axe veya özel Playwright script'leri gibi araçlar; her route'un benzersiz bir title'a, karakter sınırları içinde bir meta description'a, canonical tag'lere ve hreflang anotasyonlarına sahip olduğunu otomatik olarak — her pull request'te — doğrulayabilir.

Search Console Entegrasyonu

Google Search Console, indeksleme hatalarını, Core Web Vitals alan verilerini ve manuel işlemleri ortaya çıkarır. Bir şeyler bozulduktan sonra değil, ilk günden bağlayın. URL İnceleme aracı, rendering ve indeksleme sorunlarını debug etmek için paha biçilmezdir. Bağlandıktan sonra, her locale'den gelen organik trafiğin nasıl dönüştüğünü analiz etmek için Search Console verileriyle birlikte Google Analytics kullanabilirsiniz.

Kontrol Listesi: Web Geliştirmede SEO

Herhangi bir yeni sayfa veya özellik yayına almadan önce:

Rendering stratejisi bilinçli olarak seçildi (SSG, SSR, CSR)
Tek <h1> ile semantik HTML yapısı
Sayfa başına benzersiz <title> ve <meta name="description">
Canonical tag doğru şekilde ayarlandı
Open Graph ve Twitter Card tag'leri mevcut
JSON-LD structured data uygulandı
Görsellerin alt metni, açık boyutları var ve yeni nesil formatta
Core Web Vitals eşikleri geçiyor (LCP < 2,5s, INP < 200ms, CLS < 0,1)
URL temiz, küçük harf ve kısa çizgiyle ayrılmış
Değiştirilen URL'ler için 301 redirect ayarlandı
Sitemap yeni URL'yi içeriyor
robots.txt sayfayı yanlışlıkla engellemiyor
Çok dilli sayfalar için: hreflang anotasyonları karşılıklı ve eksiksiz
Çok dilli sayfalar için: tüm metadata çevrildi (title, description, OG tag'leri, JSON-LD)
CI'da Lighthouse skoru incelendi

Sonuç

Web geliştirmede SEO'yu, lansman sonrası bir pazarlama görevi olarak değil, temel bir mühendislik kaygısı olarak ele almak; zamanla organik trafik biriktiren sitelerle sürekli olarak ücretli kanallara bel bağlayan siteler arasındaki farkı yaratır. Teknik temel öğrenilebilir ve tekrarlanabilir: semantik HTML, doğru rendering stratejisi, hızlı Core Web Vitals, structured data ve temiz URL mimarisi.

Pek çok mühendislik ekibinin hâlâ en fazla değeri realize edemediği alan uluslararasılaştırmadır. hreflang'ı doğru uygulamak, metadata'yı eksiksiz çevirmek ve locale'e özgü slug'ları sistematik olarak yönetmek, bu iş için tasarlanmış araçlar gerektirir. better-i18n gibi platformlar, bu süreci birden fazla pazarda çalışan SEO web geliştirme ekipleri için operasyonel olarak yönetilebilir kılar; çok dilli SEO'yu tekrarlayan bir baş ağrısından güvenilir bir büyüme kanalına dönüştürür.

Arama görünürlüğünü mimariye ilk günden dahil edin. Zamanla hiçbir reklam harcamasının kopyalayamayacağı şekillerde birikerek çoğalır.

Web Geliştirmede SEO: Arama Odaklı Projeler İçin Geliştiricinin Tam Rehberi