Haber sitesi tasarımı: manşet, kategori ve mobil düzen ilkeleri

Ana sayfa: önem sırasını gösteren düzen

Basılı gazete, sayfa düzeniyle “bugün en önemli haber bu” der. Web’de bu rolü ana sayfa hiyerarşisi üstlenir. İyi bir haber ana sayfası dört katmandan oluşur:

1. Sürmanşet: Sayfanın en üstünde, tek satırlık, çoğunlukla görselsiz; son dakika veya günün çerçevesini kuran haber.
2. Manşet: Büyük görsel ve başlık; ilk ekranda tek bir manşet (veya en fazla bir manşet + iki yardımcı) olmalı. Beş eşit kutu, hiçbirinin önemli olmadığını söyler.
3. İkinci kuşak: Üç ile altı haber; başlık + küçük görsel. Kategori etiketleri burada okura yön verir.
4. Akış ve kategoriler: Son haberler listesi; kategori blokları (gündem, ekonomi, spor, yerel).

Teknik gereklilik: manşet değişimi editörün işi olmalı, geliştiricinin değil. Sürükle-bırak düzen, zamanlanmış manşet ve “bu saatte şu manşet” kuralları haber yazılımının temel özelliğidir; haber sitesi için yazılım seçiminde bunu ölçüt olarak kullandık.

Haber detay sayfası

Okurun en çok vakit geçirdiği sayfa budur; Google’ın NewsArticle verisini okuduğu sayfa da. Yukarıdan aşağıya sıra:

• Kategori + başlık (H1): Tek H1; başlık içeriği yansıtır, tıklama tuzağı değildir.
• Spot: İki–üç cümlelik özet; sosyal paylaşım açıklamasıyla aynı olabilir.
• Yazar, yayın tarihi, güncelleme tarihi: Görünür ve değişmez. Bu yalnızca iyi uygulama değil, kanuni zorunluluktur: içeriğin ilk yayın tarihi ile güncelleme tarihleri “her erişildiğinde değişmeyecek şekilde” içeriğin üzerinde gösterilir 5187 m.4.
• Ana görsel: 16:9, en az 1200 px genişlik (Discover için), alt metin ve kaynak notu.
• Gövde: 17–19 px yazı, 1,6 satır aralığı, 65–75 karakter satır genişliği; ara başlıklar H2.
• İlgili haberler ve etiketler: Okuru sitede tutar; iç bağlantı değeri yaratır.
• Düzeltme-cevap alanı: Gerektiğinde düzeltme metninin aynı sayfada, aynı puntoyla ve URL bağlantısıyla yayımlanabileceği bir yer 5187 m.14.

Kategori sayfaları ve site içi arama

Kategori sayfası, okurun “bugün ekonomide ne oldu” sorusuna verdiğiniz cevaptır; yalnızca kronolojik liste olmamalı. Üstte kategorinin kendi manşeti, altında sayfalanmış akış, yanda o kategoriye özel dosya sayfaları ve yazarlar iyi bir düzendir. Sonsuz kaydırma kullanacaksanız arama motorları için sayfalı URL’ler (?sayfa=2 gibi) de erişilebilir olsun. Site içi arama haber sitesinde zorunludur: arşiv büyüdükçe okur eski haberi aramayla bulur. Arama kutusu her sayfada aynı yerde, mobilde menüde; sonuç sayfası tarih ve kategoriye göre süzülebilir olmalı. Arama sayfalarını noindex yapın ki Google ince içerikli sonuç listelerini dizine almasın.

Mobil öncelik

Haber trafiğinin büyük kısmı telefondan gelir ve Google siteleri mobil sürümleriyle dizinler. Mobil tasarım kuralları:

• 360 px genişlikte tek sütun; 16 px kenar boşluğu; yatay kaydırma yok.
• Dokunma hedefleri en az 44 px; menü ve kategori sekmeleri başparmakla ulaşılır.
• Tablolar yatay kaydırılabilir sarmalayıcıda; görseller ekrana sığar.
• Yapışkan (sticky) reklam ve bildirim istekleri içeriği kapatmaz; Google’ın müdahaleci geçiş reklamı politikasına uyar.

Düzen kayması: haber sitelerinin baş belası

Okur bir haberi okumaya başlar, görsel ya da reklam yüklenir, metin aşağı kayar, yanlış yere tıklar. Buna düzen kayması (CLS) denir; Core Web Vitals’ın üç metriğinden biridir ve haber sitelerinde en çok başarısız olandır. Çözüm basittir ama disiplin ister:

• Her görsele width ve height verin; tarayıcı yer ayırsın.
• Reklam alanlarını sabit boyutlu kutular olarak tasarlayın; reklam gelmezse kutu boş kalsın, kaybolmasın.
• Web fontunu font-display: swap ve metrik uyumlu yedek fontla yükleyin.
• Sonradan yüklenen bileşenleri (son dakika şeridi, hava durumu, döviz) mevcut içeriğin üstüne değil, ayrılmış alana yerleştirin.

Hız ve ölçüm ayrıntıları için haber sitesi hosting seçimi ve haber sitesi SEO rehberi sayfalarına bakın.

Tipografi ve renk

Haber sitesinde tipografi dekor değil, okunurluktur. Tek bir yazı tipi ailesi (başlıkta kalın, gövdede normal) hem hızlı yüklenir hem tutarlı görünür. Başlık 28–36 px, gövde 17–19 px, satır aralığı 1,5–1,7. Renkte metin-zemin kontrastı en az 4,5:1 olmalı; kategori renkleri yalnızca etiket ve ince vurgu için kullanılmalı, metin renginin yerini almamalı. Koyu tema sunacaksanız kullanıcı seçimine bırakın ve tercihini saklayın.

Reklam yerleşimi

Reklam gelir kaynağıdır ama okur deneyimini bozarsa okur gider, gelir de gider. Dengeli yerleşim: başlık üstünde ince bir şerit, metin içinde her 4–5 paragrafta bir sabit boyutlu alan, sağ sütunda (masaüstü) bir ya da iki kutu, sayfa sonunda bir alan. Reklam ve sponsorlu içerik görünür şekilde etiketlenir; Google News politikaları da sponsorluğun açıkça belirtilmesini ve reklamın editoryal içerikten ayırt edilmesini ister. Gelir modelleri için haber sitesinden para kazanma rehberine bakın.

Haber sitesi teması seçerken kontrol listesi

Tasarım yerleştikten sonra yasal çerçeveye geçin: haber sitesi künye örneği ve zorunlu bilgiler ile internet haber sitesi beyannamesi.

Bu sayfa bilgilendirme amaçlıdır; hukuki danışmanlık değildir. Ayrıntı: Yasal uyarı.