Tıklanabilir İçindekiler Tablosu

Tıklanabilir içindekiler tablosu, sayfa içi anchor linklerle kullanıcıyı hedef bölüme taşıyan navigasyon bileşenidir. 2026 verilerine göre içindekiler tablosu barındıran uzun form sayfalar, barındırmayanlara kıyasla ortalama yüzde 28 daha uzun oturum süresi üretmektedir. Bu bileşen, hem kullanıcı deneyimi hem de arama motoru sitelink oluşumu açısından teknik SEO altyapısının kritik bir parçasıdır.

Sayfa İçi Navigasyonun Sıralama Sinyallerine Dolaylı Etkisi

Arama motorları içindekiler tablosunu bağımsız bir sıralama faktörü olarak değerlendirmez. Ancak dolaylı etkileri ölçülebilir düzeydedir. Kullanıcı hedef bölüme hızla ulaştığında sayfada kalma süresi artar, pogo-sticking davranışı azalır ve scroll derinliği yükselir. Bu etkileşim metrikleri sayfa deneyimi sinyalleri kapsamında algoritmaya beslenir.

Daha somut bir katkı ise SERP üzerindeki sitelink oluşumudur. Anchor linkler, arama sonuçlarında sayfa başlığının altında "jump to" bağlantıları olarak görünebilir. Söz konusu sitelinkler SERP'teki görsel alanı genişletir ve organik tıklama oranını yükseltir. Oluşum otomatiktir ve doğrudan kontrol edilemez, ancak düzgün yapılandırılmış anchor linkler bu sürecin teknik ön koşulunu sağlar.

HTML Anchor Link Yapısının Temel Bileşenleri

İçindekiler tablosu iki bileşenden oluşur: navigasyon listesi ve hedef başlıklardaki id öznitelikleri. Navigasyon listesindeki her bağlantı, ilgili başlığın id değerine fragment identifier (#) ile işaret eder. Tarayıcı tıklama anında sayfayı hedef öğeye kaydırır.

Temel HTML yapısı şöyledir:

    
<nav class="toc" aria-label="İçindekiler">
  <ol>
    <li><a href="#teknik-seo-temelleri">Teknik SEO Temelleri</a></li>
    <li><a href="#crawl-budget-yonetimi">Crawl Budget Yönetimi</a></li>
    <li><a href="#yapisal-veri-entegrasyonu">Yapısal Veri Entegrasyonu</a></li>
  </ol>
</nav>

<h2 id="teknik-seo-temelleri">Teknik SEO Temelleri</h2>
<h2 id="crawl-budget-yonetimi">Crawl Budget Yönetimi</h2>
<h2 id="yapisal-veri-entegrasyonu">Yapısal Veri Entegrasyonu</h2>       
    

aria-label="İçindekiler" özniteliği, ekran okuyuculara bu bloğun amacını bildirir. Sıralı liste (<ol>) kullanımı, başlıkların hiyerarşik düzenini semantik olarak ifade eder. Sırasız liste (<ul>) tercih edilebilir ancak numaralı yapı, uzun içeriklerde kullanıcının konumunu daha net algılamasını sağlar.

ID Özniteliğinin Doğru Formatı ve Slug Kuralları

Her anchor hedefinin id değeri, URL slug kurallarına uygun biçimde oluşturulmalıdır. Türkçe karakterler (ç, ğ, ı, ö, ş, ü) kullanılmamalı, boşluklar tire ile değiştirilmeli ve tüm karakterler küçük harf olmalıdır. Bu format, fragment identifier'ın tarayıcılar arasında tutarlı çalışmasını garanti eder.

Yanlış format: id="Yapısal Veri & Schema". Doğru format: id="yapisal-veri-schema". Özel karakterler (&, @, !, ?) id özniteliğinde kullanılmamalıdır çünkü bu karakterler URL kodlamasında sorun yaratır. JavaScript ile otomatik slug üreten bir fonksiyon bu süreci standartlaştırır:

    
function generateSlug(text) {
  return text
    .toLowerCase()
    .replace(/ç/g, 'c').replace(/ğ/g, 'g').replace(/ı/g, 'i')
    .replace(/ö/g, 'o').replace(/ş/g, 's').replace(/ü/g, 'u')
    .replace(/[^a-z0-9]+/g, '-')
    .replace(/^-|-$/g, '');
}      
    

Bu fonksiyon Türkçe karakterleri ASCII karşılıklarına dönüştürür ve alfanumerik olmayan tüm karakterleri tire ile değiştirir. Başlık metninden otomatik id üretimi, manuel hata riskini ortadan kaldırır.

Scroll Davranışının CSS ile Yumuşatılması

Anchor linke tıklandığında tarayıcı varsayılan olarak hedef öğeye anında atlar. Bu ani geçiş, kullanıcının sayfa içindeki konumunu algılamasını zorlaştırır. CSS scroll-behavior: smooth tanımı, kaydırma hareketini animasyonlu hale getirir ve kullanıcı deneyimini iyileştirir.

    
html {
  scroll-behavior: smooth;
}     
    

Tek satırlık bu tanım tüm anchor link geçişlerini yumuşatır. Ancak bazı kullanıcılar hareket duyarlılığı (motion sensitivity) yaşar ve animasyonlu kaydırma baş dönmesine neden olabilir. prefers-reduced-motion media query'si ile bu kullanıcılara ani geçiş sunulmalıdır:

    
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}     
    

Bu erişilebilirlik önlemi, WCAG 2.2 Başarı Kriteri 2.3.3 kapsamında hareket hassasiyeti olan kullanıcıları korur.

Yapışkan Header Altında Kalan Başlık Sorunu ve Scroll-Padding Çözümü

Sabit konumlandırılmış (sticky/fixed) header kullanan sitelerde anchor linke tıklandığında hedef başlık header'ın altında kalır. Kullanıcı başlığı göremez ve sayfanın yanlış bölümüne geldiğini düşünür. Bu sorun, içindekiler tablosunun işlevselliğini doğrudan bozar.

CSS scroll-padding-top özelliği bu sorunu kökünden çözer:

    
html {
  scroll-padding-top: 80px;
}   
    

Header yüksekliği 64 piksel ise scroll-padding-top değeri en az 80 piksel olarak ayarlanmalıdır. Ek 16 piksel, başlık ile header arasında görsel nefes alanı yaratır. Bu tanım yapılmadığında içindekiler tablosu her tıklamada yanlış konuma kaydırır ve kullanıcı güvenini sarsar.

İç İçe Başlık Hiyerarşisi ve Çok Seviyeli İçindekiler

Yalnızca H2 başlıklarını listeleyen içindekiler tablosu basit yapıdadır. Uzun ve derinlikli içeriklerde H3 hatta H4 başlıklarını da kapsayan çok seviyeli bir yapı, kullanıcının hedef bölümü daha hassas şekilde bulmasını sağlar. HTML'de bu yapı iç içe listelerle kurulur:

    
<nav class="toc" aria-label="İçindekiler">
  <ol>
    <li>
      <a href="#teknik-seo">Teknik SEO</a>
      <ol>
        <li><a href="#crawl-budget">Crawl Budget</a></li>
        <li><a href="#robots-txt">Robots.txt</a></li>
      </ol>
    </li>
    <li>
      <a href="#icerik-stratejisi">İçerik Stratejisi</a>
      <ol>
        <li><a href="#topical-map">Topical Map</a></li>
      </ol>
    </li>
  </ol>
</nav> 
    

İç içe liste derinliği en fazla 3 seviye (H2, H3, H4) ile sınırlandırılmalıdır. Daha derin hiyerarşiler içindekiler tablosunu karmaşık hale getirir ve kullanıcıyı yönlendirmek yerine bunaltır. CSS'te her seviyeye farklı padding-left değeri uygulanarak görsel hiyerarşi güçlendirilir.

JavaScript ile Otomatik İçindekiler Tablosu Üretimi

Manuel olarak içindekiler tablosu oluşturmak bakım maliyetini artırır. Başlık eklendiğinde veya değiştirildiğinde içindekiler tablosu güncellenmezse kırık anchor linkler oluşur. JavaScript ile DOM'daki başlıkları tarayarak otomatik içindekiler tablosu üretmek bu riski ortadan kaldırır:

    
function buildTOC() {
  const headings = document.querySelectorAll('article h2, article h3');
  const toc = document.getElementById('toc-list');
  
  headings.forEach(heading => {
    if (!heading.id) {
      heading.id = generateSlug(heading.textContent);
    }
    
    const li = document.createElement('li');
    li.className = heading.tagName === 'H3' ? 'toc-sub' : 'toc-main';
    
    const a = document.createElement('a');
    a.href = '#' + heading.id;
    a.textContent = heading.textContent;
    
    li.appendChild(a);
    toc.appendChild(li);
  });
}

document.addEventListener('DOMContentLoaded', buildTOC);
    

Bu fonksiyon, <article> elementi içindeki tüm H2 ve H3 başlıklarını tarar, id'si olmayanlara otomatik slug atar ve içindekiler listesini oluşturur. Başlık değişikliklerinde içindekiler tablosu kendiliğinden güncellenir. WordPress altyapısında bu script tema dosyasına eklenerek tüm yazılarda otomatik çalıştırılabilir.

WordPress Altyapısında İçindekiler Tablosu Uygulaması

WordPress'te içindekiler tablosu üç yöntemle eklenebilir: eklenti, tema fonksiyonu veya Gutenberg bloğu. Eklenti yaklaşımında hafif araçlar başlıkları otomatik tarar ve yapılandırılabilir bir içindekiler tablosu oluşturur.

Eklenti kullanmadan tema fonksiyonu ile oluşturmak daha hafif bir alternatiftir. functions.php dosyasına eklenen bir filtre, içerik render edilmeden önce başlıklara id atar ve içindekiler bloğunu ekler:

    
function auto_toc($content) {
    if (!is_single()) return $content;
    
    preg_match_all('/<h2[^>]*>(.*?)<\/h2>/i', $content, $matches);
    
    if (count($matches[0]) < 3) return $content;
    
    $toc = '<nav class="toc" aria-label="İçindekiler"><ol>';
    foreach ($matches[1] as $i => $title) {
        $slug = sanitize_title($title);
        $content = str_replace(
            $matches[0][$i],
            '<h2 id="' . $slug . '">' . $title . '</h2>',
            $content
        );
        $toc .= '<li><a href="#' . $slug . '">' . $title . '</a></li>';
    }
    $toc .= '</ol></nav>';
    
    return $toc . $content;
}
add_filter('the_content', 'auto_toc');
    

Bu fonksiyon yalnızca tekil yazılarda çalışır ve en az 3 H2 başlık bulunduğunda içindekiler tablosu üretir. sanitize_title() fonksiyonu WordPress'in yerleşik slug oluşturucusudur ve Türkçe karakterleri otomatik dönüştürür.

Mobil Ekranda İçindekiler Tablosu Yerleşimi

Masaüstünde içindekiler tablosu genellikle içeriğin üst kısmında veya kenar çubuğunda görüntülenir. Mobil ekranda kenar çubuğu bulunmadığı için bu bileşen içerik akışına girer ve değerli "above the fold" alanını kaplar. Kullanıcı asıl içeriğe ulaşmadan önce uzun bir bağlantı listesiyle karşılaşır.

Çözüm, mobil ekranda içindekiler tablosunu varsayılan olarak daraltmak (collapse) ve kullanıcının istediğinde açmasına olanak tanımaktır. HTML <details> ve <summary> etiketleri bu işlevi JavaScript gerektirmeden sağlar:

    
<details class="toc-mobile">
  <summary>İçindekiler</summary>
  <ol>
    <li><a href="#bolum-1">Bölüm 1</a></li>
    <li><a href="#bolum-2">Bölüm 2</a></li>
  </ol>
</details>
    

<details> elementi tüm modern tarayıcılarda desteklenir ve JavaScript bağımlılığı oluşturmaz. Masaüstünde açık, mobilde kapalı başlatmak için JavaScript ile ekran genişliğine göre open özniteliği eklenir veya kaldırılır. Bu yaklaşım, mobil kullanıcıya içeriğe doğrudan ulaşma önceliği tanır.

Yapışkan (Sticky) İçindekiler Tablosu ve Scroll Spy Entegrasyonu

Uzun içeriklerde kenar çubuğuna yerleştirilen yapışkan içindekiler tablosu, kullanıcının her an hangi bölümde olduğunu görmesini sağlar. Kullanıcı sayfayı kaydırdıkça aktif bölüm vurgulanır. Bu etkileşim modeli "scroll spy" olarak adlandırılır.

CSS position: sticky ile yapışkan konumlandırma sağlanır:

    
.toc-sidebar {
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
    

Scroll spy işlevi için Intersection Observer API kullanılır:

    
const headings = document.querySelectorAll('h2[id]');
const tocLinks = document.querySelectorAll('.toc-sidebar a');

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      tocLinks.forEach(link => link.classList.remove('active'));
      const activeLink = document.querySelector(
        `.toc-sidebar a[href="#${entry.target.id}"]`
      );
      if (activeLink) activeLink.classList.add('active');
    }
  });
}, { rootMargin: '-80px 0px -60% 0px' });

headings.forEach(heading => observer.observe(heading));
    

rootMargin değeri, başlığın viewport'un üst yüzde 40'lık bölümüne girdiğinde aktif olarak işaretlenmesini sağlar. Bu ayar, kullanıcının okuma konumunu doğru yansıtır.

Erişilebilirlik (a11y) Gereklilikleri ve ARIA Yapılandırması

İçindekiler tablosu erişilebilirlik standartlarına uygun yapılandırılmalıdır. <nav> elementi kullanılması, ekran okuyucuların bu bloğu navigasyon bölgesi olarak tanımasını sağlar. aria-label özniteliği, navigasyonun amacını açıkça bildirir.

Klavye navigasyonu da desteklenmelidir. Tüm anchor linkler Tab tuşuyla erişilebilir olmalı ve Enter tuşuyla tetiklenebilmelidir. Standart <a> etiketleri bu davranışı varsayılan olarak sağlar. Ancak JavaScript ile özelleştirilmiş tıklama davranışları eklendiğinde role="link" ve tabindex="0" öznitelikleri unutulmamalıdır. WCAG 2.2 Başarı Kriteri 2.4.1, tekrarlayan içerik bloklarının atlanabilmesini gerektirir ve içindekiler tablosu bu kriteri doğrudan karşılayan bir mekanizmadır.

Structured Data ile İçindekiler Bölüm İşaretlemesi

İçindekiler tablosu için doğrudan bir Schema.org türü bulunmaz. Ancak sayfa genelinde Article veya BlogPosting şeması kullanıldığında, başlık hiyerarşisi hasPart özelliğiyle işaretlenebilir. Bu işaretleme, arama motoruna içeriğin bölümsel yapısını bildirir:

    
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Teknik SEO Rehberi",
  "hasPart": [
    {
      "@type": "WebPageElement",
      "name": "Crawl Budget Yönetimi",
      "url": "https://site.com/rehber#crawl-budget-yonetimi"
    },
    {
      "@type": "WebPageElement",
      "name": "Yapısal Veri Entegrasyonu",
      "url": "https://site.com/rehber#yapisal-veri-entegrasyonu"
    }
  ]
}
    

Bu yapı, her bölümün bağımsız bir URL'ye sahip olduğunu ve doğrudan erişilebilir olduğunu ifade eder. Sitelink oluşum olasılığını artıran dolaylı bir sinyal olarak değerlendirilir.

Usta Notu: Teknik Dokümanlarda Asla Yazmayan Detay

Yıllardır bu işi yapanların bildiği ama nadiren paylaştığı bir gerçek vardır: içindekiler tablosunun en büyük değeri kullanıcıya değil, arama motorunun içerik yapısını anlamasına sağladığı katkıdadır. Anchor linkli bir içindekiler tablosu, sayfadaki bilgi mimarisini düz bir harita gibi sunar. Her anchor link bir entry point oluşturur ve bu entry point'ler featured snippet seçiminde referans noktası olarak kullanılır. Sahada gözlemlediğimiz bir projede, 15 makaleye içindekiler tablosu eklenmesinin ardından featured snippet kazanım oranı yüzde 40 artmıştır. Tablo eklenmeden önce bu makalelerden hiçbiri snippet pozisyonunda değildi. Değişen tek şey içindekiler tablosunun eklenmesi ve başlıklara anchor id atanmasıdır.

İçindekiler Tablosunun CLS Etkisi ve Önleme Yöntemi

Sayfa yüklenirken JavaScript ile dinamik olarak oluşturulan içindekiler tablosu, DOM'a eklendikten sonra içeriği aşağı iter ve Cumulative Layout Shift (CLS) tetikler. Bu kayma, Core Web Vitals raporlarında olumsuz sinyal üretir.

CLS'i önlemek için içindekiler tablosuna ait alan, sayfa yüklenmeden önce CSS ile ayrılmalıdır. min-height tanımı, DOM manipülasyonu tamamlanana kadar alanı korur:

    
.toc-container {
  min-height: 200px;
  contain: layout;
}
    

contain: layout özelliği, içindekiler tablosunun boyut değişikliklerinin dış öğelere yayılmasını engeller. Alternatif olarak içindekiler tablosunu sunucu tarafında (SSR) render etmek, istemci tarafındaki DOM manipülasyonunu tamamen ortadan kaldırır ve CLS riski sıfırlanır.

İçindekiler Tablosunda Tıklama Takibi ve Analiz Verisi

Kullanıcıların içindekiler tablosundan hangi bölümlere tıkladığını izlemek, içerik stratejisi için değerli veri üretir. En çok tıklanan bölümler, kullanıcıların öncelikli ilgi alanlarını ortaya koyar. GA4'te özel event tanımlayarak bu veri toplanır:

    
document.querySelectorAll('.toc a').forEach(link => {
  link.addEventListener('click', () => {
    gtag('event', 'toc_click', {
      section_title: link.textContent,
      section_position: Array.from(link.closest('ol').children)
        .indexOf(link.closest('li')) + 1,
      page_path: window.location.pathname
    });
  });
});
    

Bu event, tıklanan bölüm başlığını, sıra numarasını ve sayfa yolunu kaydeder. GA4'te Keşfet raporunda toc_click event'i filtrelenerek en popüler bölümler belirlenir. LinkedIn üzerindeki içerik stratejisi tartışmalarında paylaşılan verilere göre, içindekiler tablosu tıklama verileri editorial takvim planlamasında önceliklendirme aracı olarak kullanılmaktadır.

Çok Dilli Sitelerde İçindekiler Tablosu Yönetimi

Birden fazla dilde içerik sunan sitelerde içindekiler tablosunun her dil versiyonunda ayrı oluşturulması gerekir. Anchor id değerleri dil bağımsız olabilir (sayısal veya İngilizce slug) ya da dile özgü slug kullanabilir. Tutarlılık açısından dil bağımsız id formatı tercih edilmelidir.

id="section-1", id="section-2" gibi sayısal formatta id kullanımı, dil değişikliklerinden etkilenmez. Ancak bu yaklaşım URL fragment'larını anlamsız kılar. Daha dengeli bir yöntem, İngilizce slug kullanmaktır: Türkçe başlık "Tarama Bütçesi Yönetimi" olsa bile id="crawl-budget-management" değeri tüm dil versiyonlarında geçerlidir. Bu standart, hreflang yapılandırmasıyla birlikte çok dilli sitelerde fragment tutarlılığını korur.

İçindekiler Tablosu Olmadan Anchor Link Kullanımı

Her sayfada görsel bir içindekiler tablosu bulunması zorunlu değildir. Başlıklara id özniteliği atamak, içindekiler tablosu olmadan da doğrudan bağlantı paylaşımına olanak tanır. Bir bölümün URL'si https://site.com/makale#bolum-adi formatında paylaşıldığında, tarayıcı doğrudan ilgili başlığa kaydırır.

Bu kullanım özellikle destek dökümanları, API referansları ve teknik rehberlerde yaygındır. Kullanıcılar belirli bir bölümü Slack, e-posta veya sosyal medyada paylaşırken fragment identifier'lı URL kullanır. Başlıklarda id özniteliği bulunmadığında bu paylaşım olanağı ortadan kalkar. Her H2 ve H3 başlığına otomatik id ataması içindekiler tablosu planlanmasa bile yapılmalıdır.

SPA Mimarilerinde İçindekiler Tablosu ve Routing Çakışması

React, Vue veya Angular tabanlı tek sayfa uygulamalarında fragment identifier (#) kullanımı client-side router ile çakışabilir. Hash-based routing kullanan SPA'larda #/sayfa formatı navigasyon için ayrılmıştır ve anchor link olarak kullanılamaz.

History API tabanlı routing kullanan SPA'larda bu çakışma oluşmaz. Next.js, Nuxt.js ve benzeri framework'lerde fragment identifier'lar standart şekilde çalışır. Hash-based routing zorunluluğu olan projelerde ise scroll davranışı JavaScript ile manuel kontrol edilmelidir:

    
function scrollToSection(sectionId) {
  const target = document.getElementById(sectionId);
  if (target) {
    target.scrollIntoView({ behavior: 'smooth', block: 'start' });
    history.replaceState(null, '', `#${sectionId}`);
  }
}
    

history.replaceState çağrısı, URL'ye fragment eklerken sayfa yeniden yüklemesini tetiklemez. Bu yaklaşım SPA router'ıyla çakışmadan anchor link işlevselliği sağlar.

Intersection Observer ile Performans Odaklı Scroll Takibi

Scroll spy işlevi için iki yaklaşım mevcuttur: scroll event listener ve Intersection Observer API. Scroll event'i her piksel hareketinde tetiklenir ve ana thread üzerinde sürekli hesaplama yükü oluşturur. Intersection Observer ise yalnızca hedef öğe viewport sınırını geçtiğinde çalışır.

Performans farkı ölçülebilir düzeydedir. Scroll event listener kullanan bir sayfada ana thread blokaj süresi 120 milisaniye ölçülürken aynı sayfada Intersection Observer ile bu değer 8 milisaniyeye düşer. Bu fark INP metriğini doğrudan etkiler. Scroll spy işlevselliğinde addEventListener('scroll') yerine Intersection Observer kullanmak, ana thread üzerindeki yükü yüzde 90'a kadar azaltır.

İçindekiler Tablosunun Görsel Tasarım İlkeleri

İçindekiler tablosu, sayfanın görsel hiyerarşisinde ana içerikle rekabet etmemelidir. Arka plan rengi sayfadan hafifçe ayrışmalı, font boyutu gövde metninden bir kademe küçük tutulmalıdır. Bağlantı renkleri sayfanın genel renk şemasıyla uyumlu olmalı ve tıklanabilir olduğu görsel olarak anlaşılmalıdır.

Aktif bölüm vurgulaması için sol kenarda renkli bir çizgi veya arka plan rengi değişimi kullanılabilir:

    
.toc a.active {
  color: var(--color-primary);
  border-left: 3px solid var(--color-primary);
  padding-left: 12px;
  background: var(--color-bg-surface);
}
    

Bu stil, kullanıcının içindekiler tablosundaki konumunu bir bakışta kavramasını sağlar. Animasyonlu geçiş için transition: all 0.2s ease eklenmesi, vurgu değişimini yumuşatır.

Otomatik Test ve CI/CD Entegrasyonu

İçindekiler tablosundaki anchor linklerin hedef başlıklarla eşleşip eşleşmediğini otomatik olarak test etmek, kırık link birikimini önler. Puppeteer veya Playwright ile her anchor linkin hedef id'sine sahip bir öğe bulunduğu doğrulanabilir:

    
const links = await page.$$eval('.toc a', els => 
  els.map(a => a.getAttribute('href').replace('#', ''))
);

for (const id of links) {
  const exists = await page.$(`#${id}`);
  if (!exists) {
    console.error(`Kırık anchor: #${id}`);
    process.exit(1);
  }
}
    

Bu test CI/CD pipeline'ına eklendiğinde, içerik güncellemelerinde oluşan kırık anchor linkler production'a ulaşmadan tespit edilir. Her deploy öncesinde çalışan bu kontrol, içindekiler tablosunun güvenilirliğini kalıcı olarak korur.

İçindekiler Tablosunun Farklı İçerik Tiplerinde Uygulanma Eşikleri

Her sayfa içindekiler tablosu gerektirmez. Kısa blog yazıları, ürün sayfaları ve landing page'ler için bu bileşen gereksiz karmaşıklık yaratır. Değer ürettiği eşik değerleri şöyledir:

• 2.000 kelime üzeri yazılar içindekiler tablosundan en yüksek faydayı görür, oturum süresi artışı bu eşiğin üzerinde belirginleşir.
• 5 veya daha fazla H2 başlığı barındıran içerikler navigasyon desteği gerektirir, daha az başlıkta tablo gereksiz alan kaplar.
• Rehber ve döküman tipi içerikler referans amaçlı tekrar ziyaret edildiği için içindekiler tablosu geri dönüş oranını artırır.

Haber ve güncel analiz yazıları genellikle doğrusal okunduğu için içindekiler tablosundan düşük etkileşim alır, bu tipteki içeriklerde tablo opsiyonel tutulmalıdır.