Hero Alanı (Hero Section) Nedir?
Kısa tanım
Hero alanı, bir web sayfasının en üstünde, menünün hemen altında yer alan ve ziyaretçiye sayfanın ne sunduğunu ilk bakışta anlatan geniş giriş bölümüdür. Genellikle ana başlığı (H1), kısa bir değer önerisini, birincil eylem çağrısını ve destekleyici bir görsel ya da videoyu içerir. Sayfanın ilk izlenimini ve çoğu zaman en büyük görünür öğesini belirlediği için hem tasarım hem performans açısından kritik bir alandır.
Diğer adları: hero section, hero banner, karşılama alanı, manşet alanı
Hero alanı ne iş görür?
Ziyaretçi bir sayfaya geldiğinde ilk birkaç saniyede üç soruya cevap arar: Doğru yerde miyim? Burada ne yapabilirim? Neden devam etmeliyim? Hero alanı bu sorulara yanıt veren bölümdür. Bu yüzden içeriği de genellikle aynı iskeleti izler:
- Ana başlık: Sayfanın tek H1'i çoğu zaman buradadır ve sayfanın konusunu, kullanıcının aradığı ifadeye yakın biçimde söyler.
- Destekleyici cümle: Başlığı somutlaştıran, kime ve ne için olduğunu anlatan bir iki satır.
- Birincil eylem: Sayfanın asıl hedefine giden tek ve belirgin bir CTA; gerekiyorsa daha zayıf görünümlü ikinci bir seçenek.
- Görsel: Ürünü, hizmetin sonucunu veya kullanım bağlamını gösteren fotoğraf, ekran görüntüsü ya da illüstrasyon.
- Güven işareti (isteğe bağlı): Müşteri logoları, puan, kısa bir referans.
Hero metninin H1 olarak işaretlenmesi ve altındaki bölümlerin H2'lerle devam etmesi, sayfanın başlık yapısını hem okuyucu hem arama motoru için netleştirir.
Performans: çoğu zaman LCP öğesidir
Hero görseli ya da büyük başlık metni, genellikle sayfanın ilk ekranındaki en büyük öğedir; yani LCP ölçümünü doğrudan belirler. web.dev'in LCP optimizasyon rehberi iki noktada nettir: LCP görseli asla tembel yüklenmemeli ve tarayıcıya bu kaynağın önemli olduğu fetchpriority="high" ile bildirilebilir.
<section>
<h1>Muhasebe ekipleri için fatura otomasyonu</h1>
<p>Gelen faturaları okur, onaya gönderir, ERP'ye aktarır.</p>
<a href="/demo/">Demo talep et</a>
<img src="/img/panel-1200.avif"
srcset="/img/panel-640.avif 640w, /img/panel-1200.avif 1200w"
sizes="(width >= 64rem) 50vw, 100vw"
width="1200" height="800"
alt="Fatura onay ekranı"
fetchpriority="high">
</section>Burada loading="lazy" yoktur, boyutlar verilmiştir (düzen kayması olmaz) ve srcset ile telefona küçük dosya gider. Görselin modern bir formatta ve doğru boyutta sunulması, görsel optimizasyonunun en çok fark yaratan uygulamasıdır. Başlığı görselin içine metin olarak gömmek ise hem erişilebilirliği hem arama motorlarının metni okumasını zorlaştırır.
Slider, video ve tam ekran hero'nun bedeli
Dönen slider'lar birden fazla mesajı aynı yere sığdırma isteğinden doğar; ancak ilk slayttan sonraki içerik çoğunlukla görülmez, her slayt ek görsel yükü getirir ve otomatik dönen içerik okumayı böler. Tek ve net bir mesaj genellikle daha iyi çalışır. Arka plan videoları sayfa ağırlığını ciddi biçimde artırır; kullanılacaksa sessiz, kısa, sıkıştırılmış olmalı, bir poster görseli bulunmalı ve hareket azaltma tercihi olan kullanıcılar için durdurulmalıdır. Tam ekran yüksekliğindeki hero'lar ise özellikle mobilde sayfanın geri kalanını ilk ekranın dışına iter ve kullanıcı aşağıda içerik olduğunu fark etmeyebilir.
Okunabilirlik ve odak
Fotoğraf üzerine yazılan beyaz metin, görselin açık tonlu bir bölgesine denk geldiğinde okunmaz hâle gelir. Metnin arkasına yarı saydam bir katman eklemek ya da metni görselin yanına almak, renk kontrastını her ekran boyutunda güvenceye alır. Hero'nun sayfadaki diğer bölümlerden belirgin biçimde ayrışması gerekir, ama içinde rekabet eden beş öğe varsa hiçbiri öne çıkmaz. "İlk ekranda her şey görünmeli" düşüncesi yerine, ekranın üst kısmında yalnızca sayfanın vaadini ve ilk adımı göstermek daha sağlıklı bir hedeftir.