HTML temelleri: Açıklama ve teknik kontrol listesi

HTML temelleri, web sayfalarının yapısını ve içeriğini tanımlayan etiket tabanlı işaretleme kurallarının kümesidir; semantik öğeler, meta veriler ve erişilebilirlik odaklı işaretleme yazmayı içerir ve modern tarayıcılarla arama motorlarıyla uyumluluğu hedefler.

HTML Temelleri: Web Geliştirme için Temel Rehber

HTML temelleri nedir?

HTML temelleri, bir web sayfasının içerik ve yapısını tanımlamak için kullanılan etiketler (ör. <html>, <head>, <body>, <h1>, <p>, <nav>) ve bu etiketlerin doğru semantik kullanımına dair kurallardır. Bu temel, sayfanın tarayıcıda nasıl yorumlandığını, ekran okuyucular için erişilebilirliğini ve arama motorlarının sayfaya ilişkin sinyalleri nasıl çıkaracağını etkiler.

HTML temelleri SEO için neden önemlidir?

Semantik HTML, arama motorlarının sayfanın ana içeriğini, başlıklarını, navigasyonunu ve meta bilgisini anlamasını kolaylaştırır. Başlık hiyerarşisi (H1–H6), meta title ve meta description gibi head öğeleri, yapılandırılmış veri işaretlemesi ve canonical etiketleri; tarama, indeksleme ve aramada nasıl sinyal gönderileceğini etkiler. Bu noktada önemli ayrım: tarama (crawling), indeksleme (indexing) ve sıralama (ranking) farklı aşamalardır. Örneğin Google, içeriği mobil sürümden tarayıp indeksleme için mobil sürümü birincil temel olarak kullanır; Temmuz 2024'ten beri Google, Search için varsayılan olarak Googlebot Smartphone ile tarama yapar. Ancak bir sayfanın indekslenmesi, otomatik olarak üst sıralarda yer alacağı anlamına gelmez—sıralama, çok sayıda sinyalin birleşimiyle belirlenir.

HTML nasıl çalışır?

Tarayıcı bir URL'yi çekerken gelen HTML'i DOM (Document Object Model) olarak işler; CSS sunumu ve JavaScript etkileşimleri bu DOM üzerinden gerçekleşir. HTML öğeleri iki ana rol oynar: içerik/semantik (ör. <article>, <header>, <nav>, <main>, <footer>) ve meta/başlık bilgisi (ör. <title>, <meta name="description">, <link rel="canonical">). JavaScript ile dinamik içerik ekleniyorsa, arama motorlarının sayfayı nasıl gördüğünü doğrulamak için render edilmiş DOM kontrolü önem kazanır. Farklı cihazlara yönelik farklı içerik sunarken (ör. responsive, dynamic serving, separate URLs) kullanıcı deneyimini bozmadan cihaz türüne göre optimize etmek gerekir; cihaz bazlı farklı içerik sunmak, kullanıcıları veya arama motorlarını yanıltmayacak şekilde yapılmalıdır.

HTML temelleri türleri

Temel kategoriler ve kısa açıklamaları:

- Yapısal/semantik öğeler — <header>, <nav>, <main>, <article>, <section>, <footer>; anlamsal ayrım yapar, erişilebilirliği artırır.
- Başlıklar ve metin öğeleri — <h1>–<h6>, <p>, <strong>, <em>; içerik hiyerarşisini gösterir.
- Meta ve link öğeleri — <title>, <meta>, <link rel="canonical">; indeksleme ve snippet davranışını etkileyebilir.
- Form ve etkileşim öğeleri — <form>, <input>, <button>; kullanıcı etkileşimi ve veri gönderimi.
- Yapılandırılmış veri — JSON-LD veya mikrodata ile şema işaretlemesi; arama motorlarına bağlamsal bilgi sağlar.

HTML ile nasıl başlanır?

Başlangıç için öneriler: basit bir metin editörü veya kod editörü (VS Code vb.) ile <html>, <head>, <body> yapılarını öğrenin; semantik öğeleri önceleyin; CSS ile sunumu ayırın; erişilebilirlik (alt metin, ARIA gerektiğinde) ilkelerinden başlayın. Yerel test için basit bir HTTP sunucusu çalıştırın ve tarayıcıda DevTools ile DOM'u inceleyin. Schema işaretlemesine başlamak için Schema Markup Validator ve Rich Results Test'i kullanın.

Yaygın HTML temelleri hataları

- Başlık eksikliği veya birden çok H1 — doğru hiyerarşi yoksa arama motorları ve ekran okuyucular için kafa karışıklığı olur.
- Meta title/meta description eksik veya tekrarlı — snippet ve tıklama oranını etkileyebilir.
- <link rel="canonical">'ın yanlış hedef göstermesi — yanlış URL'lerin indekslenmesine neden olabilir.
- İçerik yalnızca JavaScript ile sunuluyor ama render doğrulanmamış — arama motorları veya erişilebilirlik sorunları ortaya çıkabilir.
- Semantik olmayan "div soup" — <div> ve <span> aşırı kullanımı anlamsal sinyali azaltır.
- Yanıltıcı rel kullanımı — ücretli veya sponsorlu bağlantılar için rel="sponsored" kullanın; kullanıcı içeriğinden gelen linkler için rel="ugc" uygundur; normal bağlantılar için özel bir "dofollow" rel yoktur, yani normal bir link rel değeri içermeyebilir.

Bağlantı örnekleri: bir standart link: örnek. Sponsorluk için: örnek. Kullanıcı içeriği için: örnek.

Doğrulama: teknik kontrol listesi

Kısa, dışa yönelik ve site-sahibi kontrollerini ayıran uygulamalı kontrol listesi:

- **Başlık etiketi (title)** — nerede doğrulanır: sayfa kaynağı / view-source — geçer: <title> benzersiz ve açıklayıcıysa.
- **Meta description** — nerede doğrulanır: sayfa kaynağı — geçer: özet kullanıcıya açıklayıcı ve tekrarlı değilse.
- **H1 hiyerarşisi** — nerede doğrulanır: rendered DOM (Chrome DevTools Elements) — geçer: her sayfada birincil H1 net ve içerikle uyumluysa.
- **Canonical** — nerede doğrulanır: view-source / curl -I — geçer: canonical URL beklenen kanonik versiyonu işaretliyorsa.
- **Robots / indeksleme** — nerede doğrulanır: sayfa kaynağı meta robots ve/veya HTTP header (curl -I) — geçer: meta veya x-robots-tag yanlışlıkla noindex içermiyorsa.
- **Render doğrulama (JS içerik)** — nerede doğrulanır: Chrome DevTools / fetch with UA — geçer: render edilmiş DOM beklenen içeriği içeriyorsa.
- **Yapılandırılmış veri** — nerede doğrulanır: Rich Results Test / Schema Markup Validator — geçer: test hatasızsa ve beklenen sonuçları döndürüyorsa.

Teknik komut örnekleri (hızlı kullanım): başlık ve HTTP başlıklarını görmek için: curl -I https://example.com/sayfa. Sayfanın sunulan ham HTML'ini belirli bir user-agent ile görmek için: curl -A "Mozilla/5.0 (Windows NT 10.0; Win64; x64)" https://example.com/sayfa

Dışa dönük index kontrolü notu: site: operatörü halka açık bir gösterge verir ancak kesin indexasyon kanıtı değildir. Kendi siteniz için URL Inspection aracı (Google Search Console) yetkili bilgidir; üçüncü taraf siteler için curl, rendered DOM ve arama sonuçları sorguları kullanın.

Teknik SEO Rehberi'ni okuyun

Sıkça sorulan sorular

S: HTML başlık etiketleri SEO'yu doğrudan etkiler mi?

C: H1–H6 etiketleri sayfanın içeriğini arama motorlarına ve ekran okuyuculara yapılandırılmış şekilde iletir; doğru hiyerarşi kullanıcı deneyimini ve tarama-metin ilişkisinin netliğini artırır. Ancak sıralama, sadece başlıklarla belirlenmez; çoklu sinyaller değerlendirilir.

S: JavaScript ile oluşturulan içerik arama motorları tarafından görülür mü?

C: Birçok arama motoru render edilmiş DOM'u kullanır, fakat sayfanın render edilme süresi, kaynak kısıtları veya hatalı JS yükleme nedeniyle içerik gözükmeyebilir. Render edilmiş görünümü doğrulamak için Chrome DevTools veya uygun fetch komutlarını kullanın.

S: rel=nofollow ne yapar?

C: rel="nofollow" Google tarafından bir ipucu (hint) olarak değerlendirilir; bu, bağlantının kesinlikle yok sayılacağı anlamına gelmez. Ücretli bağlantılar için rel="sponsored" kullanın; kullanıcı içeriği kaynaklı bağlantılar için rel="ugc" tercih edilir.

S: Bir sayfanın indekslenmediğini nasıl anlarım?

C: Kendi sitenizde en kesin yöntem Google Search Console URL Inspection'dır. Üçüncü taraf sayfalar için site: operatörü ve dizinlenmiş snippet aramaları göstergedir ama kesindir demek doğru olmaz; ek doğrulama için curl ve render kontrolleri yapın.