Táblázatos layout

április 20, 2005

Táblázatok használata és a keresőoptimalizálás

A HTML szabvány létrehozásakor nem a grafikai igényesség vezérelte elsősorban a fejlesztőket, ezért az igényes megjelenéshez (melynek egyik ismérve az oldal különböző elemeinek megfelelő, pontos pozícionálása) kezdetben csak egy nem kifejezetten erre kitalált elemmel, a táblázattal történő pozícionállás állt a webfejlesztők rendelkezésére.

Közel sem annyira problémás a Keresőoptimalizálás szempontjából ez a technológia, de más egyéb tényezőket is figyelembevéve a lépcsőzetes Stíluslapok használata ajánlottabb.

Miért rossz a táblázat?

A klasszikus egymásba ágyazott táblázatokkal történő pozícionálás során az egyes elemek vizuális sorrendje nem egyezik meg a HTML forráskódjában található tartalmi részek sorrendjével. Vegyük az alábbi táblázatot, példaként a következmények bemutatására:

Nagy nemzetközi keresőprogramok Alternatív keresők Magyar keresők
Google kereső Yahoo! kereső MSN kereső
A Google Inc. által üzemeltetett keresőprogram. A Yahoo! kereső portálhoz kapcsolódó keresőszolgáltatás. A Microsoft által kifejlesztett technológia.

Gigablast
Jó találati listákat szolgáltató kereső, a nagyoknál kevesebb beindexelt oldallal.

SZTAKI Kereső Zoohoo.hu
Kísérleti stádiumban levő keresőprogram figyelemreméltó technológiákkal, mint pl. a szótövezés. A cseh Jyxo keresőtechnológiát használó keresőprogram.

A keresőoldalak a kulcsszavak elemzéséhez (mint például Kulcsszótávolság meghatározása, Kulcsszavak súlyozása) eltávolítják a HTML tagokat és egyéb kódrészleteket, és alábbiakhoz hasonló módon tárolják el a fenti táblázatot:

Nagy nemzetközi keresőprogramok  Alternatív keresők  Magyar keresők  Google kereső  Yahoo! kereső  MSN kereső  A Google Inc. által üzemeltetett keresőprogram.  A Yahoo! kereső! portálhozkapcsolódó keresőszolgáltatás. A Microsoft által kifejlesztett technológia. Gigablast  Jó találati listákat szolgáltató kereső, a nagyoknál kevesebb beindexelt oldallal. SZTAKI Kereső Zoohoo.hu  Kísérleti stádiumban levő keresőprogram figyelemreméltó technológiákkal, mint pl. a szótövezés.  A cseh Jyxo keresőtechnológiát használó keresőprogram.

Ha mindezt Stíluslappal formáztuk volna, akkor az alábbi szöveget tárolták volna el a keresőprogramok (Kövér és dőlt betűvel a különböző szintű Fejezetcímek):

Nagy nemzetközi keresőprogramok  Google kereső  A Google Inc. által üzemeltetett keresőprogram.  Yahoo! kereső  A Yahoo! kereső portálhoz kapcsolódó keresőszolgáltatás.  MSN kereső  A Microsoft által kifejlesztett technológia. Alternatív keresők Gigablast Jó találati listákat szolgáltató kereső, a nagyoknál kevesebb beindexelt oldallal.  Magyar keresők  SZTAKI Kereső  Kísérleti stádiumban levő keresőprogram figyelemreméltó technológiákkal, mint pl. a szótövezés.  Zoohoo.hu A cseh Jyxo keresőtechnológiát használó keresőprogram.

Jól látszik, hogy a táblázatokban máshogy következnek a Kulcsszavak, feleslegesen növelve a Kulcsszótávolságot, a fontos címszavak pedig nem szerepelnek kiemelt fontosságú, a Kulcsszavak súlyozásakor figyelembe vett HTML elemekben, mint pl.a Fejezetcímek, illetve a fontos tartalmi részek gyakran távol esnek a HTML kód elejétől. Például a bal oldali oszlopban szoktak lenni a navigációs elemek, melyek megelőzik a középső oszlopban található fő tartalmat. (Létezik erre egy áthidaló megoldás is, melyről ezen az oldalon lehet olvasni.)

Egyéb problémák

A keresőoptimalizálás szempontjain túl még számos más okból rosszabbak a táblázatos layoutok, mint a stíluslapok:

  • A fogyatékkal élők a fenti példákhoz hasonló módon szembesülnének az oldal tartalmával: szembetűnő, hogy mennyivel problémásabb a táblázattal pocícionált weboldal böngészése, mint az Akadálymentes weboldalaké.
  • A táblázatos layout-ok sokkal kevésbé flexibilisek a CSS-sel összerakott oldalaknál: Például egy Stíluslappal létrehozott képlékeny három oszlopos oldal lebomlik egy oszloposra, hogyha nem elég széles a képernyő, míg egy táblázatos layoutnál vagy nagyon kicsi lesz a lényeget magába foglaló oszlop, vagy vízszintes görgetéssel lesz csak használható az oldal. A kis képernyővel rendelkező mobil eszközökön könnyen olvashatatlanná válhatnak emiatt az oldalak, vagy pedig alternatív (sokszor lebutított) layout-ot kell nyújtani a PDA-k, Palmtopok, Handheld PC-k és mobiltelefonok számára. A CSS-sel készült oldal kompromisszumot jelenthet ebben az esetben a külcsíny rovására, az összes tartalmi elem megtartása mellett.

Miért jó a táblázatos elrendezés?

Egyes esetekben azért lehet mégis hasznos a táblázatos elrendezés, mert így nagyobb az esély arra, hogy minden böngészőben ugyanolyan módon jelenjék meg az oldal. Ez nem azért van, mert a táblázatos layout jobb technológia, hanem a különböző Böngészők Stíluslapkezelési hiányosságai okán sajnos nincsen erre jobb megoldás. Emiatt a Fontos keresők is gyakran használják a táblázatokat oldaluk külalakjának beállítására. Egyik legszebb példa erre a www.google.hu oldal: érdemes megnézni, hogyan van szétdarabolva négy darabba a Google logó, majd egy táblázat celláival összehekkelve.

Hasonló okokból előfordul még, hogy a weboldal layout-jának váza táblázatokkal van összerakva, viszont azon belül a CSS intenzívebb használatával alakul ki az oldal képe. Egyes vélemények szerint az egyébként ritkán használt a táblázatfejléc elemek (TH, table header) majdnem annyira hangsúlyosak a keresők számára, mint a [Fejezetcím]ek.

Összegzés

A táblázatos elrendezésű oldal nem szükségszerűen rossz a keresőkre optimizálás szempontjából, mint ahogyan a tisztán Stíluslapokkal elrendezett oldal sem jelent szükségszerűen előnyt. Többek között a stíluslappal tagolt html oldal szerkezete tisztább, kevesebb a leíró kódot tartalmaz, szabadabban alakítható az egyes tartalmi elemek sorrendje a kódban, ezért egy CSS-el kialakított oldalnak nagyobb esélye van, hogy jobban szerepeljen a Találati rangsorban, mint egy táblázatos weblapnak.

További olvasnivaló

A „Táblázatos layout” című bejegyzést 2005. 04. 20. napján publikáltam, az azóta már bezárt webni.innen.hu oldalon. Ezt az írást és az innen hivatkozott régi tartalmakat a Webni! Archívum oldalán gyűjtöttem össze. Mivel az utolsó módosítás dátuma: 2006. 12. 26., ezért az itt olvasható információk már részben vagy teljes egészében elavultak lehetnek.

Archivált hozzászólások