20 Mart 2026·7 min read

Semantik HTML: AI Görünürlük için Temel Rehber

Semantik HTML nedir, yapay zeka görünürlüğünüzü nasıl etkiler? Doğru HTML öğeleri, başlık hiyerarşisi ve AI uyumlu sayfa yapısı rehberi.

GEOAudit Ekibi

AI Hazırlık Uzmanları

semantik HTMLAI görünürlükweb geliştirmeSEOerişilebilirlik

Semantik HTML Nedir?

Semantik HTML, web sayfanızdaki içeriğin anlamını HTML etiketleri aracılığıyla tanımlama pratiğidir. "Semantik" kelimesi Yunanca'da "anlamlı" demektir. Semantik HTML etiketleri, sadece içeriğin nasıl görüneceğini değil, ne anlama geldiğini de tarayıcılara, arama motorlarına ve yapay zeka ajanlarına iletir.

Semantik olmayan HTML:

<div class="header">
  <div class="nav">Menü</div>
</div>
<div class="content">
  <div class="title">Başlık</div>
  <div class="text">İçerik metni</div>
</div>
<div class="footer">Altbilgi</div>

Semantik HTML:

<header>
  <nav>Menü</nav>
</header>
<main>
  <article>
    <h1>Başlık</h1>
    <p>İçerik metni</p>
  </article>
</main>
<footer>Altbilgi</footer>

İkisi de tarayıcıda aynı görünebilir. Ancak semantik HTML, makinelere "bu bir başlıktır, bu ana içeriktir, bu navigasyondur" bilgisini doğrudan verir. Yapay zeka ajanları bu bilgiyi içeriğinizi ayrıştırırken kritik şekilde kullanır.

Semantik HTML Neden Yapay Zeka Görünürlüğü İçin Önemli?

Yapay zeka ajanları (ChatGPT, Perplexity, Claude, Google AI Overviews) web sayfalarını okuduğunda HTML yapısını analiz eder. Bu süreçte semantik HTML etiketleri şu bilgileri sunar:

1. İçerik Hiyerarşisini Belirler

Başlık etiketleri (H1-H6), yapay zekaya içeriğin yapısını ve önem sırasını anlatır. Doğru bir başlık hiyerarşisi, yapay zekanın sayfanızın konusunu ve alt konularını kesin olarak kavramasını sağlar.

2. İçerik Rollerini Tanımlar

<main>, <article>, <nav>, <aside> gibi etiketler, sayfadaki her bölümün rolünü tanımlar. Yapay zeka, <article> içindeki metni ana içerik, <nav> içindeki metni navigasyon, <aside> içindeki metni yan bilgi olarak algılar.

3. Gürültüyü Filtreler

Bir web sayfasında ana içerik dışında navigasyon, altbilgi, kenar çubuğu, reklam gibi birçok öğe bulunur. Semantik etiketler sayesinde yapay zeka, ana içeriği (<main> ve <article>) gürültüden ayırır.

4. Makine Okunabilirliğini Artırır

Semantik HTML, JavaScript bağımlılığını azaltır ve içeriğin ilk HTML'de doğrudan mevcut olmasını teşvik eder. Bu, yapay zeka tarayıcılarının içeriği sorunsuz okuyabilmesini sağlar.

Temel Semantik HTML Öğeleri

Sayfa Yapısı Öğeleri

Öğe	Anlamı	AI Etkisi
`<header>`	Sayfa veya bölüm başlığı	Marka ve navigasyon bilgisi
`<nav>`	Navigasyon bağlantıları	Site yapısı haritası
`<main>`	Sayfanın ana içeriği	AI'nın odaklanacağı bölüm
`<article>`	Bağımsız içerik bloğu	Alıntılanabilir ana metin
`<section>`	Tematik bölüm	Konu organizasyonu
`<aside>`	Tamamlayıcı bilgi	Yan bilgi, ilgili konular
`<footer>`	Sayfa veya bölüm altbilgisi	İletişim, yasal bilgi

İçerik Öğeleri

Öğe	Anlamı	AI Etkisi
`<h1>` - `<h6>`	Başlık hiyerarşisi	Konu ve alt konu yapısı
`<p>`	Paragraf	Ana metin bloğu
`<ul>` / `<ol>`	Sırasız / sıralı liste	Yapılandırılmış bilgi
`<table>`	Tablo	Karşılaştırmalı veri
`<figure>` + `<figcaption>`	Görsel + açıklama	Görsel bağlamı
`<blockquote>`	Alıntı	Referans bilgisi
`<code>`	Kod bloğu	Teknik bilgi
`<time>`	Tarih/saat	Güncellik bilgisi
`<address>`	İletişim bilgisi	Yerel bilgi

Doğru Başlık Hiyerarşisi

Başlık hiyerarşisi, semantik HTML'in en kritik bileşenlerinden biridir. Yapay zeka ajanları, başlık yapısını sayfanın içerik haritası olarak kullanır.

Kurallar

Her sayfada tek bir H1 — Sayfanın ana konusunu tanımlar
Hiyerarşik sıralama — H1 > H2 > H3 > H4 sırasını izleyin
Seviye atlamayın — H2'den H4'e geçmeyin, arada H3 kullanın
Anlamlı başlıklar — "Bölüm 1" yerine "Yapılandırılmış Veri Türleri" gibi açıklayıcı başlıklar

Doğru Başlık Yapısı Örneği

<h1>Yapay Zeka SEO Rehberi</h1>
  <h2>Yapay Zeka Arama Motorları</h2>
    <h3>Google AI Overviews</h3>
    <h3>ChatGPT Browse</h3>
    <h3>Perplexity</h3>
  <h2>GEO Optimizasyon Stratejileri</h2>
    <h3>Yapılandırılmış Veri</h3>
    <h3>LLM Keşfedilebilirliği</h3>
  <h2>Sıkça Sorulan Sorular</h2>

Sık Yapılan Başlık Hataları

Hata	Sorun	Çözüm
Birden fazla H1	AI ana konuyu belirleyemez	Sayfada tek H1 kullanın
Seviye atlama	Yapısal tutarsızlık	H2 > H3 > H4 sırasını izleyin
Stil için başlık kullanma	Anlamsal karışıklık	Stil için CSS kullanın
Başlıksız bölümler	İçerik yapısı belirsiz	Her bölüme uygun başlık ekleyin
Aşırı uzun başlıklar	Odak kaybı	Başlıkları 60 karakterle sınırlayın

İdeal Semantik Sayfa Yapısı

İşte yapay zeka ajanları için optimize edilmiş bir sayfa yapısı:

<!DOCTYPE html>
<html lang="tr">
<head>
  <meta charset="UTF-8">
  <title>Sayfa Başlığı</title>
  <meta name="description" content="Sayfa açıklaması">
  <script type="application/ld+json">
    { "@context": "https://schema.org", "@type": "Article", ... }
  </script>
</head>
<body>
  <header>
    <nav aria-label="Ana menü">
      <ul>
        <li><a href="/">Ana Sayfa</a></li>
        <li><a href="/blog">Blog</a></li>
        <li><a href="/hakkimizda">Hakkımızda</a></li>
      </ul>
    </nav>
  </header>

  <main>
    <article>
      <header>
        <h1>Ana Başlık</h1>
        <p>Yazar: <span>Ad Soyad</span> | <time datetime="2026-03-20">20 Mart 2026</time></p>
      </header>

      <section>
        <h2>Birinci Bölüm</h2>
        <p>İçerik paragrafı...</p>

        <h3>Alt Bölüm</h3>
        <p>Alt bölüm içeriği...</p>
      </section>

      <section>
        <h2>İkinci Bölüm</h2>
        <figure>
          <img src="gorsel.jpg" alt="Açıklayıcı alt metin">
          <figcaption>Görsel açıklaması</figcaption>
        </figure>
      </section>

      <section>
        <h2>Sıkça Sorulan Sorular</h2>
        <!-- FAQPage schema ile işaretli SSS bölümü -->
      </section>
    </article>

    <aside>
      <h2>İlgili İçerikler</h2>
      <ul>
        <li><a href="/blog/ilgili-yazi">İlgili Yazı</a></li>
      </ul>
    </aside>
  </main>

  <footer>
    <address>
      <p>İletişim: <a href="mailto:info@example.com">info@example.com</a></p>
    </address>
    <nav aria-label="Alt menü">
      <ul>
        <li><a href="/gizlilik">Gizlilik Politikası</a></li>
        <li><a href="/kullanim-kosullari">Kullanım Koşulları</a></li>
      </ul>
    </nav>
  </footer>
</body>
</html>

Semantik HTML ve Erişilebilirlik İlişkisi

Semantik HTML ve erişilebilirlik (accessibility) iç içe geçmiş kavramlardır. Erişilebilirlik optimizasyonları yapay zeka görünürlüğünü de doğrudan artırır:

ARIA Rolleri ve Etiketleri

<nav aria-label="Ana menü">...</nav>
<main role="main">...</main>
<aside aria-label="İlgili içerikler">...</aside>

ARIA etiketleri, hem ekran okuyuculara hem de yapay zeka ajanlarına sayfa öğelerinin rolünü ve amacını anlatır.

Alt Metin (Alt Text)

<img src="schema-ornekleri.jpg"
     alt="JSON-LD formatında Article schema markup örneği">

Yapay zeka ajanları görselleri doğrudan işleyemez. Alt metin, görseldeki bilgiyi metin olarak sunar ve yapay zekanın bu bilgiyi kullanmasını sağlar.

Form Etiketleri

<label for="email">E-posta adresi:</label>
<input type="email" id="email" name="email">

Form etiketleri, yapay zeka ajanlarının sitenizle etkileşim kurma potansiyelini artırır.

Semantik HTML Kontrol Listesi

Sayfanızın semantik yapısını değerlendirmek için bu kontrol listesini kullanın:

GEOAudit ile Semantik HTML Denetimi

GEOAudit, Semantik HTML kategorisinde şu kontrolleri gerçekleştirir:

H1 etiketinin varlığı ve tekliği
Başlık hiyerarşisinin doğruluğu
Semantik öğelerin (<main>, <article>, <nav>) kullanımı
Alt metin varlığı ve kalitesi
ARIA rollerinin uygunluğu
JavaScript bağımlılık düzeyi

Tarama sonucunda her kontrol için detaylı geri bildirim ve iyileştirme önerileri alırsınız. Nasıl çalıştığını inceleyin.

Semantik HTML ve Yapılandırılmış Veri Birlikte Çalışır

Semantik HTML ve yapılandırılmış veri (JSON-LD) birbirini tamamlayan iki katmandır:

Semantik HTML → Sayfanın yapısal anlamını tanımlar (başlıklar, bölümler, öğeler)
Yapılandırılmış veri → Sayfadaki varlıkları ve ilişkileri tanımlar (Article, Person, Organization)

İkisini birlikte kullandığınızda yapay zeka ajanlarına hem yapısal hem de anlamsal düzeyde net bilgi sunarsınız. Bu, GEO optimizasyonu için temel bir gerekliliktir.

SSS

Semantik HTML kullanmak SEO'yu doğrudan etkiler mi?

Semantik HTML doğrudan bir sıralama faktörü değildir, ancak dolaylı etkileri önemlidir. Doğru başlık hiyerarşisi arama motorlarının içeriğinizi daha iyi anlamasını sağlar. Erişilebilirlik iyileştirmeleri kullanıcı deneyimini artırır. Yapay zeka motorları semantik HTML kullanan sayfaları daha doğru ayrıştırır ve kaynak gösterme olasılığı artar.

Mevcut sitemin HTML'ini semantik hale getirmek zor mu?

Zorluk mevcut yapınıza bağlıdır. WordPress gibi modern CMS'ler zaten temel semantik etiketleri kullanır. Özel kodlanmış sitelerde <div> etiketlerini uygun semantik etiketlerle değiştirmek genellikle görsel değişikliğe neden olmaz ancak makine okunabilirliğini önemli ölçüde artırır. Aşamalı geçiş yapabilirsiniz: önce <main> ve <article>, sonra başlık hiyerarşisi, ardından <nav> ve <aside>.

Başlık hiyerarşisindeki hataları nasıl tespit ederim?

Tarayıcınızın geliştirici araçlarında başlık yapısını inceleyebilirsiniz. Chrome için HeadingsMap eklentisi veya WAVE erişilebilirlik aracı başlık hiyerarşisini görselleştirir. GEOAudit de tarama sırasında başlık hiyerarşisi hatalarını otomatik olarak tespit eder ve raporlar.

Semantik HTML yapay zeka tarayıcıları için neden bu kadar önemli?

Yapay zeka tarayıcıları (GPTBot, ClaudeBot, PerplexityBot) JavaScript'i sınırlı düzeyde işler. Semantik HTML, içeriğin ilk HTML'de doğrudan anlamlı bir yapıda sunulmasını sağlar. <main> ve <article> etiketleri ana içeriği gürültüden ayırır. Başlık hiyerarşisi konu yapısını anlatır. Bu bilgiler olmadan yapay zeka, sayfanızdaki menü metnini ana içerikten ayırt edemeyebilir.