Blogger AMP HTML Uyumlu İçindekiler Tablosu Oluşturma

Genel olarak bir blog veya web sitesi yayınlarında çeşitli içerik listelerini içeren bir içindekiler tablosu bulunur.

İçindekiler

1. İçindekiler Tablosu Nedir?
2. İçindekiler Tablosunu AMP'ye Dönüştürme
3. AMP İçindekiler Tablosu Oluşturma
4. AMP İçindekiler Tablosu Hakkında Kısa Bilgiler

WP temalarında bulunan içindekiler eklentisine genelde "İçindekiler Tablosu (TOC)" denir. Bu yazımızda blog sitesi AMP HTML için "İçindekiler Tablosu" oluşturacağız. AMP HTML blog sitelerinde javaScript kodlarının kullanılmadığını biliyoruz. Bu nedenle, daha önce paylaşmış olduğumuz "AMP Komut ve Kısa Kodları" bilgilerinden faydalanacağız.

İçindekiler Tablosu Nedir?

Yukarıda da söylediğimiz gibi, İçindekiler Tablosu veya İçindekiler eklentisi sayfanın içerdiği başlıkları içeren veya sayfanın içerik haritası oluşturan bir içindekiler tablosudur. Genellikle yazı başlıklarının veya açıklama veya birinci paragraftan hemen sonra konumlandırıl veya eklenir.

İçindekiler Tablosu ile yazı içerisindeki okumak istediğiniz belirli bölümüne atlamanızı sağlar. Böylece, okuyucular ekranı aşağı doğru sürüklemek yerine doğrudan ve kolay bir şekilde içeriğin bölümlerine ulaşmış olur. Bu tablolar genellikle çok uzun blog yazılarında kullanılır ve yazı içeriğinin her bir bölümü için üstbilgisi ile işaretlenir.

Bir kitap düşünün, kitabın sayfalarında bulunan her bir bölümün listesini oluşturan bir içindekiler tablosu bulunur. Bu tablo sayesinde, okumak istediğiniz bölümleri sayfalar arasından kolayca bulabilirsiniz.

İçindekiler tablosunun bir blog için en faydalı yanlarından biri de Google tarafından dizine eklenmesi ve arama sonuçlarında göstermesidir.

İçindekiler Tablosunu AMP'ye Dönüştürme

AMP HTML bloglar için, AMP olmayan bloglarda javaScript kodu ile içindekiler tablosu oluşturulabilir, AMP temalarında javaScript kodları AMP'yi geçersiz kıldığı için kullanılmamaktadır.

Javascript kodu kullanılmadığı için AMP'ye uyumlu bir İçindekiler Tablosu oluşturulması gerek. Şimdi AMP HTML blog sayfalarında kullanılabilecek profesyonel bir İçindekiler Tablosu oluşturacağız.

AMP blog sayfaları için İçindekiler Tablosu oluşturmak için aşağıdaki adımları takip edin.

AMP İçindekiler Tablosu Oluşturma

Blogger hesabınıza giriş yapın ve blogunuzun Tema düzenleme sayfasını açın. Aşağıdaki CSS kodlarını blogunuzun amp-custom stil dosyası içerisine ekleyin.

#btn_toc{font-weight:bold;cursor:pointer;position:relative}
#btn_toc:focus,#toc li:focus,.back_toc:focus{outline:none}
#btn_toc:after{background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCI+PHBhdGggZmlsbD0iIzJlOWZmZiIgZD0iTTEyIDE4LjE3TDguODMgMTVsLTEuNDEgMS40MUwxMiAyMWw0LjU5LTQuNTlMMTUuMTcgMTVNMTIgNS44M0wxNS4xNyA5bDEuNDEtMS40MUwxMiAzIDcuNDEgNy41OSA4LjgzIDkgMTIgNS44M3oiLz48L3N2Zz4=);content:'';height:24px;margin:0;position:absolute;width:24px}
#toc li,.back_toc{cursor:pointer}
#toc{display:grid}

Yukarıdaki CSS kodlarını düzenli bir şekilde ekledikten sonra kaydedin.

Yayın içerisine İçindekiler Tablosu eklemek için, editör sayfanızın HTML bölümüne aşağıdaki HTML kodu ekleyin.

<div id="btn_toc" on="tap:toc.toggleVisibility" role='button' tabindex='0'>İçindekiler</div>
<div id="toc">
<ol>
  <li><a href="#toc_1" title="Başlık">Başlık</a></li>
  <li><a href="#toc_2" title="Başlık">Başlık</a></li>
  <li><a href="#toc_3" title="Başlık">Başlık</a></li>
  <li><a href="#toc_4" title="Başlık">Başlık</a></li>
  <li><a href="#toc_5" title="Başlık">Başlık</a></li>
</ol>
</div>

Tablo içerisindeki başlık listesi yazınızda bulunan başlık sayısı ile aynı sayıda olacak şekilde ayarlayın. HTML kod içerisinde belirtilen #toc_1 içindekiler tablosundan sonra gelen ilk başlık olmalıdır. İkinci başlık için #toc_2, üçüncü başlık için #toc_3 şeklinde düzenlemelisiniz.

Yazı içerisinde bulunan başlıklar aşağıdaki HTML kodda olduğu gibi düzenlenmelidir. Yazı içerisindeki başlıklarınızı h2, h3, h4 veya b, strong gibi etiketler ile de oluşturabilirsiniz. Bu şekilde eklemiş olduğunuz başlıklar yazınız için ayrı ayrı bir bölüm oluşturmuş olursunuz.

<h3 id="toc_1">Başlık</h3>

Başlıklar ile oluşturduğunuz her bölüm altına aşağıdaki kodu ekleyerek, okuyucularınızın İçindekiler Tablosuna geri dönmesini kolaylaştırabilirsiniz.

<div class="back_toc" on="tap:toc.scrollTo('position' = 'center')" role="button" tabindex="0">Yayın Başına Dön &#8593;</div>

AMP İçindekiler Tablosunu uyulanmış olarak daha detaylı incelemek için aşağıdaki ön izleme butonuna tıklayın.

Ön İzleme

AMP İçindekiler Tablosu Hakkında Kısa Bilgiler

Ön izleme sayfasında oluşturmuş olduğunuz İçindekiler Tablosunu sayfanız için deneyebilirsiniz.

Blog yazılarınızda İçindekiler Tablosu oluşturmak için, öncelikle uzun yazılar yazmanız gerekmektedir. Oluşturmuş olduğunuz yazı en az 1000 kelimeden oluşmalı ve yazı içerisinde tabloyu oluşturmak için en az üç başlıklarınızın olması gerekmektedir.

Blog yazılarının uzun ve düzenli olması arama sonuçlarında daha iyi sonuçlar vermektedir. Bu nedenle, 500 kelimenin altında bulunan kısa yazılara tablo eklemenize de gerek yoktur.

Bknz: Blog Yayınlarında Otomatik İçindekiler Dizini Oluşturma

AMP İçindekiler Tablosu ile ilgili görüş ve sorularınız için lütfen yorum formunu kullanın.