H1 és címhierarchia

A címsorok adják a leggyorsabb támpontot arról, miről szól egy oldal. Ha ez hiányzik, a robotnak a bekezdésekből kell kitalálnia a témát, és ez pontatlanabb eredményt ad.

• Keresőoptimalizálás: a H1 és a Title (címsor) együtt erősíti a téma jelzését. Ha a kettő teljesen mást állít, gyengül az üzenet.
• AI-értelmezhetőség: a nyelvi modell a címsorok mentén szeleteli a szöveget. Rossz tagolás esetén összekeveredik az ár, a folyamat és a referencia.
• Akadálymentesség: a képernyőolvasók címsorlistából navigálnak. A hiányzó szintezés miatt a felhasználó elveszik az oldalon, lásd akadálymentesség (WCAG, EAA).
• Üzleti hatás: a strukturált oldalon a látogató 5 másodperc alatt megtalálja az árat vagy a folyamatot. A fal-szerű szövegben nem.

A riportokban ezt látjuk a leggyakrabban: a sablon a logóra vagy a menüre tesz H1-et, a valódi oldalcím pedig H2-ként jelenik meg.

Minden HTML-oldalra vonatkozik, típustól függetlenül. A hangsúly viszont eltér.

• Tartalmas aloldalak (szolgáltatás, blog, kategória, termék): itt a legfontosabb, mert hosszú a szöveg.
• Webshopok: a terméknév legyen a H1. A kategórianév a kategórialapon az.
• Kezdőlap: itt gyakran a szlogen a H1. Ez elfogadható, ha a szlogen megmondja, mit csináltok.
• Landing oldalak: kampányoldalon is csak egy H1 kell, hiába van több szekció.

Nem számít érdemben staging vagy jelszóval védett fejlesztői környezetben, illetve olyan végpontokon, amelyek nem HTML-t adnak vissza (API, PDF, XML). A noindex oldalakon a SEO-hatás elmarad, de az akadálymentességi része ott is él.

1. Nyisd meg az oldalt, és nyomj Ctrl+U-t a forráskódhoz. Keress rá a <h1 karakterláncra.
2. Ha a tartalmat JavaScript rakja ki, használd inkább a devtools Elements fülét. Ott a kirenderelt DOM-ot látod.
3. A devtools Console-ba illeszd be ezt: $$('h1,h2,h3,h4,h5,h6').map(h => h.tagName + ' ' + h.innerText.trim()). Ez kilistázza a teljes vázlatot.
4. Futtass egy Lighthouse SEO-audit auditot. A címsor-sorrend hibáira az Accessibility szekció is figyelmeztet.
5. Olvasd végig a kapott listát önmagában. Ha csak a címsorokból érted, miről szól az oldal, jó a szerkezet.

Jó jel:

• Pontosan egy H1 van, és az a fő tartalom eleje.
• A H1 megegyezik azzal, amit az oldal valóban kínál.
• A szintek nem ugranak: H1 után H2 jön, H2 után H3.
• Egy H2 alatt 100-300 szó van, nem 1500.

Rossz jel:

• Nulla H1, vagy három-négy H1 egy oldalon.
• A logó, a telefonszám vagy a menü van H1-ben.
• H1 után rögtön H4 következik.
• A címsorok üresek, vagy csak egy ikont tartalmaznak.
• A footer widget-címei H2-k, ezért a vázlat végén értelmetlen szintek lógnak.

Mit néz ebből a riport

Az audit a kirenderelt HTML-ből gyűjti ki a címsorokat, és megszámolja a H1-eket. Vizsgálja a H1-H3 sorrendjét, és jelzi, ha ugrik a szintezés vagy üres a címsor. A szabály hatása magas, a hatókör kód: a javítás a sablonban vagy a szerkesztőben történik.

A cél mindenhol ugyanaz: legyen egyetlen egyértelmű H1, alatta logikus H2/H3 tagolással.

WordPress

1. A szerkesztőben a bekezdés-blokkot állítsd át Címsorra, és válaszd ki a szintet.
2. Ellenőrizd a sminket: sok sablon <h1>-be teszi a logót a header.php fájlban. Cseréld <p> vagy <div> elemre.
3. A single.php és page.php fájlban a the_title() hívás legyen H1-ben.
4. Az oldalsáv és a lábléc widget-címeit állítsd H3-ra a register_sidebar() paramétereiben.

Shopify

1. A main-product.liquid sablonban a product.title legyen <h1>.
2. A kollekciós oldalon a collection.title a H1, a terméknevek kártyákon H3-ak.
3. A szekció-beállításokban sok téma engedi a címsor-szint választását. Használd.

Unas

1. A termék- és kategórianevet a rendszer adja H1-ként. Ezt hagyd.
2. A szövegoldalak HTML-szerkesztőjében forrás nézetben javítsd a <h2> és <h3> sorrendet.
3. Ne tegyél második H1-et a leírásba.

Shoprenter

1. A sablonszerkesztőben ellenőrizd a product.tpl és category.tpl címsorait.
2. A kiemelt szövegdobozok gyakran H1-et használnak, ezeket írd át H2-re.

Egyedi fejlesztés

1. Vedd fel a komponensbe a címsor-szintet paraméterként, ne drótozd be.
2. A H1-et a layout helyett a tartalmi komponens adja.
3. Írj egy egyszerű tesztet, amely minden sablonon számolja a H1-eket.
4. Ha közben sok a dekorációs elem a fő tartalom körül, nézd meg a tartalmi zaj (a fő tartalom aránya) szempontjait is.

• Több H1 egy oldalon: a gépnek nem derül ki, melyik a fő téma, szétesik a vázlat.
• A logó H1-ben: minden aloldal ugyanazt a főcímet kapja, ezzel semmit nem mondasz.
• Ugró szintek: H1 után H4 jön, így a köztes szint hiánya miatt törik a hierarchia.
• Címsor helyett félkövér szöveg: vizuálisan ugyanúgy néz ki, de a robot sima bekezdést lát.
• Design miatt választott szint: H4-et raksz be, mert az a méret tetszik. A szintet a tartalom döntse el, a méretet a CSS.
• Üres vagy csak ikont tartalmazó címsor: a vázlatban értelmetlen sor jelenik meg.
• Kulcsszóhalmozás a H1-ben: a 12 szavas főcím sem az olvasónak, sem a gépnek nem segít.

Helyes szerkezet egy szolgáltatásoldalon:

<main>
  <h1>Ipari padlóburkolat felújítása</h1>
  <p>Kopott betonpadlók javítása üzemekben és raktárakban.</p>

  <h2>Mikor érdemes felújítani?</h2>
  <h3>Porzó, repedezett felület</h3>
  <p>...</p>
  <h3>Csúszásveszély</h3>
  <p>...</p>

  <h2>Árak és határidők</h2>
  <p>...</p>
</main>

Egy H1 van, a H2-k a fő kérdések, a H3-ak a részletek. Nincs szintugrás, és a fő tartalom <main> elemben ül.

Gyors ellenőrzés parancssorból, szerveroldalon renderelt HTML esetén:

curl -s https://pelda.hu/szolgaltatas/ | grep -Eo '<h[1-3][^>]*>' | sort | uniq -c

A kimenet megmutatja, hány H1, H2 és H3 nyitótag van. Ha a H1 száma nem 1, ott a baj. JavaScripttel kirakott tartalomnál ez a parancs keveset mutat, ilyenkor a devtools DOM-ja a mérvadó.