Teknik SEO'da Adım Adım DOM Optimizasyonu
Site hızı geliştirmelerine aşina olanların sıklıkla duyduğu bir iş olan “DOM SEO optimizasyonu” gerçekten doğru uygulandığında size çok iyi geri dönüşler sağlayabilir. “DOM boyutunu azaltın” gibi hataların aslında tam olarak nasıl çözülebileceğini sizler için bu yazımda bir araya getirmek istedim. Kısıtlı kaynakların SEO çalışmalarında nasıl kullanılması gerektiğini anlattığım yazımda zaten öncelik belirlemenin de bu çalışmalarda çok değerli olduğunu unutmayın. Hadi gelin önce kısa bir tanımla başlayalım:
DOM Nedir?
DOM (Document Object Model) aslında, web sayfasının HTML yapısının tarayıcı tarafından yorumlanmış, ağaç benzeri bir modelidir. Google ve diğer arama motorları, sitenizi tararken ve içeriğini anlarken bu yapıya güvenir.
Çok fazla dağınık yapılar ve yavaş bir DOM, Googlebot'un siteyi taramasını zorlaştırabilir ve sayfa yükleme hızınızı önemli ölçüde düşürebilir. Bunlar diğer sorunlarla da birleştiğinde sıralamalarınız zarar görüp organik trafik kaybı yaşayabilirsiniz.
1. DOM Boyutu ve Karmaşıklığı Nasıl Azaltılır?
Sayfalardaki HTML elementi sayısı ve bu elementlerin ne kadar iç içe olduğu (yani derinliği), sayfa yüklenme süresini doğrudan etkiler. Google Lighthouse ya da GTmetrix gibi araçlarda "Avoid an excessive DOM size" (Aşırı DOM boyutundan kaçının) uyarısını audit çalışmalarında görmemizin temel sebebi budur. Tarayıcılar ve Googlebot için her zaman basit ve temiz bir yapı sunmalıyız.
Bazen sadece bir element için gereksiz yere <div> katmanları oluşturulabilir. Bu durum da DOM'u gereksiz yere büyütür. Aşağıda kötü bir örnek yer almaktadır. Bu örnekte, profil-karti elementine ulaşmak için 4 katman derine inmek gerekiyor:
<div class="zeo-makale">
<div class="zeo-icerik-alani">
<div class="zeo-profil-karti-wrapper">
<div class="profil-karti">
<img src="profil.jpg" alt="Samet Özsüleyman">
<h3>Samet Özsüleyman</h3>
</div>
</div>
</div>
</div>
İyi ve basit bir örneği ise aşağıda görebilirsiniz:
<section class="zeo-makale">
<div class="profil-karti">
<img src="profil.jpg" alt="Samet Özsüleyman">
<h3>Samet Özsüleyman</h3>
</div>
</section>
DOM boyutunu optimize ettiğinizde Lighthouse sonuçlarında geçer bir not alabilirsiniz:
2. JavaScript ve CSS Optimizasyonu
JavaScript ve CSS optimizasyonu her yerde denk geldiğimiz konu başlıkları arasında yer alıyor. Peki nasıl bunları optimize etmeliyiz? Daha doğrusu optimize etmek için nasıl developer ekiplerini yönlendirmeliyiz bunu düşünmeliyiz.
Tarayıcı bir HTML dosyasını okurken CSS ya da JavaScript dosyasıyla karşılaştığında, genellikle DOM oluşturmayı durdurur ve o dosyayı indirip işleyene kadar bir süre bekler. Bu bekleme süresini render-blocking olarak tanımlanır ve bunun sonucunda sayfanızın kullanıcıya görünme süresi gecikir.
Sayfanın ilk açılışı için önemli olmayan (örneğin, bir sohbet balonu veya analiz script'i) JavaScript dosyalarını erteleyerek sayfanın daha hızlı yüklenmesini sağlayabilirsiniz. Aşağıda kötü bir örneği görebilirsiniz:
<head>
<title>Sayfa Başlığı</title>
<link rel="stylesheet" href="style.css">
<script src="analiz.js"></script>
</head>
<body>
...
</body>
Yukarıdaki kodu defer niteliği ekleyerek daha iyi duruma getirebiliriz. Bu sayede tarayıcıya "Bu script'i indir; fakat HTML'i işlemeyi bitirene kadar çalıştırma" talimatı veriyoruz. Bu basit değişiklik, sayfa yükleme hızında büyük bir fark yaratacaktır:
<head>
<title>Sayfa Başlığı</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
...
<script src="analiz.js" defer></script>
</body>
3. Rendering Stratejisi
Modern JavaScript framework'leri (React, Vue ve Angular gibi) kullanan sitelerde içeriğin nasıl oluşturulduğu, SEO çalışmalarında hayati önem taşır. Googlebot, JavaScript'i çalıştırabilse de bu ek bir adımdır ve bazen içeriğin tamamını görememesine neden olabilir. Bu tür durumlarda Dynamic Rendering’in gibi çözümlerin devreye girdiğini söyleyebilirim.
Google’ı düşünmeden yapılan geliştirmelerde örneğin site (Client-Side Rendering - CSR) kullanıyorsa sunucudan gelen ilk HTML genellikle boştur. Googlebot ilk baktığında şöyle bir sayfa görebilir. Googlebot'un içeriği görebilmesi için app.bundle.js dosyasını indirip çalıştırması gerekir. Bu durumda dizine ekleme sürecini yavaşlayabilir ya da engellenebilir:
<!DOCTYPE html>
<html>
<head>
<title>Zeo Örnek Sayfa</title>
</head>
<body>
<div id="root"></div> <script src="app.bundle.js"></script>
</body>
</html>
SSR (Server-Side Rendering) kullanılıyorsa sunucu, içeriği hazır bir şekilde HTML olarak gönderir. Googlebot'un gördüğü aşağıdaki gibi olup gördüğünüz gibi, tüm önemli içerik ilk HTML yanıtında mevcuttur. Bu yapı, arama motorları için en ideal senaryodur.
<!DOCTYPE html>
<html>
<head>
<title>Zeo Örnek Sayfa</title>
</head>
<body>
<div id="root">
<main>
<h1>DOM SEO Optimizasyonu</h1>
<p>Bu yazı, DOM optimizasyonunun önemini anlatıyor...</p>
<img src="seo.jpg" alt="SEO örnek grafiği">
</main>
</div>
</body>
</html>
4. HTML5 Kullanımı
Semantik etiketler (<article>, <nav>, <header> vb.), sayfanızın içeriği ve yapısı hakkında arama motorlarına değerli ipuçları verir. Her detayı <div> içine koymak yerine, içeriği anlamına uygun etiketlerle kurgulamak, Google'ın sayfa düzeninizi anlamasına yardımcı olur. Anlamsız div kullanımı örneği:
<div class="ust-bolum">
<div class="logo">...</div>
<div class="menu">...</div>
</div>
<div class="ana-icerik">
<div class="yazi">
<h1>Başlık</h1>
<p>Paragraf...</p>
</div>
</div>
<div class="alt-bolum">Tüm hakları saklıdır.</div>
Okumaktan yoruldunuz mu?
Bu blog yazısının, Google NotebookLM ile oluşturulmuş sesli özetini Spotify'dan da dinleyebilirsiniz.
Semantik HTML5 etiketleri kullanılan doğru bir örnek ise aşağıda yer almaktadır. Bunun gibi haber detay sayfalarınız varsa burada article gibi etiketleri kullanmak için yeni stratejiler oluşturabilirsiniz. Bu örnekte Googlebot'a hangi bölümün başlık, hangisinin ana içerik ve hangisinin alt bilgi olduğunu net bir şekilde anlatabiliyoruz:
<header>
<div class="logo">...</div>
<nav>...</nav>
</header>
<main>
<article>
<h1>Başlık</h1>
<p>Paragraf detayları.</p>
</article>
</main>
<footer>Tüm hakları saklıdır.</footer>
5. Çok Fazla CSS Selector Kullanımı
Çok spesifik ve uzun CSS selector kullanmak DOM’a olumsuz etki eder. Özellikle binlerce DOM elementine sahip sayfalarda, tarayıcının style calculation süresini kısaltır. Aşağıdaki örnekte aşırı nitelik içeren kötü bir CSS örneği yer almaktadır:
div#main-container section.content-area ul li a.active {
color: red;
}
Bunun yerine doğrudan hedef elemente basit bir class atamak çok daha iyi olacaktır:
<a class="menu-link is-active">Link</a>
.menu-link.is-active {
color: red;
}
Ayrıca display: none gizlenmiş elementler var mı bunları da mutlaka kontrol edebilirsiniz. Bazen örneğin sayfada yer alan FAQ yapıları display: none ile 2 defa HTML’de yer alıp DOM’u büyütebilir.
6. data-* Öğeleri
data-* nitelikleri, JavaScript'e veri aktarmak için son derece kullanışlıdır. Ancak bazen bu nitelikler, bir JSON içinde yer alabilir. Bu data öğeleri çok fazlaysa HTML dosyasının boyutunu fark ettirmeden artırır ve DOM parsing’i yavaşlatır. Örnek ile bu durumu daha netleştireyim. Bir e-ticaret sitesinde ürün listeleme sayfasında, her bir ürünün data-product niteliğinde, o ürüne ait tüm detayları (açıklama, tüm varyasyonlar, stok durumu vb.) içeren büyük bir JSON metni saklanıyor:
<div class="product-card"
data-product='{"id": 123, "name": "Harika Ürün", "description": "ürünün uzun açıklaması", "variants": [{"sku": "A1", "price": 199}, {"sku": "A2", "price": 205}], "stock": 50, ...}'>
<h3>Harika Ürün</h3>
<img src="urun.jpg" alt="Harika Ürün">
</div>
Bu yöntemde örneğin sayfada 30 ürün listeleniyorsa, HTML dosyasının boyutunu ve DOM'un bellek kullanımını ciddi şekilde artıracaktır. Bunun yerine sadece gerekli ID'yi saklayabiliriz. DOM'da sadece ürünün kimliğini saklayın. Detaylı veriyi bir JavaScript nesnesinde tutun veya kullanıcı etkileşime geçince API ile getirebilirsiniz:
<div class="product-card" data-product-id="123">
<h3>Harika Ürün</h3>
<img src="urun.jpg" alt="Harika Ürün">
</div>
<script>
// Veriyi ayrı bir JavaScript nesnesinde saklayın
const productData = {
"123": {"id": 123, "name": "Harika Ürün", "description": "...", "variants": [...]}
};
document.querySelector('[data-product-id="123"]').addEventListener('click', function() {
const productId = this.dataset.productId;
const details = productData[productId];
// Detayları göster...
});
</script>
Bu sayede HTML dosyasının boyutu küçülür, DOM'un ayrıştırılması hızlanır. Özellikle yavaş ağ bağlantılarına sahip ziyaretçileriniz için Time to First Byte (TTFB) metriğini iyileştirir. Bu alt başlıklarda anlattığım optimizasyon teknikleri haricinde çok daha fazla yöntem olduğunu da unutmayın.
Yukarıda listelediğim maddeleri yaparak neleri düzeltmiş olduk?
- Core Web Vitals metriklerimizi özellikle LCP metriğimizi iyileştirdik ve sıralamalarda yükselmek için adım attık,
- Google'ın daha fazla sayfanızı taramasına katkı sağlayacak adımlar atarak tarama bütçemiz için optimizasyon yaptık,
- Sayfalar daha hızlı yüklendiği için Google Ads kalite puanına katkı sağladık,
- Hepsinden daha önemlisi kullanıcı deneyimini daha üst düzeye çıkarak daha hızlı açılan sayfalar oluşturduk. Bu sayede gelirlerinizin artması için de aksiyonlar almış olduk.
Buraya kadar yazıyı okuyan herkese teşekkür eder, ışık hızında açılış sayfaları oluşturmanızı temenni ederim :)
