Landing Page Yapısı Nasıl Olmalı?

Landing Page vs Ana Sayfa

Ana sayfada 10 farklı yol var: ürünler, hizmetler, blog, hakkımızda. Landing page'de tek yol: form doldur, ürün satın al, demo talep et. Bu fark mimariyi belirler.

Navigasyon menüsü tam mı, footer zengin mi, sidebar var mı? Landing page'de bunlar minimal veya yok. Her ek link dikkat dağıtır, kullanıcıyı hedeften uzaklaştırır. Paradox of choice: seçenek arttıkça karar süresi uzar, dönüşüm düşer.

Ana sayfa SEO odaklı, organik trafik için çalışır. Landing page kampanya odaklı: Google Ads, Facebook Ads, e-posta. Kullanıcı zaten bir vaat ile geldi, sayfa o vaadi karşılamazsa bounce rate %70'i geçer.

Internal linking yok, dış linklere çıkmaz. Kullanıcı girdi, ya dönüşüm gerçekleşir ya çıkar. Orta yol yok.

Hero Section: İlk 3 Saniye

İlk 3 saniyede karar veriliyor: kalacak mı, çıkacak mı? Hero section şu soruları cevaplar: Bu sayfa ne sunuyor? Bana ne faydası var? Neden güvenmeliyim?

Başlık net, kısa, fayda odaklı. "Yazılım Çözümleri" belirsiz. "E-Ticaret Sitenizi 30 Günde Kurun" net. Reklam metni ile uyumlu olmazsa bounce rate artır. Kullanıcı "Ücretsiz Demo" reklamına tıkladı, başlık "Ücretsiz Demo Alın" diyecek.

Alt başlık 1-2 cümle: "Hazır şablonlar, ödeme entegrasyonu ve 7/24 destek ile hızlı başlayın." Fayda somutlaştı.

CTA butonu belirgin, kontrast renk, eylem odaklı. "Gönder" yerine "Ücretsiz Demo Al". Above-the-fold'da, scroll etmeden görünür. Mobilde minimum 44x44px.

Hero görseli ürünü gösterir. SaaS ise dashboard ekran görüntüsü, fiziksel ürün ise yüksek çözünürlüklü fotoğraf. Stok fotoğraf değil, gerçek görsel.

Sosyal kanıt: "10.000+ mutlu müşteri", "4.8/5 yıldız", "Forbes'ta yer aldık". Sayı somut, abartısız. "Binlerce müşteri" belirsiz, "12.847 müşteri" inandırıcı.

Değer Önerisi ve Fayda Listesi

Hero section'dan sonra detay gerekiyor: bu ürün tam olarak ne yapıyor? Bana nasıl fayda sağlıyor?

3-5 ana fayda: başlık + kısa açıklama + ikon. "Hızlı Kurulum: 30 dakikada siteniz hazır, teknik bilgi gerektirmez." Fayda özellik değil. "Bulut tabanlı" özellik, "Her yerden erişin" fayda.

Somut olsun. "Daha iyi performans" belirsiz. "Sayfa yükleme süresi %60 azalır" somut. "Kolay kullanım" belirsiz. "5 dakikada ilk kampanyanızı başlatın" somut.

Görseller faydayı destekler, dikkat dağıtmaz. Büyük, renkli, animasyonlu görseller metinden daha fazla dikkat çekerse kullanıcı metni okumaz.

En önemli fayda en üstte. İlk 2 fayda kritik. Analytics'e bakın: hangi faydalar dönüşümü artırıyor? Farklı sıralamaları test edin.

Sosyal Kanıt ve Güven Unsurları

Ürünü beğendi ama güvenmiyor. "Bu site gerçek mi? Ödeme güvenli mi? Başkaları kullanıyor mu?"

Müşteri yorumları: 3-5 gerçek yorum. Fotoğraf + isim + şirket/pozisyon. "Harika ürün!" yetersiz. "E-ticaret sitemizi 2 haftada kurduk, ilk ayda 50 sipariş aldık. Destek ekibi her soruda yardımcı oldu." - somut, inandırıcı. 2-3 cümle yeterli.

Yıldız puanı: 4.5/5 veya 4.8/5 ideal. 5.0/5 şüpheli görünür. Puan sayısı gösterin: "4.7/5 (1.247 değerlendirme)". 12 değerlendirme güven vermez.

Logo duvarı: tanınmış markaların logoları, 6-12 adet. Dikkat: logoları izinsiz kullanmayın, yasal sorun çıkar.

Sertifikalar: SSL, ödeme güvenliği (Visa, Mastercard), sektör üyelikleri. "256-bit SSL Şifreleme", "PCI DSS Uyumlu". Açıklama ekleyin: "Ödeme bilgileriniz bankalar gibi korunur."

Medya bahisleri: "Forbes'ta yer aldık", "TechCrunch'ta öne çıktık". Fakat küçük blog yazısını "Medyada biz" olarak sunmak güven kaybettirir.

İstatistikler: "10.000+ aktif kullanıcı", "1M+ işlem", "99.9% uptime". Güncel olsun. "2020'de 5.000 kullanıcı" 2026'da eski görünür.

Form Tasarımı ve Optimizasyonu

Form dönüşüm anı. Kötü tasarlanmışsa kullanıcı son anda vazgeçer. Form optimizasyonu dönüşüm oranını %20-50 artırabilir.

Kaç alan? Mümkün olduğunca az. Her ek alan dönüşümü %5-10 düşürür. Sadece gerekli: isim, e-posta, telefon. "Şirket adı", "sektör", "çalışan sayısı" sonraki adımda sorulur.

Alan etiketleri kısa: "E-posta Adresiniz" yerine "E-posta". Placeholder kullanın: "[email protected]". Fakat placeholder etiketi tamamen değiştirmemeli, hem etiket hem placeholder olsun. Yoksa kullanıcı alan doldurduğunda ne yazdığını unutur.

Zorunlu alanlar yıldız (*) ile işaretlenir. Tüm alanlar zorunluysa yıldız gereksiz. Opsiyonel alanlar "(opsiyonel)" yazısı alır.

Hata mesajları açıklayıcı: "Geçersiz e-posta" yerine "Lütfen geçerli bir e-posta adresi girin (örnek: [email protected])". Hata mesajı alan yanında, kırmızı renk. Tüm formu kırmızı yapmayın.

Buton metni eylem odaklı: "Gönder" jenerik. "Ücretsiz Demo Al", "Hemen Başla", "İndir" spesifik. Mobilde minimum 44x44px.

Gizlilik notu form altında: "E-posta adresinizi üçüncü taraflarla paylaşmıyoruz." KVKK için checkbox: "Gizlilik politikasını okudum, kabul ediyorum."

Çok adımlı form: Adım 1 temel bilgiler, Adım 2 detaylar, Adım 3 tercihler. Progress bar: "Adım 2/3". Motivasyon artar.

CTA Stratejisi ve Yerleşim

Kaç CTA? Minimum 2: hero section'da ve sayfa sonunda. Uzun sayfada 3-4: hero, ortada, sonunda. Her CTA aynı eylemi tetikler. Farklı CTA'lar (Demo Al, Fiyat Öğren, İletişim) kullanıcıyı şaşırtır.

Buton rengi kontrast olsun. Sayfa mavi tonlarda, buton turuncu veya yeşil. A/B testler gösteriyor: kırmızı ve turuncu daha fazla tıklama alıyor. Oysa marka kimliğine uygun olsun.

Buton boyutu belirgin ama baskın değil. Çok büyük agresif görünür, çok küçük kaybolur. Genellikle 150-250px genişlik, 44-60px yükseklik.

CTA metni kısa, eylem odaklı, fayda vurgulu: "Gönder" yerine "Ücretsiz Başla". İlk şahıs kullanın: "Ücretsiz Denemeye Başla" yerine "Ücretsiz Denememi Başlat".

Mikro-kopya buton altında: "Kredi kartı gerektirmez", "İstediğiniz zaman iptal edin", "Kurulum 2 dakika". Şüpheleri giderir.

Sticky CTA mobilde ekranın altında sabit. Scroll ederken buton görünür kalır. İçeriği gölgelememeli, kapatma (X) butonu olsun. Bazı kullanıcılar rahatsız edici bulur.

Sayfa Uzunluğu ve İçerik Dengesi

Ne kadar uzun? Ürün karmaşıklığına bağlı. Basit ürün (e-kitap, webinar kaydı): kısa sayfa, 1-2 ekran. Karmaşık ürün (SaaS, danışmanlık): uzun sayfa, 5-10 ekran.

Kısa sayfa: hero + fayda + form + sosyal kanıt. Hızlı yüklenir, dikkat dağıtmaz, mobil dostu. Sayfa düzeni ve grid yapısı iyi kurulursa kısa sayfada bile içerik hiyerarşisi netleşir. Oysa detay yok, sorular cevapsız kalır. Düşük fiyatlı, düşük riskli ürünler için uygun.

Uzun sayfa: hero + fayda + nasıl çalışır + özellikler + fiyatlandırma + SSS + sosyal kanıt + form. İtirazları cevaplar, güven oluşturur. Fakat scroll gerektirir, yükleme süresi uzun. Yüksek fiyatlı, yüksek riskli ürünler için.

Optimal uzunluk A/B test ile bulunur. Genel kural: B2C kısa, B2B uzun. Impulsive satın alma (e-kitap, kurs) kısa, düşünülmüş satın alma (yazılım, danışmanlık) uzun.

İçerik dengesi: %60 metin, %40 görsel. Çok metin yorar, çok görsel dikkat dağıtır. Görseller metni destekler: ekran görüntüsü, infografik, ikon. Dekoratif görseller gereksiz.

Performans ve Yükleme Hızı

Her 1 saniye gecikme dönüşümü %7 düşürür. 3 saniyeden uzun yükleme %40 bounce rate. Mobilde ve ücretli trafik kampanyalarında performans kritik.

Görsel optimizasyonu: hero görseli 100-200 KB. WebP formatı JPEG/PNG'den %30 daha küçük. Lazy loading: below-the-fold görseller scroll edilince yüklenir.

Font yükleme: font dosyası 50-100 KB. Google Fonts yerine self-hosted font daha hızlı. Font-display: swap kullanın, font yüklenene kadar sistem fontu gösterilir.

JavaScript minimize: gereksiz script yok. Analytics, heatmap, chatbot scriptleri defer veya async ile yüklenir.

CSS optimize: critical CSS inline, non-critical CSS ayrı dosyada. Kullanılmayan CSS temizlenir (PurgeCSS).

Server response time: 200ms altında. CDN kullanın, statik dosyalar edge'de cache'lenir. Server-side rendering yerine static site generation daha hızlı.

Lighthouse skoru: 90+ hedefleyin. LCP 2.5 saniye altı. FID 100ms altı. CLS 0.1 altı. Bu metrikler Google Ads Quality Score'u etkiler.

Mobil Optimizasyon

Trafiğin %60-70'i mobil. Masaüstünde güzel görünen sayfa mobilde kullanılamaz olabilir.

Responsive tasarım: tek HTML, CSS ile farklı ekranlara adapte. Media query: 768px altında tek sütun, üstünde iki sütun. Mobilde font boyutu 16px minimum, daha küçük zoom tetikler.

Dokunmatik hedef: buton ve linkler minimum 44x44px, aralarında 8px boşluk. Küçük hedef yanlış tıklamaya neden olur.

Form mobilde: her alan tam genişlik (100%), dikey sıralama. Input type doğru: e-posta için type="email", telefon için type="tel". Mobil klavyeyi optimize eder.

Hero görseli mobilde: yatay görsel sıkışır. Mobil için dikey veya kare görsel kullanın. Ya da görseli gizleyin, sadece başlık ve CTA gösterin.

Scroll davranışı: mobilde scroll doğal. Uzun sayfa sorun değil. Oysa sticky CTA ekleyin, kullanıcı her an dönüşüm yapabilsin.

Video mobilde: autoplay kapalı, kullanıcı başlatır. Mobil veri tüketimi yüksek, otomatik video yükleme rahatsız eder. Video poster ekleyin, play butonu belirgin.

A/B Test Stratejisi

Sürekli test edin, optimize edin. İki versiyon karşılaştırın: hangisi daha iyi dönüşüm sağlıyor? Test edilecek elementler: başlık, CTA metni, buton rengi, form alanları, görsel, sosyal kanıt.

Başlık testi: "E-Ticaret Sitenizi 30 Günde Kurun" vs "Kendi E-Ticaret Sitenizi Hızlıca Başlatın". Başlık değişikliği dönüşümü %20-50 artırabilir.

CTA testi: "Ücretsiz Dene" vs "Hemen Başla". Yeşil buton vs turuncu buton. Küçük değişiklikler büyük fark yaratır.

Form testi: 5 alan vs 3 alan. Uzun form daha fazla bilgi toplar fakat dönüşüm düşürür. Kısa form daha fazla dönüşüm fakat lead kalitesi düşük.

Sosyal kanıt testi: 3 yorum vs 6 yorum. Yorumlar hero section'da mı, ortada mı?

Test süresi: minimum 2 hafta, 100+ dönüşüm. Daha kısa test istatistiksel anlamlılık sağlamaz. Trafik azsa test süresi uzar.

Çok değişkenli test: birden fazla element aynı anda test edilir. Başlık + CTA + görsel. Dikkat: çok değişken karmaşıklaştırır, hangi değişiklik etkili anlaşılmaz. Önce A/B test, sonra çok değişkenli.

Kampanya Tipine Göre Strateji

Her kanal farklı kullanıcı davranışı, farklı beklenti getirir.

Google Ads: reklam metni ile tam uyum. Kullanıcı "ücretsiz demo" araması yaptı, reklam "ücretsiz demo" dedi, sayfa başlığı "ücretsiz demo" olsun. Uyumsuzluk bounce rate artırır, Quality Score düşer.

Facebook Ads: görsel odaklı. Facebook'ta görsel gördü, tıkladı. Sayfa görseli reklam ile tutarlı olsun. Facebook trafiği "soğuk", kullanıcı sizi tanımıyor. Daha fazla sosyal kanıt, daha fazla güven unsuru gerekir.

E-posta kampanyası: kullanıcı sizi tanıyor, e-posta listesinde. Daha az sosyal kanıt gerekir, daha direkt CTA. E-posta konusu ile sayfa başlığı uyumlu olsun.

Organik trafik: kullanıcı arama yaptı, organik sonuçtan geldi. SEO odaklı, içerik zengin. Meta description ile başlık uyumlu. Breadcrumb, internal linking, footer tam.

Retargeting: kullanıcı daha önce siteyi ziyaret etti, dönüşüm yapmadı. Önceki ziyareti hatırlatın: "Geri döndünüz! İşte size özel %20 indirim."

Landing page hatalarının büyük çoğunluğu aynı kökten gelir: odak eksikliği. Tek sayfada 5 farklı CTA varsa kullanıcı hangisini seçeceğini bilemez ve hiçbirini seçmez. Reklam metniyle sayfa başlığı uyumsuzsa — "ücretsiz deneme" diyerek gelen kullanıcı "satın al" ekranıyla karşılaşırsa — bounce rate %70'i geçer. Form 12 alan istiyorsa kullanıcı doldurmaktan vazgeçer; sadece zorunlu alanlar kalmalıdır. Güven unsuru olmayan sayfa, özellikle "soğuk" trafik için dönüşüm üretmekte zorlanır. Yavaş yükleme ve mobil uyumsuzluk bu sorunların üstüne eklenir; 5 saniyede açılan sayfa ücretli trafik bütçesini eritir. "En iyi çözüm", "kaliteli hizmet" gibi jenerik ifadeler ise ölçülebilir fayda yerine geçemez — "30 günde kurulum", "%60 daha hızlı" gibi spesifik iddialar kullanıcıyı ikna eder.

Canlıya almadan önce tarayıcı ve cihaz uyumluluğunu, form akışını (hata mesajları, başarı ekranı, e-posta bildirimi), tüm linkleri ve performans metriklerini kontrol edin. Analytics ve conversion tracking kurulmadan trafik almak, optimize edilecek veriyi boşa harcamak demektir. Heatmap ve session recording araçları — Hotjar, Clarity — ilk haftalarda hangi bölümlerin işe yaradığını, nerede terk gerçekleştiğini gösterir. Landing page bir kez kurulup bırakılan proje değildir; bu ilk veriler sonraki test döngüsünün başlangıç noktasıdır.