Footer Yapısı Nasıl Oluşturulur?

Footer'da Ne Olmalı?

Site tipine göre değişir, yine de bazı bileşenler neredeyse her yerde görünür. Navigasyon linkleri: Hakkımızda, İletişim, SSS, Blog, Kariyer. Ana menüde yer almayan sayfalar. Kullanıcı kaybolduğunda veya ek bilgi aradığında buraya bakar.

Yasal sayfalar zorunlu. Gizlilik Politikası, Kullanım Şartları, Çerez Politikası, KVKK Aydınlatma Metni. GDPR ve KVKK uyumluluğu için görünür olmalı. Link çalışmıyorsa yasal risk oluşur.

İletişim bilgileri: e-posta, telefon, adres. E-ticaret ve hizmet sitelerinde kritik. Kullanıcı sorun yaşadığında buraya bakar. İletişim bilgisi yoksa güven azalır. Telefon numarası tel: protokolü ile linklenmeli, mobilde doğrudan arama açılsın.

Sosyal medya linkleri: Facebook, Twitter, Instagram, LinkedIn. Her platformu eklemeyin. Yalnızca aktif kullanılan hesaplar. Instagram 2 yıldır güncellenmemişse link eklemeyin, güvensizlik yaratır.

Newsletter kayıt formu e-posta listesi oluşturur. Büyük form kullanıcıyı bunaltır, basit input + buton yeterli. "E-posta adresinizi girin" placeholder, "Abone Ol" butonu. Form gönderildikten sonra başarı mesajı gösterin, hata durumunda açıklayıcı mesaj verin.

Telif hakkı ve site bilgisi: "© 2026 Şirket Adı. Tüm hakları saklıdır." Yıl dinamik olmalı, JavaScript ile güncellensin. Statik yıl (© 2020) site bakımsız gösterir. Site yapımcısı bilgisi eklenebilir, opsiyonel.

Organizasyon ve Sütun Yapısı

Nasıl organize edilecek? En yaygın yaklaşım çok sütunlu yapı. 3-5 sütun arası ideal. Her sütun bir kategoriyi temsil eder: Kurumsal, Ürünler, Destek, Yasal, İletişim. Görsel denge sağlar, içeriği gruplandırır.

Küçük siteler için 3 sütun yeterli. Sol sütun kurumsal linkler, orta sütun ürün/hizmet linkleri, sağ sütun iletişim ve sosyal medya. Basit, temiz, mobilde kolay adapte edilir.

Orta ölçekli siteler 4 sütun kullanır. E-ticaret sitelerinde yaygın. Ürün kategorileri, müşteri hizmetleri, kurumsal, yasal olarak ayrılabilir. Her sütunda 5-8 link ideal, daha fazlası şişirir.

Büyük siteler ve portallar 5 sütuna çıkabilir. 5'ten fazla göz taramasını zorlaştırır. Mobilde 5 sütun dikey sıralanınca çok uzun oluşur, accordion yapısı düşünülmeli.

Sütun genişliği eşit mi, değişken mi? Eşit genişlik (her sütun %25) simetrik görünür, içerik dengesiz olabilir. Değişken genişlik (sol sütun %40, diğerleri %20) daha esnek. Sol sütunda logo, açıklama, sosyal medya; diğer sütunlarda linkler.

Her sütunda başlık gerekir. <h3> veya <h4> uygun, <h2> ağır. Başlık altında liste: <ul> içinde <li> ve <a>. Semantik HTML erişilebilirlik ve SEO için önemli.

HTML Yapısı ve Semantik Etiketler

<footer> etiketi ile sarın. HTML5 semantik etiketi, tarayıcılara ve ekran okuyuculara bu bölümün footer olduğunu bildirir. <div class="footer"> semantik değil.

İçerik container ile sarılmalı. Genellikle <div class="container"> veya <div class="wrapper">. İçeriği sayfa genişliğine göre hizalar. Full-width arka plan, içerik container-width.

Sütunlar için flexbox veya grid. Flexbox daha basit, grid daha güçlü. Flexbox: display: flex; justify-content: space-between;. Grid: display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem;.

<footer class="site-footer">
  <div class="container">
    <div class="footer-columns">
      <div class="footer-column">
        <h3>Kurumsal</h3>
        <ul>
          <li><a href="/hakkimizda">Hakkımızda</a></li>
          <li><a href="/kariyer">Kariyer</a></li>
          <li><a href="/basin">Basın</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3>Destek</h3>
        <ul>
          <li><a href="/sss">SSS</a></li>
          <li><a href="/iletisim">İletişim</a></li>
          <li><a href="/yardim">Yardım Merkezi</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3>Yasal</h3>
        <ul>
          <li><a href="/gizlilik">Gizlilik Politikası</a></li>
          <li><a href="/kullanim-sartlari">Kullanım Şartları</a></li>
          <li><a href="/cerez">Çerez Politikası</a></li>
        </ul>
      </div>
      <div class="footer-column">
        <h3>Bizi Takip Edin</h3>
        <ul class="social-links">
          <li><a href="https://twitter.com/..." aria-label="Twitter">Twitter</a></li>
          <li><a href="https://linkedin.com/..." aria-label="LinkedIn">LinkedIn</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <p>© <span id="year"></span> Şirket Adı. Tüm hakları saklıdır.</p>
    </div>
  </div>
</footer>

<script>
  document.getElementById('year').textContent = new Date().getFullYear();
</script>

Yapı hem semantik hem de erişilebilir. aria-label sosyal medya linkleri için önemli, çünkü ikon kullanılıyorsa metin görünmez. Ekran okuyucu "Twitter" yerine "Link" der, yeterli değil.

Responsive Davranış

Masaüstünde 4 sütun, mobilde nasıl görünecek? İki yaklaşım: dikey sıralama veya accordion. Dikey sıralama basit: sütunlar alt alta dizilir. 4 sütun x 8 link = 32 link, mobilde çok uzun.

Accordion: her sütun başlığı tıklanabilir, tıklanınca linkler açılır. Başlangıçta tüm sütunlar kapalı, kullanıcı ilgilendiği sütunu açar. Yüksekliği azaltır, oysa bir adım daha ekler. Tüm linkleri görmek için her sütunu açmak gerekir.

Hibrit yaklaşım: önemli sütunlar (İletişim, Yasal) açık, diğerleri kapalı. Ya da ilk sütun açık, diğerleri kapalı. Denge sağlar: kritik bilgi hemen görünür, detay gizli.

Media query: 768px altında sütunlar dikey sıralanır. @media (max-width: 768px) { .footer-columns { flex-direction: column; } }. Grid kullanıyorsanız: grid-template-columns: 1fr;.

Mobilde padding ve margin azaltın. Masaüstünde 4rem padding uygun, mobilde 2rem yeterli. Yoksa çok yer kaplar, kullanıcı scroll etmek zorunda kalır.

Font boyutu: masaüstünde 14-16px, mobilde 14px yeterli. Daha küçük okunmaz, daha büyük şişirir. Link arası boşluk minimum 8px, dokunmatik hedef boyutu 44x44px.

SEO ve Internal Linking

SEO açısından değerli. Her sayfada tekrar ediyor. Bir link tüm sayfalarda görünüyor, internal linking gücü artırır. Dikkat: footer linkleri header linklerinden daha az değer taşır. Google "boilerplate" olarak görür, içerik linkleri kadar ağırlık vermez.

Hangi sayfalar linklenmeli? Öncelik: önemli ama ana menüde olmayan sayfalar. Site Haritası, RSS Feed, API Dokümantasyonu. Teknik veya ikincil sayfalar, arama motorları için değerli.

Kaç link? 20-40 arası makul. 10'dan az boş görünür, 50'den fazla spam sinyali verir. Google'ın resmi limiti yok, aşırı link "link farm" olarak algılanabilir.

Anchor text önemli. "Tıklayın" yerine "Gizlilik Politikası" yazın. Açıklayıcı anchor text kullanıcı ve SEO için iyi. Keyword stuffing yapmayın: "En İyi Ayakkabı Modelleri 2026 İndirimli Ayakkabı" spam.

NoFollow kullanılmalı mı? Genellikle hayır. İnternal linkler, nofollow gereksiz. Dış linklerde (sosyal medya, partner siteleri) düşünülebilir. Özellikle ücretli ortaklık linklerinde nofollow veya sponsored etiketi zorunlu.

Sitemap linki olmalı mı? Evet, özellikle büyük sitelerde. Kullanıcı kaybolduğunda sitemap'e bakar. XML sitemap linki de eklenebilir, daha çok teknik kullanıcılar için. Normal kullanıcı XML sitemap'i anlamaz.

Performans ve Yükleme

Sayfanın sonunda, performansı göz ardı edebileceğiniz anlamına gelmez. Görseller, ikonlar, scriptler yükleme süresini etkiler. Sosyal medya widget'ları ağır olabilir.

Widget'lar: Facebook, Twitter, Instagram embed'leri 500 KB - 2 MB arası yük bindirir. Basit linkler kullanın. İkon + link, widget'tan 10 kat daha hafif. Mutlaka widget gerekiyorsa lazy loading uygulayın: kullanıcı scroll edince yüklensin.

İkonlar: SVG kullanın, PNG/JPG değil. SVG vektörel, ölçeklenebilir, küçük dosya boyutu. Icon font (Font Awesome) 50-100 KB ekler. Daha iyi: inline SVG, sadece kullanılan ikonlar.

Newsletter formu: JavaScript validation eklerseniz, script ayrı dosyada mı? Ayrı dosya cache'lenebilir. Küçük script (10-20 satır) inline olabilir, HTTP request azalır.

Google Maps embed: iletişim sayfasında harita göstermek yaygın. Footer'da harita embed etmeyin. 1-2 MB yük, her sayfada tekrar ediyor. Statik harita görseli + link kullanın. Kullanıcı tıklarsa Google Maps açılır.

Render-blocking: CSS critical değil. Above-the-fold'da görünmüyor, defer edilebilir. Critical CSS tekniği: header ve hero section CSS inline, footer CSS ayrı dosyada, async yüklenir. LCP'yi iyileştirir.

Erişilebilirlik Gereksinimleri

Genellikle sorunsuz, çünkü basit yapı: başlıklar ve linkler. Yine de dikkat edilmesi gereken noktalar var.

Landmark role: <footer> etiketi otomatik olarak role="contentinfo" taşır. Ekran okuyucu kullanıcıları landmark'lar arasında gezinir, hızlı atlayabilir. <div class="footer"> kullanıyorsanız role="contentinfo" manuel ekleyin.

Başlık hiyerarşisi: <h2> ile başlamamalı. Sayfa içeriğinde <h2> varsa <h3> veya <h4> kullanın. Hiyerarşi bozulursa ekran okuyucu kullanıcıları kafası karışır.

Link metni: "Buraya tıklayın" yerine "Gizlilik Politikası" yazın. Ekran okuyucu kullanıcıları link listesi oluşturur, bağlamdan koparılmış "Buraya tıklayın" anlamsız. Her link kendi başına anlamlı olmalı.

Renk kontrastı: genellikle koyu arka plan, açık metin. WCAG AA için kontrast oranı minimum 4.5:1. Koyu gri arka plan + açık gri metin yeterli kontrast sağlamayabilir. WebAIM Contrast Checker ile test edin.

Klavye navigasyonu: tüm linkler Tab ile erişilebilir olmalı. Focus görünür olmalı: outline veya background-color değişimi. Bazı siteler outline: none ile focus'u kaldırıyor, erişilebilirlik ihlali.

Skip link: uzun footer'da "İçeriğe dön" linki eklenebilir. Kullanıcı sonunda, sayfanın başına dönmek istiyorsa scroll yerine link kullanır. Özellikle klavye kullanıcıları için faydalı.

Ne Zaman Basitleştirilmeli?

Her sayfada aynı olmak zorunda değil. Sayfa tipine göre basitleştirilebilir veya tamamen kaldırılabilir. Landing page'lerde dikkat dağıtır. Kullanıcı tek hedefe odaklanmalı: form doldurmak, ürün satın almak, kayıt olmak. Minimal footer veya hiç footer tercih edilir.

Minimal: sadece telif hakkı ve yasal linkler. Sosyal medya, navigasyon, newsletter yok. 1-2 satır, dikkat dağıtmıyor. A/B testler gösteriyor: landing page'de kaldırıldığında dönüşüm %15-25 artabiliyor.

Checkout sayfalarında basitleştirilmeli. Kullanıcı ödeme yapıyor, güvenlik kritik. Fazla link güvensizlik yaratır: "Bu site güvenli mi, neden bu kadar link var?" Minimal: güvenlik rozetleri, ödeme yöntemleri, yasal linkler.

Blog yazılarında tam olabilir. Kullanıcı içeriği okudu, şimdi ne yapacak? Seçenek sunar: diğer yazılar, kategoriler, newsletter. Dikkat: blog yazısının sonunda CTA (call-to-action) varsa bunu gölgelememelidir.

404 sayfalarında yardımcı olur. Kullanıcı kayboldu, navigasyon sağlar. Ana sayfa, popüler sayfalar, arama kutusu. 404 sayfasında önce arama kutusu ve popüler linkler olmalı, footer ikincil.

Mobil uygulamalarda genellikle yok. Bunun yerine bottom navigation bar var: 4-5 ikon, ana işlevler. Web'e özgü, mobil app'te gereksiz. Mobil web'de (responsive site) olmalı, sadece basitleştirilmeli.

Sayfa Tipine Göre Strateji

Ana sayfada tam olmalı. Kullanıcı siteyi keşfediyor, harita görevi görür. Tüm önemli bölümler linklenmeli: ürünler, hizmetler, blog, kariyer, iletişim. Newsletter formu ana sayfada değerli, e-posta listesi büyütür.

Ürün sayfalarında ikincil öncelikte. Kullanıcı ürüne odaklanmış, dikkat dağıtmamalı. Tamamen kaldırılmamalı, çünkü kullanıcı ek bilgi arayabilir: iade politikası, kargo bilgisi, müşteri hizmetleri. Bu linkler olmalı.

Kategori sayfalarında navigasyon destekler. Kullanıcı kategoride geziniyor, ilgili kategoriler gösterilebilir. Dinamik olmalı: "Kadın" kategorisindeyken "Erkek", "Çocuk" kategorileri vurgulanmalı.

İletişim sayfasında minimal olabilir. Çünkü sayfa zaten iletişim bilgisi veriyor. Aynı bilgiyi tekrar etmek gereksiz. Sosyal medya linkleri ve alternatif iletişim yöntemleri (canlı destek, WhatsApp) eklenebilir.

Hakkımızda sayfasında ekip ve kariyer linklerine yer verebilir. Kullanıcı şirketi tanıyor, belki çalışmak istiyor. "Kariyer" linki prominent olmalı. Ayrıca basın kiti, medya iletişim gibi kurumsal linkler eklenebilir.

Yaygın Hatalar

Kırık linkler: test edilmiyor, 404 veriyor. Özellikle yasal sayfalar: Gizlilik Politikası, Kullanım Şartları. Çalışmıyorsa yasal risk var. Çözüm: otomatik link checker, her deploy sonrası test.

Güncel olmayan bilgi: telefon numarası değişmiş, eski numara duruyor. Adres taşınmış, eski adres görünüyor. Sosyal medya hesabı kapanmış, link hala var. Çözüm: CMS'den yönetmek, tek yerden güncelleme.

Statik yıl: "© 2020 Şirket Adı" yazıyor, 2026'dayız. Site bakımsız görünür. Çözüm: JavaScript ile dinamik yıl. new Date().getFullYear(). Ya da server-side rendering ile yıl otomatik güncellenir.

Çok fazla link: 100+ link var, kullanıcı bunalıyor. Google da spam sinyali alıyor. Çözüm: önceliklendirme. En önemli 30-40 link, geri kalanı sitemap'te.

Erişilebilirlik eksikliği: sosyal medya ikonları aria-label yok, ekran okuyucu "Link" diyor. Renk kontrastı düşük, metin okunmuyor. Klavye ile erişilemiyor. Çözüm: WCAG 2.1 AA standartlarına uyum, otomatik ve manuel test.

Ağır yükleme: 10 sosyal medya widget'ı, her biri 200 KB. Toplam 2 MB, her sayfada. Çözüm: widget yerine basit link, lazy loading, SVG ikon.

Mobilde kötü deneyim: masaüstünde güzel görünüyor, mobilde sütunlar sıkışmış, linkler üst üste. Dokunmatik hedef boyutu küçük, yanlış tıklama. Çözüm: responsive test, gerçek cihazda kontrol, dokunmatik hedef minimum 44x44px.

Test ve Doğrulama

Canlıya alınmadan önce test edin. Link kontrolü: tüm linkler çalışıyor mu? 404 var mı? Redirect doğru mu? Manuel test zaman alır, otomatik araçlar kullanın: Screaming Frog, Broken Link Checker.

Responsive davranış: farklı ekran boyutlarında test edin. 320px (iPhone SE), 375px (iPhone 12), 768px (iPad), 1024px (laptop), 1920px (desktop). Sütunlar doğru sıralanıyor mu? Padding uygun mu? Dokunmatik hedef yeterli mi?

Erişilebilirlik: axe DevTools veya WAVE ile otomatik tarama. Sonra manuel test: klavye ile gezinme (Tab tuşu), ekran okuyucu (NVDA, JAWS), zoom (%200 büyütme). Renk kontrastı WebAIM Contrast Checker ile kontrol edin.

Performans: Lighthouse ile LCP, CLS metrikleri. Yükleme süresini etkiliyor mu? Render-blocking kaynak var mı? Görseller optimize mi? WebPageTest ile 3G bağlantıda test edin.

SEO: Google Search Console'da internal linking raporu. Linkler indexleniyor mu? Anchor text uygun mu? Duplicate content var mı? Schema markup doğru mu?

Tarayıcı uyumluluğu: Chrome, Firefox, Safari, Edge'de test edin. Eski tarayıcılarda (IE11) fallback var mı? Flexbox/Grid desteklenmiyor mu? Polyfill gerekiyor mu?

Dinamik Footer Yönetimi

İçerik statik HTML'de hardcode edilmemeli. Dinamik olmalı: CMS veya veritabanından beslenmeli. Neden? Her sayfada tekrar ediyor. Bir link değiştiğinde 100 sayfada manuel güncelleme yapmak sürdürülebilir değil.

CMS entegrasyonu: WordPress, Drupal, Contentful gibi sistemlerde widget veya menu olarak yönetilir. Tek yerden güncelleme, tüm sayfalara yansır. Çoklu dil desteği kolay: her dil için ayrı içerik.

Component-based yaklaşım: React, Vue, Angular gibi framework'lerde bir component. Props ile içerik geçilir, farklı sayfalarda farklı gösterilebilir. Örnek: landing page'de minimal, ana sayfada tam.

Server-side rendering (SSR): Next.js, Nuxt.js gibi framework'lerde her request'te render edilir. SEO dostu, hızlı ilk yükleme. Her request'te veritabanı sorgusu yapılırsa performans düşer. Çözüm: cache, içerik 1 saat cache'lenir.

Static site generation (SSG): Gatsby, Hugo, Jekyll gibi araçlarda build sırasında oluşturulur. Çok hızlı, CDN'de cache'lenir. İçerik değiştiğinde rebuild gerekir. Küçük değişiklik için tüm site rebuild etmek verimsiz.

Incremental static regeneration (ISR): Next.js'in özelliği, belirli aralıklarla yeniden oluşturulur. Örnek: 1 saatte bir. İçerik değiştiğinde hemen yansımaz, rebuild gerektirmez. Orta yol: hız + esneklik.

Gelecek Trendler

Tasarım değişiyor. Geleneksel çok sütunlu yapı yerini daha minimal tasarımlara bırakıyor. Özellikle mobil-first yaklaşımda uzun footer kullanıcı deneyimini bozuyor. Trend: accordion, collapsible footer, sticky footer.

Sticky footer: sayfa kısa olduğunda alta yapışır, boşluk kalmaz. CSS ile: min-height: 100vh + flexbox. Kullanıcı deneyimi iyileşir, sayfa dolu görünür.

Floating action button (FAB): mobilde yerine sağ altta yüzen buton. İletişim, WhatsApp, canlı destek. Kullanıcı her an erişebilir, scroll etmek zorunda değil. Dikkat: FAB içeriği gölgeleyebilir, z-index dikkatli ayarlanmalı.

Dark mode: koyu tema desteklemeli. Kullanıcı sistem tercihine göre (prefers-color-scheme) veya manuel toggle ile dark mode açar. Arka plan ve metin rengi değişir. Renk kontrastı korunmalı.

Personalization: kullanıcı davranışına göre içerik değişir. E-ticaret sitesinde kullanıcı "Kadın" kategorisinde gezindiyse kadın ürünleri vurgulanır. Dinamik içerik dönüşümü artırabilir.

Micro-interactions: linkler hover'da animasyon gösterir. Underline, renk değişimi, ikon hareketi. Küçük detaylar kullanıcı deneyimini iyileştirir. Abartmayın: her link için 500ms animasyon dikkat dağıtır.

Bakım ve Güncelleme Süreci

Bir kez kurulup unutulmamalı. Düzenli bakım gerekir. Çeyrek yılda bir audit yapın: linkler çalışıyor mu? İçerik güncel mi? Performans düştü mü? Erişilebilirlik sorun var mı?

Link audit: tüm linkleri test edin. 404 var mı? Redirect zinciri var mı? HTTPS'e geçiş yapıldı mı? Dış linkler hala aktif mi? Sosyal medya hesapları açık mı?

İçerik audit: iletişim bilgileri doğru mu? Yasal sayfalar güncel mi? KVKK metni yeni düzenlemelere uygun mu? Telif hakkı yılı doğru mu? Şirket adı, logo değişti mi?

Performans audit: Lighthouse skoru düştü mü? Yükleme süresi arttı mı? Yeni widget eklendi mi? Görseller optimize mi? Render-blocking kaynak var mı?

Erişilebilirlik audit: WCAG standartları değişti mi? Yeni erişilebilirlik sorunu tespit edildi mi? Klavye navigasyonu çalışıyor mu? Ekran okuyucu testi yapıldı mı?