Oldalstruktúra: teljes útmutató

Az oldalstruktúra azt jelenti, hogy egy lapon milyen sorrendben és milyen súllyal követik egymást a tartalmi blokkok: a fő tartalom, a navigáció, a kiegészítő elemek és a belső linkek. A jó struktúrában a lap fő kérdésére adott válasz korán, jól elkülönítve jelenik meg, a sablonelemek pedig nem takarják el. Ez az olvasónak és a keresőnek egyaránt megkönnyíti, hogy megértse, miről szól a lap.

Alapfogalmak

Az oldalstruktúra egyetlen lap belső felépítése. Nem azonos a webhely szerkezetével, amely azt írja le, hogyan kapcsolódnak egymáshoz a lapok, és nem azonos a címsor-hierarchiával sem, amely csak a H1-H6 elemek rendjét jelenti. Az oldalstruktúra ennél tágabb: azt mondja meg, hol kezdődik a lényeg, mi tartozik hozzá, és mi csak keret körülötte.

A fogalom azért fontos, mert egy lapon a szöveg jelentős része nem a lap saját tartalma. A fejléc, a menü, az oldalsáv, a lábléc, a sütiértesítés és a kapcsolati sáv minden lapon ugyanaz. Ha ezek a kódban és a képernyőn is a tartalom elé kerülnek, a lap első látásra mindenhol egyforma, és a különbség csak lejjebb görgetve derül ki.

A lap fő részei

Rész	Mit tartalmaz	Szerepe a keresőnek
Fő tartalom	A lap saját, egyedi szövege, képei, táblázatai	Ebből érti meg a lap témáját és minőségét
Kiegészítő tartalom	Kapcsolódó cikkek, szerzői doboz, GYIK, hívás cselekvésre	Kontextust ad, belső linkeket visz
Navigáció	Főmenü, morzsamenü, oldalsáv, lábléc linkek	A webhely szerkezetét mutatja, de minden lapon ismétlődik
Sablonelemek	Fejléc, lábléc, jogi szöveg, sütiértesítés	Lényegében zaj, a lap témájához nem tesz hozzá

Kapcsolódó fogalmak

Hajtás feletti rész: ami görgetés nélkül látszik a képernyőn. Mobilon ez nagyon kicsi terület.
Tartalmi blokk: egy összefüggő egység a lapon, például egy szakasz a címsorával, egy táblázat vagy egy összehasonlító doboz.
Szemantikus elemek: a main, article, nav, aside, header és footer HTML elemek, amelyek a kódban jelölik a részek szerepét.
Olvasási út: az a sorrend, ahogy a látogató ténylegesen végighalad a lapon, jellemzően átfutva, címsorról címsorra.

Mi nem oldalstruktúra

Az oldalstruktúra nem dizájn. A színek, a betűtípusok és a térközök a megjelenést adják, a struktúra pedig azt, hogy mi után mi következik. Két nagyon különböző kinézetű lapnak lehet azonos struktúrája, és egy szép lapnak is lehet rossz struktúrája, ha a lényeg a harmadik képernyőn kezdődik.

Hogyan működik?

A kereső a lapot két rétegben értelmezi: a kódból, ahogy a HTML leírja, és a megjelenítésből, ahogy a böngésző kirajzolja. Mindkét rétegben ugyanazt keresi: hol van a lap fő tartalma, és az miről szól. Az oldalstruktúra mindkét rétegben ugyanazt kell hogy mondja, különben a jelek gyengítik egymást.

A fő tartalom felismerése

A kereső a lap blokkjait szétválasztja aszerint, hogy melyik ismétlődik a webhely más lapjain, és melyik egyedi. Az ismétlődő blokkok, mint a menü vagy a lábléc, kisebb súlyt kapnak a lap témájának megítélésében. Az egyedi blokkok közül pedig az kap nagyobb súlyt, amelyik a lap elején, jól látható helyen, a fő címsorhoz közel áll. Ezért számít, hogy a fő tartalom mennyire van elválasztva a kerettől.

A szemantikus HTML ebben segít, de nem csodaszer. Egy main elem egyértelműen jelzi, hol kezdődik a fő tartalom, de ha a main elemen belül az első háromszáz szó egy általános cégbemutató, akkor a jelölés hiába helyes, a tartalom maga nem a lap témájáról szól.

Az olvasó útja

A látogatók többsége nem olvassa végig a lapot, hanem átfutja. Megnézi a fő címet, az első bekezdést, majd a címsorokat, és ott áll meg, ahol a saját kérdésére választ lát. A jó oldalstruktúra ezt az utat támogatja: az első bekezdés válaszol, a címsorok beszédesek, és minden szakasz eleje önmagában érthető.

Ennek van keresőoldali következménye is. Ha a látogató a lap tetején nem találja, amit keresett, gyorsan visszalép a találati listára. Ez a viselkedés a lap szerkezetét minősíti, nem a tartalmát: lehet, hogy a válasz ott van a lapon, csak a hetedik szakaszban.

Mobil és asztali nézet

A kereső elsődlegesen a mobil változatot nézi. Mobilon az oldalsáv jellemzően a tartalom alá kerül, a menü összecsukódik, a táblázatok vízszintesen görgethetők lesznek. Ha a mobil sablon a fő tartalmat a kiegészítő blokkok mögé sorolja, vagy egy nagy képet tesz a szöveg elé, akkor mobilon a lényeg lejjebb csúszik, mint asztali gépen. A struktúrát ezért mobilon kell először ellenőrizni.

A struktúra és a belső linkek

A belső linkek helye is a struktúra része. A fő tartalomban, a szövegkörnyezetben elhelyezett hivatkozás többet mond a céllapról, mint ugyanaz a hivatkozás a láblécben. A szövegben álló link környezete magyarázza, miért kapcsolódik a két lap, a lábléc linkje viszont minden lapon ugyanúgy ismétlődik.

Fő módszerek

Az oldalstruktúra javítása hat munkaterületre bontható. A sorrend a hatás nagyságát követi: az első három minden laptípusnál kötelező, a többi a lap jellegétől függ.

1. A lényeg kerüljön előre

A lap első bekezdése válaszoljon a lap fő kérdésére. Ne bevezető legyen, ne köszöntés, és ne a cég története. Egy szolgáltatási lapon ez azt jelenti, hogy az első mondat megmondja, mi a szolgáltatás és kinek szól. Egy útmutatóban azt, hogy mi a rövid válasz. A részletek jöhetnek utána, de a lényeg ne a görgetésen múljon.

2. Egy lap, egy fő téma

Az oldalstruktúra csak akkor lehet tiszta, ha a lapnak egy fő témája van. Ha egy lap három különböző kérdésre akar válaszolni, a szakaszok versenyeznek egymással a figyelemért, és egyik sem kap elég helyet. Döntési szabály: ha egy szakasz önálló keresésre is válaszolna, és hosszabb egy képernyőnél, akkor valószínűleg külön lapot érdemel, amelyre a jelenlegi lap hivatkozik.

3. Szakaszolás beszédes címsorokkal

A fő tartalmat szakaszokra kell bontani, és minden szakasznak legyen címsora, amely a tartalmát mondja ki, nem egy általános címkét. A „Részletek" semmit nem mond, az „Árazás elve és mi van benne az árban" sokat. A címsorok rendjét és szintjeit a heading struktúráról szóló útmutató részletezi. Itt a lényeg annyi, hogy a címsorok együtt olvasva adják ki a lap vázlatát.

4. Blokktípusok a tartalomhoz igazítva

Nem minden tartalom való bekezdésbe. A lépéssor számozott listába, az összehasonlítás táblázatba, a definíció rövid bekezdésbe, a figyelmeztetés kiemelt dobozba kerüljön. A megfelelő blokktípus nemcsak az olvasónak segít, hanem a kereső is könnyebben kiemeli belőle a választ.

Tartalom jellege	Javasolt blokk	Kerülendő
Lépések egymás után	Számozott lista	Hosszú bekezdés „először... aztán..." fordulatokkal
Több lehetőség összevetése	Táblázat	Képként beillesztett táblázat
Rövid meghatározás	Egy-két mondatos bekezdés a címsor alatt	Definíció a szakasz végén elrejtve
Ellenőrzendő tételek	Felsorolás	Vesszővel elválasztott hosszú mondat
Kód, beállítás	Kódblokk	Képernyőkép a kódról

5. A keret visszaszorítása

A fejléc és a menü ne foglalja el mobilon a képernyő felét.
A sütiértesítés ne takarja a fő tartalom első bekezdését.
A felugró ablak ne jelenjen meg azonnal, mielőtt a látogató egyáltalán elolvasta volna a lap elejét.
Az oldalsáv mobilon a tartalom után jöjjön, ne előtte.

6. Szemantikus jelölés a kódban

A fő tartalom kerüljön main elembe, a cikk article elembe, a navigáció nav elembe, a kiegészítő blokkok aside elembe. A kódban a fő tartalom lehetőleg a navigáció után, de a kiegészítő blokkok előtt álljon. Ez nem látványos változás, de egyértelművé teszi a lap szerkezetét a kereső és a képernyőolvasók számára is.

Laptípusonkénti vázlat

Laptípus	Javasolt sorrend a fő tartalomban
Útmutató	Rövid válasz, alapfogalmak, eljárás, példa, hibák, kapcsolódó lapok
Szolgáltatási lap	Mit kap az ügyfél, kinek szól, hogyan zajlik, mi az árazás elve, gyakori kérdések, ajánlatkérés
Termék	Név, ár, fő jellemzők, vásárlás, részletes leírás, műszaki adatok, értékelések
Kategória	Rövid bevezető, termékek listája, szűrők, részletesebb kategóriaszöveg a lista alatt

Gyakori hibák

Az oldalstruktúra hibái ritkán látványosak. A lap működik, a szöveg megvan, csak éppen rossz helyen. Ezért ezeket érdemes laptípusonként, sablonszinten keresni, mert egy sablonhiba az összes azonos típusú lapot érinti.

Tartalmi hibák

Hosszú bevezető a lényeg előtt. A lap három bekezdésen át magyarázza, miért fontos a téma, mielőtt bármit mondana róla. A látogató a harmadik bekezdésnél már visszalépett.
Több téma egy lapon. Egy „Szolgáltatásaink" lap tíz szolgáltatást mutat be egy-egy bekezdésben. Egyik sem kap elég tartalmat ahhoz, hogy saját keresésre megjelenjen.
Szakasz címsor nélkül. Egy hosszú szövegtömb, amelyben a témaváltás csak a bekezdések tartalmából derül ki.
A fontos információ a lap végén. Az ár, a feltétel vagy a határidő csak az utolsó szakaszban szerepel, holott ez volt a látogató első kérdése.

Sablonhibák

Nagy kép vagy csúszka a tartalom előtt. Mobilon a teljes első képernyőt kitölti, és a szöveg csak görgetés után kezdődik.
Az oldalsáv a kódban a tartalom előtt áll. A kereső és a képernyőolvasó is előbb a kapcsolódó cikkek listáját olvassa, csak utána a lap saját szövegét.
Rejtett tartalom fülekben. A lényeges szöveg csak kattintásra nyíló fülekben van. Ez nem feltétlenül hiba, de a legfontosabb információ ne legyen elrejtve.
Hiányzó main elem. A kódban nincs jelölve, hol kezdődik a fő tartalom, minden div elemekben áll.

Tévhit: a hosszabb lap mindig jobb

A hosszúság önmagában nem érték. Egy hosszú lap, amelynek rossz a szerkezete, nehezebben használható, mint egy rövid, jól tagolt lap. A hosszabb tartalom akkor segít, ha a téma ténylegesen több részletet igényel, és a szerkezet lehetővé teszi, hogy a látogató a számára fontos részhez gyorsan eljusson. A jó kérdés nem az, hogy milyen hosszú a lap, hanem hogy a látogató mennyi idő alatt találja meg benne a saját válaszát.

Ellenpélda: amikor a lényeg nem kerülhet előre

Egy jogi vagy egészségügyi témájú lapon néha előbb egy feltételt vagy figyelmeztetést kell közölni, mielőtt a válasz értelmezhető lenne. Ilyenkor a „lényeg előre" szabályt úgy kell alkalmazni, hogy a figyelmeztetés rövid legyen, egy-két mondat, és közvetlenül utána jöjjön a válasz. A figyelmeztetés ne váljon hosszú bevezetővé.

Mérés

Az oldalstruktúra hatását közvetetten lehet mérni: a látogatói viselkedésen, a lap megjelenítésén és a kereső értelmezésén keresztül. Közvetlen mutató nincs rá, ezért több jelet kell együtt nézni.

Mit mérj és hol

Kérdés	Eszköz	Mit keresel
Hol kezdődik a lényeg mobilon?	Kézi ellenőrzés telefonon vagy mobilnézetben	Az első képernyőn látszik-e a lap fő válasza
Mit lát a kereső?	A Search Console URL-ellenőrzője, a megjelenített HTML	A fő tartalom benne van-e a kódban, és hol
Meddig jutnak el a látogatók?	Analitika görgetési mélysége, hőtérkép	Hol áll meg a látogatók többsége
Visszalépnek-e azonnal?	Analitika, elköteleződési mutatók	Rövid munkamenetek aránya a keresőből érkezőknél
Mit emel ki a kereső?	Kézi keresés a fő kifejezésekre	A snippet a lap elejéről vagy egy értelmes szakaszból jön-e

Ellenőrzési eljárás egy laptípusra

Válassz ki a laptípusból három jellemző lapot.
Nyisd meg mindhármat mobilnézetben, és jegyezd fel, mi látszik az első képernyőn.
Nézd meg a forráskódban, milyen sorrendben következik a navigáció, a fő tartalom és a kiegészítő blokkok.
Olvasd el csak a címsorokat egymás után: kiadják-e a lap vázlatát.
Nézd meg a görgetési adatokat: hol áll meg a látogatók többsége, és ott van-e már a lényeg.
A talált hibákat sablonszinten javítsd, ne lapról lapra.

Kidolgozott példa

Egy szolgáltató webhely szolgáltatási lapjai azonos sablonra épültek. Mobilon az első képernyőt egy teljes szélességű fotó és egy szlogen töltötte ki, alatta egy háromsoros általános cégbemutató következett, és a szolgáltatás tényleges leírása csak a harmadik képernyőn kezdődött. A görgetési adatok szerint a látogatók jelentős része az első két képernyőn belül elhagyta a lapot.

A javítás sablonszinten történt. A fotó mérete mobilon a töredékére csökkent, a szlogen helyére egy kétmondatos összefoglaló került arról, mit kap az ügyfél. Az általános cégbemutató a lap aljára költözött. A szolgáltatás leírását szakaszokra bontották: mit tartalmaz, kinek szól, hogyan zajlik, mi az árazás elve. A tanulság nem egy konkrét szám, mert az iparáganként eltér, hanem a módszer: a hibát egy laptípuson mérték, és a javítás az összes azonos típusú lapon egyszerre érvényesült.

Ellenőrzőlista közzététel előtt

Az első bekezdés válaszol a lap fő kérdésére.
Mobilon az első képernyőn látszik a lényeg.
A lapnak egy fő témája van.
A címsorok együtt kiadják a lap vázlatát.
A lépések listában, az összevetések táblázatban vannak.
A fő tartalom main elemben áll, a kódban a kiegészítő blokkok előtt.
Sem sütiértesítés, sem felugró ablak nem takarja a lap elejét.
A belső linkek a szövegkörnyezetben is megjelennek, nem csak a láblécben.

Kapcsolódó részletes útmutatók

Meta description: teljes útmutató