İçindekiler Tablosu (Table of Contents) Nedir? SEO ve Kullanıcı Deneyimi İçin Nasıl Oluşturulur?

Uzun bir rehberi açtığınızı düşünün: 3.000 kelime, onlarca başlık. Aradığınız cevap yedinci bölümde ama bunu bilmiyorsunuz. Ya sayfayı aşağı doğru tarayacaksınız ya da vazgeçip geri döneceksiniz. İçindekiler tablosu, bu sorunu çözen basit ama etkili bir araçtır: sayfanın haritasını en başta gösterir ve okuru tek tıkla istediği bölüme götürür.

Bu yazıda içindekiler tablosunun ne olduğunu, teknik olarak nasıl çalıştığını, SEO’ya gerçekte ne kattığını (ve ne katmadığını), elle ve WordPress’te nasıl oluşturulacağını, iyi bir içindekiler tablosunun özelliklerini ve sık yapılan hataları ele alıyoruz. Okuduğunuz sayfanın kenarındaki (mobilde başlığın altındaki) içindekiler bölümü de bu yazıda anlattığımız ilkelerle kuruldu.

İçindekiler tablosu (table of contents) nedir?

İçindekiler tablosu (İngilizcesiyle table of contents, kısaca TOC), bir web sayfasındaki ana başlıkların ve gerekirse alt başlıkların sıralı bir liste hâlinde gösterildiği, her maddenin sayfadaki ilgili bölüme bağlantı verdiği gezinme alanıdır.

Kavram basılı kitaplardan gelir: kitabın başındaki içindekiler sayfası, bölümleri ve sayfa numaralarını listeler. Web’deki karşılığında sayfa numarası yerine bağlantı vardır. Okur bir maddeye tıkladığında tarayıcı sayfayı yenilemeden ilgili başlığa kayar.

Bir içindekiler tablosu üç bileşenden oluşur:

1. Başlıklar: Sayfadaki H2 (ve gerekirse H3) başlıkları. İçindekiler tablosu bu başlıkların bir özetidir; başlık yapısı ne kadar düzgünse tablo da o kadar anlamlı olur.
2. Kimlikler (id): Her başlığa verilen benzersiz bir id değeri. Bağlantının “nereye gideceğini” bu kimlik belirler.
3. Çapa bağlantılar (anchor link): İçindekiler listesindeki her madde, # işaretiyle başlayan ve ilgili kimliği gösteren bir bağlantıdır.

İçindekiler tablosu teknik olarak nasıl çalışır?

Mekanizma, HTML’in en eski özelliklerinden biri olan parça tanımlayıcıya (fragment identifier) dayanır. Bir adresin sonuna eklenen #bolum-adi ifadesi, tarayıcıya sayfada id="bolum-adi" olan öğeye gitmesini söyler. En yalın hâliyle yapı şöyledir:

<nav aria-label="İçindekiler">
  <ol>
    <li><a href="#nedir">İçindekiler tablosu nedir?</a></li>
    <li><a href="#nasil-olusturulur">Nasıl oluşturulur?</a></li>
  </ol>
</nav>

<h2 id="nedir">İçindekiler tablosu nedir?</h2>
...
<h2 id="nasil-olusturulur">Nasıl oluşturulur?</h2>

Bu yapının iki önemli sonucu vardır. Birincisi, sayfa yeniden yüklenmez; yalnızca kaydırma olur. İkincisi, her bölümün kendi adresi olur. https://ornek.com/rehber/#nasil-olusturulur adresini paylaşan biri, okuru doğrudan o bölüme gönderir. Destek ekiplerinin müşterilere, editörlerin sosyal medyaya “şu bölüme bakın” diye bağlantı vermesi bu sayede mümkündür.

Parça tanımlayıcılar sunucuya gönderilmez; tamamen tarayıcıda işlenir. Bu yüzden arama motorları # sonrasını ayrı bir sayfa olarak görmez ve dizine eklemez. Yani içindekiler bağlantıları kopya içerik veya ayrı adres sorunu yaratmaz.

İçindekiler tablosu neden önemlidir?

Okur açısından

• Beklenti yönetimi: Okur, sayfaya girer girmez içeriğin neleri kapsadığını görür. Aradığı konu listede varsa kalır, yoksa zaman kaybetmeden ayrılır. İki durumda da deneyim iyileşir.
• Hızlı erişim: Web’de insanlar çoğunlukla satır satır okumaz, tarar. İçindekiler tablosu taramanın en hızlı yoludur.
• Mobil kolaylık: Küçük ekranda uzun bir sayfayı kaydırmak, masaüstüne göre çok daha yorucudur. Mobilde içindekiler tablosu sayfa içinde gezinmenin neredeyse tek pratik yoludur.
• Geri dönüş: Rehberi daha önce okumuş biri, sadece bir bölüme yeniden bakmak için döndüğünde doğrudan o bölüme gidebilir.

Yazar ve editör açısından

İçindekiler tablosu, yazının iskeletini görünür kılar. Tabloya bakınca mantıksız sıralama, tekrar eden bölümler veya eksik konular hemen fark edilir. Pek çok editör, yazmaya başlamadan önce içindekiler tablosunu taslak olarak çıkarır; bu, konunun SERP analizinde belirlenen kapsamı karşılayıp karşılamadığını kontrol etmenin de kolay bir yoludur.

İçindekiler tablosunun SEO’ya etkisi

İçindekiler tablosu doğrudan bir sıralama faktörü değildir. Sayfanıza içindekiler eklediğiniz için sıralamanız kendiliğinden yükselmez. Ancak dolaylı ve somut faydaları vardır:

1. Arama sonuçlarında “Şuraya atla” bağlantıları

Google, bazı sonuçlarda sayfanın belirli bir bölümüne giden bağlantılar gösterebilir. Bu bağlantılar genellikle sayfadaki çapa bağlantılardan ve başlıklardan beslenir. Açıklayıcı başlıklara ve düzgün kimliklere sahip bir içindekiler tablosu, Google’ın bu bölümleri tanımasını kolaylaştırır. Bu bağlantılar sonucunuzun daha fazla yer kaplamasını ve kullanıcının doğrudan aradığı bölüme gitmesini sağlar.

2. Metin parçası bağlantıları ve öne çıkan snippet’ler

Google, öne çıkan snippet gibi sonuçlardan tıklayan kullanıcıyı sayfada ilgili metnin bulunduğu yere kaydırabilir ve bu metni vurgulayabilir. Bu, adresin sonuna eklenen #:~:text= ifadesiyle çalışır. İçindekiler tablosu bu özelliğin önkoşulu değildir; ancak iyi bölümlenmiş, her bölümü tek bir soruya cevap veren bir sayfa, bu tür sonuçlar için daha uygun bir adaydır.

3. Başlık yapısının netleşmesi

İçindekiler tablosu eklemek, sizi başlık hiyerarşinizi düzenlemeye zorlar. H2’ler ana bölümler, H3’ler alt bölümler olarak mantıklı biçimde dizilmezse tablo da dağınık görünür. Düzgün başlık yapısı hem arama motorlarının hem de yapay zekâ sistemlerinin sayfayı anlamasını kolaylaştırır. Başlık yapısının anlam açısından önemini semantik SEO yazımızda ele aldık.

4. Yapay zekâ cevapları için bölümlenmiş içerik

Yapay zekâ destekli arama sistemleri sayfaları bütün olarak değil, pasajlar hâlinde değerlendirir. Her biri net bir soruya cevap veren, açıklayıcı başlıklarla ayrılmış bölümler, bu sistemlerin doğru pasajı bulup kaynak göstermesini kolaylaştırır. İçindekiler tablosu bu bölümlemenin görünür hâlidir. Konuyu AEO rehberimizde ayrıntılı anlattık.

5. Kullanıcı davranışı

Aradığını hızlı bulan kullanıcı sayfada kalır; bulamayan arama sonuçlarına geri döner. İçindekiler tablosu, kullanıcının aradığı bölümü bulma olasılığını artırarak arama sonuçlarına hızlı geri dönüşü azaltır. Bu da içeriğin arama niyetini gerçekten karşıladığının dolaylı bir göstergesidir.

Hangi sayfalarda içindekiler tablosu kullanılmalı?

Her sayfaya içindekiler tablosu gerekmez. Temel kural şudur: okurun sayfada gezinmeye ihtiyaç duyacağı kadar uzun ve bölümlü içeriklerde kullanın.

Bu sitede uyguladığımız kural basittir: bir yazıda en az iki H2 başlık varsa içindekiler tablosu otomatik olarak oluşur; yoksa H3 başlıklara bakılır; yine iki başlık yoksa tablo hiç gösterilmez. Yazının sonunda sıkça sorulan sorular bölümü varsa, o bölüm de tabloya eklenir.

İyi bir içindekiler tablosunun özellikleri

1. Doğru derinlik: Çoğu içerikte yalnızca H2 başlıkları listelemek yeterlidir. H3’leri de eklemek, 20–30 maddelik uzun bir liste yaratabilir ve tablonun amacını bozar. Çok uzun rehberlerde H3’ler iç içe ve daraltılabilir biçimde verilebilir.
2. Açıklayıcı başlıklar: “Giriş”, “Detaylar”, “Diğer” gibi başlıklar içindekiler tablosunda hiçbir şey anlatmaz. “İçindekiler tablosu nasıl oluşturulur?” gibi başlıklar ise okura ve arama motoruna bölümün ne cevapladığını söyler.
3. Kısa başlıklar: İki satıra taşan başlıklar tabloyu okunmaz hâle getirir. Başlıkları mümkün olduğunca kısa ve net tutun.
4. Numaralı liste: Sıralı bir içerik için <ol> kullanmak, okura içeriğin bir akışı olduğunu gösterir.
5. Doğru konum: Tablo, kısa bir giriş paragrafından sonra, ilk H2’den önce yer almalıdır. Okur önce sayfanın ne hakkında olduğunu anlamalı, sonra haritayı görmelidir.
6. Görünür ama baskın olmayan tasarım: Tablo fark edilmeli ama içeriğin önüne geçmemelidir.

İçindekiler tablosu nasıl oluşturulur?

Yöntem 1: Elle HTML ile

1. Sayfadaki her H2 (ve gerekiyorsa H3) başlığa benzersiz bir id verin.
2. Giriş paragrafının hemen altına bir <nav> alanı ekleyin.
3. İçine her başlık için bir liste maddesi ve href="#id" biçiminde bağlantı yerleştirin.
4. Bağlantıları tek tek tıklayarak doğru bölüme gittiğini kontrol edin.

Elle yöntem tam kontrol sağlar ama başlık değiştiğinde tabloyu da güncellemeyi unutmamak gerekir. Az sayıda, uzun ömürlü rehber için uygundur.

Yöntem 2: WordPress ile

WordPress blok düzenleyicisinde her başlık bloğunun “Gelişmiş” ayarlarında HTML çapası alanı bulunur; buraya yazdığınız değer başlığın kimliği olur. Ardından bir liste bloğuna bu çapalara giden bağlantıları ekleyerek elle bir tablo oluşturabilirsiniz.

Otomatik çözüm için eklentiler kullanılır. Easy Table of Contents gibi özel eklentiler, başlıkları tarayarak tabloyu kendiliğinden oluşturur; hangi yazı türlerinde, kaç başlıktan sonra görüneceği ve hangi başlık düzeylerini içereceği ayarlanabilir. Rank Math ve Yoast gibi SEO eklentilerinin de içindekiler blokları vardır (bazı özellikler ücretli sürümlerde olabilir). Eklenti seçerken şunlara dikkat edin:

• Tablo HTML olarak sayfaya yazılıyor mu, yoksa yalnızca JavaScript ile mi oluşuyor? Sayfa kaynağında görünen bir tablo tercih edilmelidir.
• Eklenti ek CSS ve JavaScript dosyaları yüklüyor mu? Gereksiz dosyalar sayfa hızını olumsuz etkiler.
• Türkçe karakterleri kimliklerde düzgün dönüştürüyor mu?
• Oluşan kimlikler kalıcı mı, yoksa başlık her değiştiğinde farklı mı oluyor?

Yöntem 3: Şablonda otomatik üretim

Kendi geliştirdiğiniz sitelerde en sağlıklı yöntem, içindekiler tablosunu sunucu tarafında, sayfa üretilirken oluşturmaktır. Şablon başlıkları okur, her birine kimlik verir ve tabloyu HTML olarak sayfaya yazar. Bu sitede de yöntem budur: yazılar derlenirken başlıklar okunur, kimlikler Türkçe karakterler sadeleştirilerek oluşturulur ve tablo masaüstünde yan kenarda sabit, mobilde ise başlığın altında açılır bir alan olarak sayfaya yazılır.

Anchor id nasıl yazılmalı?

Başlık kimlikleri küçük bir ayrıntı gibi görünür ama paylaşılabilir bölüm adresleri yarattığı için önemlidir.

• Anlamlı olsun: #bolum-3 yerine #nasil-olusturulur. Anlamlı kimlik, paylaşılan adreste de ne anlatıldığını gösterir.
• Türkçe karakterleri sadeleştirin: “ş, ğ, ı, ö, ü, ç” içeren kimlikler çalışır ama paylaşıldığında kodlanmış karakterlerle uzun ve okunmaz hâle gelir. #icindekiler-nasil-olusturulur daha güvenlidir.
• Küçük harf ve tire kullanın: Boşluk yerine tire kullanın; büyük-küçük harf farkı kimlikte ayrı değer sayılır.
• Benzersiz olsun: Aynı sayfada iki “Örnekler” başlığı varsa kimlikleri farklılaştırın (#ornekler, #ornekler-2).
• Kalıcı olsun: Kimliği değiştirmek, dışarıda paylaşılmış bölüm bağlantılarını sessizce bozar. Bağlantı kırılmaz ama okur sayfanın en başına düşer. Başlık metni değişse bile önemli bölümlerin kimliğini korumaya çalışın.

Tasarım ve teknik ayrıntılar

Sabit menülerde başlığın gizlenmesi: scroll-margin-top

Sayfanın üstüne sabitlenmiş bir menü kullanan sitelerde sık görülen bir sorun vardır: içindekiler bağlantısına tıklanınca tarayıcı başlığı ekranın en üstüne kaydırır, başlık da sabit menünün altında kalır. Okur bölümün ortasından başlamış gibi hisseder. Çözüm tek satır CSS’tir:

h2, h3 { scroll-margin-top: 90px; }

Buradaki değer, sabit menünün yüksekliği ile biraz boşluğun toplamı olmalıdır. Bu sitede de aynı yöntem kullanılıyor.

Yumuşak kaydırma ve hareket hassasiyeti

scroll-behavior: smooth ile tıklamadan sonra sayfa bir anda atlamak yerine yumuşakça kayar. Bu, okurun nereye gittiğini anlamasını kolaylaştırır. Ancak hareket hassasiyeti olan kullanıcılar işletim sistemlerinde animasyonları azaltmayı tercih edebilir. Bu tercihe saygı göstermek için yumuşak kaydırmayı yalnızca prefers-reduced-motion: no-preference koşulunda açın.

Etkin bölümü vurgulama

Yan kenarda sabit duran içindekiler tablolarında, okurun o anda hangi bölümde olduğunu vurgulamak yararlı bir ektir. Bu genellikle JavaScript’in IntersectionObserver özelliğiyle, ekrana giren başlığı izleyerek yapılır. Kaydırma olayını sürekli dinleyen eski yöntemler sayfayı yavaşlatabilir; bu yüzden IntersectionObserver tercih edilmelidir.

Mobilde açılır tablo

Mobilde uzun bir içindekiler listesi, okurun içeriğe ulaşmadan önce birkaç ekran kaydırmasına neden olur. Çözüm, tabloyu varsayılan olarak kapalı bir açılır alan hâlinde sunmaktır. HTML’in <details> ve <summary> öğeleri bunu JavaScript gerektirmeden sağlar. Kapalı alandaki bağlantılar da sayfa kaynağında bulunduğu için arama motorları tarafından okunur.

Düzen kaymasına dikkat

İçindekiler tablosunu sayfa yüklendikten sonra JavaScript ile ekleyen çözümler, içeriği aşağı iterek düzen kaymasına yol açabilir. Bu, CLS değerini bozar ve okurun tıklamak üzere olduğu yerin kaymasına neden olur. Tablo sunucuda oluşturulmalı veya yeri önceden ayrılmalıdır.

Erişilebilirlik

İçindekiler tablosu, ekran okuyucu kullananlar için de değerli bir gezinme aracıdır. Bunun için birkaç ayrıntıya dikkat etmek gerekir:

• nav öğesi ve etiket: Tabloyu <nav aria-label="İçindekiler"> içine alın. Böylece ekran okuyucular bu alanı ayrı bir gezinme bölgesi olarak tanır ve kullanıcı doğrudan bu bölgeye atlayabilir. Sayfada birden fazla nav varsa (üst menü, alt menü) etiket onları ayırt etmeyi sağlar.
• Anlamlı bağlantı metni: Bağlantı metinleri başlıklarla aynı olmalı; “buraya tıklayın” gibi ifadeler kullanılmamalıdır.
• Klavye ile kullanım: Tüm bağlantılar Tab tuşuyla ulaşılabilir olmalı ve odak göstergesi görünür kalmalıdır.
• Odağın taşınması: Bağlantıya tıklandığında klavye odağının da ilgili bölüme geçmesi gerekir. Modern tarayıcılar bunu parça tanımlayıcılarda genellikle kendisi yapar; özel JavaScript kaydırma çözümleri ise bu davranışı bozabilir.
• Kontrast ve boyut: Yan kenardaki küçük yazılar okunaklı olmalı, mobilde bağlantılar parmakla rahatça tıklanabilecek aralıkta bulunmalıdır.

İçindekiler tablosu için yapılandırılmış veri var mı?

Hayır, Google’ın içindekiler tablosu için tanımladığı özel bir yapılandırılmış veri türü veya zengin sonucu yoktur. Bazı kaynaklarda önerilen SiteNavigationElement gibi işaretlemeler, arama sonuçlarında görünür bir fark yaratmaz. Google’ın bölüm bağlantılarını göstermesi için gereken şey, düzgün başlıklar, benzersiz kimlikler ve bunlara giden HTML bağlantılarıdır. Yapılandırılmış veri çabanızı, sayfanın türünü ve yazarını tanımlayan Article, BlogPosting veya soru-cevap bölümleri için FAQPage gibi işaretlemelere ayırmak daha verimlidir.

Sık yapılan hatalar

1. Kısa içeriğe tablo eklemek: Üç bölümlük bir yazıda içindekiler tablosu, içeriğin kendisinden daha fazla yer kaplar.
2. Tüm başlık düzeylerini listelemek: H2, H3 ve H4’lerin hepsini içeren tablo, okura harita değil labirent sunar.
3. Belirsiz başlıklar: “Giriş”, “Genel bakış”, “Sonuç” gibi başlıklar tabloda bilgi vermez.
4. Bozuk başlık hiyerarşisi: H2’den H4’e atlayan, bölüm başlıkları için kalın metin kullanan sayfalarda otomatik tablolar eksik veya hatalı oluşur. Tabloyu eklemeden önce başlık yapısını düzeltin.
5. Yalnızca JavaScript ile oluşan tablo: Sayfa kaynağında görünmeyen tablo, arama motorlarının ve bazı kullanıcıların bağlantıları görmemesine yol açabilir.
6. Sabit menüyü hesaba katmamak: scroll-margin-top eksik olduğunda başlıklar menünün altında kalır.
7. Kimlikleri sık değiştirmek: Dışarıda paylaşılmış bölüm bağlantıları çalışmaz hâle gelir.
8. Başlıkla uyuşmayan tablo metni: Elle hazırlanan tablolarda başlık güncellenip tablo unutulabilir. Okur tabloda gördüğü başlığı sayfada bulamaz.
9. Tabloyu reklam veya pop-up arasında kaybetmek: İçindekiler tablosu, sayfanın üst bölümünde reklam alanlarıyla karışmayacak biçimde yer almalıdır.

İçindekiler tablosunun etkisi nasıl ölçülür?

İçindekiler tablosunun işe yarayıp yaramadığını görmek için birkaç veriye bakılabilir:

• Tıklama olayı: Google Analytics 4’te içindekiler bağlantılarına tıklamaları özel bir olay olarak kaydedin. Hangi bölümlerin en çok tıklandığı, okurların sayfada en çok neyi aradığını gösterir. En çok tıklanan bölüm sayfanın alt kısmındaysa, o bölümü yukarı taşımayı veya ayrı bir içerik olarak yazmayı düşünün.
• Kaydırma derinliği ve etkileşim süresi: Tablo ekledikten önceki ve sonraki dönemi karşılaştırın. Tek başına kesin sonuç vermez ama genel eğilimi gösterir.
• Search Console: Bölüm bağlantılarının arama sonuçlarındaki görünümü ayrı bir rapor olarak sunulmaz; ancak sayfanın tıklama oranındaki değişim izlenebilir. Search Console verisini okumanın ayrıntılarını Search Console ölçüm rehberimizde bulabilirsiniz.

İçindekiler tablosu kontrol listesi

1. İçerik tablo gerektirecek kadar uzun ve bölümlü mü?
2. Başlık hiyerarşisi düzgün mü (tek H1, sıralı H2 ve H3)?
3. Başlıklar açıklayıcı ve kısa mı?
4. Her başlığın anlamlı, Türkçe karaktersiz ve benzersiz bir kimliği var mı?
5. Tablo sayfa kaynağında HTML olarak bulunuyor mu?
6. Tablo girişten sonra, ilk H2’den önce mi?
7. Sabit menü varsa scroll-margin-top tanımlı mı?
8. Tablo nav öğesi içinde ve etiketli mi?
9. Mobilde tablo içeriği aşağı itmeyecek biçimde mi sunuluyor?
10. Tüm bağlantılar tek tek test edildi mi?

Özetle

İçindekiler tablosu, uzun bir sayfadaki başlıkları listeleyip her birine bağlantı veren gezinme alanıdır. Doğrudan bir sıralama faktörü değildir; ama okura hız, editöre net bir iskelet, arama motorlarına ve yapay zekâ sistemlerine düzgün bölümlenmiş bir sayfa sunar. İyi bir içindekiler tablosu açıklayıcı ve kısa başlıklardan oluşur, doğru derinlikte kalır, HTML olarak sayfada bulunur, sabit başlıklarla çakışmaz ve erişilebilir biçimde işaretlenir. Uzun rehberlerinizin yapısını birlikte kurgulamak için SEO hizmetimizi inceleyebilirsiniz.