Web Sitesinde H1, H2 ve Başlık Hiyerarşisi

Başlık hiyerarşisi, bir sayfanın hem insana hem arama motoruna nasıl okunduğunu belirler. H1 konuyu adlandırır; H2 bölümleri ayırır; H3 ayrıntıyı açar. Bu düzen bozulduğunda Google sayfayı tarar ama niyeti netleştiremez, ziyaretçi de kaybolur. Bu yazı slogan üretmez: H1’in tek olması, H2’lerin soru cevaplaması ve başlıkların iç linkle nasıl bağlanacağı üzerine durur.

Kadıköy’de kurumsal site, e-ticaret ve özel yazılım teslim eden Dijital Website ekibi olarak başlıkları yayından sonra “SEO eklentisi” gibi eklemiyoruz. Web tasarım keşfinde sitemap ile birlikte H1–H2 haritası çıkar; teknik SEO sprintinde şema ve indeksleme aynı haritaya oturur.

H1 ne işe yarar, neden tek olmalıdır?

H1, sayfanın birincil konusudur. Ana sayfada markanın ne sattığı, hizmet sayfasında hizmetin adı, blogda yazının konusu durur. Aynı sayfada iki H1, iki farklı “bu sayfa budur” iddiası demektir. Google bunu cezalandırmak zorunda değildir; çoğu zaman sayfayı belirsizleştirir. Belirsiz sayfa, rekabetli İstanbul aramalarında geride kalır.

H1 ile title etiketi karıştırılmamalıdır. Title tarayıcı sekmesinde ve SERP’te görünür; H1 sayfa gövdesindedir. İkisinin aynı cümle olması şart değildir, aynı niyeti taşıması şarttır. Title’a şehir ve hizmet eklerken H1’i okunabilir tutmak, tık ve tarama arasında denge kurar. Uygulamalı çerçeve için SEO uyumlu web sitesi nasıl olmalı yazısına bakın.

H1’e “en iyi”, “garantili”, “1. sayfa” gibi vaatler yazmak hem etik hem risklidir. Google sıralama vaat etmez; sizin H1’iniz de etmemelidir. H1 işi tanımlar: Google İşletme Profili nasıl düzenlenir, site içi linkleme nasıl yapılır. Tanım netse alt başlıklar yükü paylaşır.

• Tek H1: sayfa başına bir konu cümlesi.
• Görünür H1: görsel içinde gömülü, CSS ile gizlenmiş H1 tarama ve erişilebilirliği zedeler.
• Kısa H1: 8–12 kelime çoğu kurumsal ve hizmet sayfasında yeter.
• Niyet uyumu: H1, kullanıcının arama cümlesine cevap verir; slogan tekrar etmez.

H2 bölümleri: soru, işlem, kanıt

H2’ler H1’i parçalara ayırır. İyi bir H2, tek başına okunduğunda bölümün ne anlattığını söyler. “Giriş”, “Detaylar”, “Sonuç” gibi boş etiketler tarayıcıya bilgi vermez. Bunun yerine “URL ve title nasıl yazılır”, “Mobilde başlık neden kırılır”, “Yerel sayfada H2 nasıl kullanılır” gibi işlem cümleleri yazın.

Hizmet sayfalarında H2 sırası genelde şöyledir: kimler için, nasıl ilerler, teknik kapsam, sık sorular, nasıl başlanır. Bu sıra SEO hizmeti ve kurumsal web tasarım sayfalarında keşif çıktısıdır; dekoratif accordion değildir. Blogda H2’ler okuyucunun tarama davranışına göre dizilir: tanım, kural, hata, kontrol listesi, iç link.

H2 içine anahtar kelimeyi zorla tıkamak yerine semantik komşuları kullanın. “Başlık hiyerarşisi” yazısının H2’lerinde H1, H2, H3, title, erişilebilirlik, iç linkleme doğal durur. Aynı kelimeyi her H2’de tekrarlamak, 2012 dönemi yönergesidir; bugün niyet ve kapsama bakılır.

H3 ve daha alt düzeyler

H3, bir H2’nin alt maddesidir. H2 yokken H3 açmak merdivende basamak atlamak gibidir. Ekran okuyucular ve Google bu merdiveni kullanır. H4 nadiren gerekir; çoğu kurumsal sitede H1–H3 yeter. Tasarım sisteminde “görsel olarak büyük” ile “HTML başlığı” ayrı tutulmalıdır. Kart başlığını H2 yapmak, sayfada on H2 üretir ve asıl bölüm kaybolur.

HTML web sitesi gibi ince vitrinlerde başlık sayısı azdır; her H2 gerçek bir bölüm olmalıdır. Next.js App Router’da her route kendi H1’ini taşır; layout’taki site adı H1 olmamalıdır. Bu hata, tüm iç sayfaların H1’ini marka adına kilitleyip hizmet niyetini siler.

Başlık, iç link ve site mimarisi

Başlıklar yalnız okunmaz; tıklanır. Bir H2’nin altında ilgili hizmete, ilgili yazıya ve bir proje örneğine giden üç iç link, otoriteyi dağıtır. Rastgele footer linki değil, cümle içi bağdır. Site içi linkleme nasıl yapılır yazısında bu ağı ayrıntılandırıyoruz; burada kural şudur: link metni H2’nin konusunu tekrar etmeli, “tıklayın” dememelidir.

Hub sayfa (ör. web tasarım) H2’lerle alt hizmetleri tanıtır: kurumsal, HTML, e-ticaret. Alt sayfa H1’i kendi konusudur; hub’a “Web tasarım hizmetlerimize dönün” ile bağlanır. Böylece tarama derinliği artar, kanibalizasyon azalır. Aynı H1’i üç URL’de kopyalamak Google’ı seçim yapmaya zorlar; çoğu zaman hepsi zayıflar.

Somut işler projelerdadır. Bir H2 “örnek teslim” ise proje detayına gidin; stok fotoğraf alt yazısı H2 olmasın. Kanıt başlığı, kanıt linki ister.

Yerel sayfalarda başlık disiplini

Yerel niyette H1 şehri ve hizmeti taşır; her H2’ye “İstanbul Kadıköy” yazılmaz. NAP ve harita yerel SEO ve Google Haritalar işletme kaydı sayfalarında durur. Profil düzeni için Google İşletme Profili nasıl düzenlenir ayrı bir rehberdir. H2’ler işlem anlatır: yorum yanıtlama, kategori seçimi, hizmet listesi. Şehir listesini H2 olarak şişirmek spam sinyalidir.

Ofis adresi ve telefon iletişim ve şemada aynıdır. Başlıkta “yanınızdayız” demek yerine adresin görünür olması yerel güveni taşır.

Sık yapılan başlık hataları

Tema H1’i: birçok hazır temada logo yanı veya slider içindeki büyük yazı H1’dir; asıl konu H2’ye düşer. Kaynak kodu kontrol edin.

Görsel metin: başlığı PNG olarak koymak tarama ve çeviri için kayıptır. Mümkünse HTML başlık, görsel destek.

Aynı H2 tekrarı: her hizmet kartında “Neden biz?” aynı H2 ise sayfa tek konu gibi görünmez, şablon gibi görünür.

FAQ’yi H2 yağmuruna tutmak: her soruyu H2 yapmak, asıl bölümlere rakip çıkar. SSS bloğunda sorular H3, blok başlığı tek H2 olabilir.

Gizli başlık: display:none H1 eski bir hile gibi durur ve güveni zedeler.

Yayın öncesi bu maddeleri yayın öncesi teknik SEO kontrol listesi ile tarayın. H1 sayısı, boş title, yinelenen H2 orada kapanır.

E-ticaret ve yazılım panellerinde başlık

Kategori sayfasının H1’i kategori adıdır; “Ucuz”, “En uygun” ekleri filtre değil, gürültüdür. Ürün H1’i ürün adıdır. Filtre URL’lerinde ayrı H1 üretmek kopya kümesi yaratır; canonical ve noindex politikası e-ticaret sitesi keşfinde yazılır. Mağaza yazılımı ayrıysa e-ticaret yazılımı ürün sayfasına bakın.

Panel, API ve otomasyonda kamu sayfalarının H1’i kullanıcıya görünür kalmalıdır. Özel yazılım tesliminde admin rotası indekslenmez; kamu landing’in H1’i iş problemidir, framework adı değil. Altyapı seçimi Node.js veya PHP olsa da başlık kuralı değişmez.

Erişilebilirlik ve Core Web Vitals ile ilişki

Başlıklar yalnızca SEO değildir. Ekran okuyucu “başlıklar listesi” ile sayfada gezer. Mantıklı H2, klavye kullanıcısına içindekiler sunar. Görsel hiyerarşi (punto, ağırlık) HTML düzeyini yansıtmalıdır; 14px H2 ve 32px paragraf kafa karıştırır.

Devasa H1 görseli LCP’yi şişirebilir. Tipografi HTML ise LCP genelde hero görselindedir; başlığı bitmap yapmak hem hız hem SEO kaybıdır. Hız ve tarama için teknik SEO ve site hızı yazısına geçin.

Uygulama: bir hizmet sayfası iskeleti

Örnek: Kadıköy web tasarım hizmet sayfası. H1: “SEO uyumlu web tasarım”. H2: kimler için, teslim kapsamı, teknik SEO iskeleti, süreç, SSS, iletişim. H3’ler kapsam altında: kurumsal, e-ticaret, landing. Her H2’nin ilk paragrafı bölümü özetler; anahtar kelimeyi üç kez tekrarlamaz. CTA H2 olmaz; düğme metnidir.

Keşifte bu iskeleti müşteriyle onaylarız. Onaysız H2 yağmuru, yayında silinen maliyettir. Süre ve beklenti için SEO çalışması ne kadar sürer yazısı ayrı bir çerçeve sunar; başlık işi ilk 30 günün teknik zeminindedir.

Ölçüm: başlıkların işe yarayıp yaramadığı

Search Console’da sayfa raporunda sorgu–sayfa eşleşmesine bakın. H1 “web tasarım” iken sorgular “ucuz logo” ise niyet kayması vardır; H1’i şişirmek yerine içerik ve iç linki düzeltin. Başlık tıklama oranı title ve description işidir; H1 sayfa içi netlik işidir. İkisini aynı KPI’da eritmeyin.

Isı haritası ve kaydırma, H2’lerin gerçekten okunup okunmadığını gösterir. Kimse üçüncü H2’ye inmiyorsa metin uzun değil, ilk iki bölüm niyeti kapatmıyordur. Kısaltmak bazen H2 eklemekten iyidir.

Sık sorulanlar

H1’de şehir geçmeli mi? Yerel niyetli sayfada evet, her blogda hayır. Şehri H1’e tıkamak yerine yerel sayfa ve GBP’yi güçlendirin.

H1 ile title aynı mı olsun? Yakın olsun, kopya olmak zorunda değil. Title’a marka eklemek yaygındır; H1 markasız kalabilir.

Blogda H1 yazı başlığı mı? Evet. Kategori adı H1 olmamalıdır.

Kaç H2 idealdir? Konuyu bölen kadar. 2 de olur, 10 da; boş H2 olmaz.

Başlık hiyerarşisi bir kez kurulup unutulmaz. Yeni sayfa, yeni H1. Yeni bölüm, yeni H2. Bu disiplin web tasarım, SEO ve iletişim keşfinde yazılı teslim maddesidir. 15 dakikalık keşifte mevcut H1 sayınızı tarayıcıda birlikte sayarız; çoğu sitede ilk düzeltme buradan başlar.

Kurumsal sitede örnek akış

Kurumsal bir üretim veya hizmet şirketinde ana sayfa H1’si markanın ne yaptığını tek cümlede söyler. Hizmetler sayfası ayrı H1 taşır; ana sayfadaki hizmet kartları H2 veya H3 olur, ikinci bir H1 olmaz. Hakkımızda sayfasında H1 ajansı tanımlar, H2’ler tarihçe, NAP, süreç ve iletişimdir. Bu ayrım kurumsal web tasarım keşfinde sitemap ile birlikte çizilir.

Blog listesinde H1 “Blog” veya “Yazılar” olabilir; kart başlıkları H2 veya H3’tür. Yazı detayında H1 yazının kendi başlığıdır. Liste ile detayı aynı H1’de birleştirmek, Google’ın hangi URL’yi sorguya bağlayacağını bulandırmaktır.

İletişim sayfasında H1 “İletişim” yeter; ofis adını H1 yapmak yerel sayfa ile çakışır. Adres H2 veya düz paragrafta, iletişim formunun yanında durur.

Çok dilli sitede başlık

Her dil kendi H1’ini taşır. Türkçe H1’i İngilizce sayfada gizlemek, hreflang ile çelişen bir kopya üretir. Çeviri, kelime kelime anahtar yığmak değildir; o dildeki arama niyetine göre H1 yazılır. “Web design Istanbul” ile “İstanbul web tasarım” aynı sayfanın iki H1’i olamaz; iki URL, iki H1.

Otomatik çeviri eklentileri çoğu zaman H1’i bozar, şemayı tek dilde bırakır. Yayın öncesi her dilde H1 ve title ayrı kontrol edilir. Bu madde yayın öncesi teknik SEO kontrol listesine dildir.

Tasarım sistemi ile HTML’i ayırmak

Tasarımda “display heading” 64px olabilir; bu onun H1 olduğu anlamına gelmez. Bileşen kütüphanesinde görsel stil ile semantik etiket ayrı prop olmalıdır. Aksi halde her kahraman alanı H1 üretir. Kod incelemesinde “h1 sayısı” Search Console kadar erken bir kapı kontrolüdür.

Koyu hero üzerinde beyaz yazı, kontrast yetersizse hem erişilebilirlik hem de “görünür H1” kuralı bozulur. H1 okunmuyorsa tarayıcı için var, kullanıcı için yoktur. Kullanıcı H1’i görmüyorsa niyet de netleşmez.

Yazar ve editör için kısa protokol

Yeni sayfa açılırken önce tek cümlelik konu yazılır; bu cümle H1 adayıdır. Bölümler H2 olur. Taslakta “Giriş / Gelişme / Sonuç” başlıkları silinir, işlem cümleleri yazılır. İç link H2 altına, çapa tanımlayıcı. Yayın öncesi kaynak kodda H1 sayılır. Bu protokol ajans içi editör notudur; müşteri metnini “daha SEO’lu” diye H1’e tıkmak protokolü bozar.

Metin geldiğinde tasarımcı punto büyütür, geliştirici etiketi düşürür. İkisi konuşmazsa H1 kayar. Sprintte başlık haritası Figma notu değil, HTML iskeletidir.