Keresés
Header Háttér

Webshark Blog

… jquery, ajax, design, psd, plugin, modul, web2, social, miegymás…

2020-09-100 komment

Hogyan alakíthatsz ki SEO-barát lapozót a weboldaladon vagy a webáruházadban?

Előfordul az, hogy weboldalak blogjait és főleg webáruházak kategóriaoldalait fel kell osztani több lapra, ha nem akarunk nagyon hosszú oldalakat. Ugyanakkor a lapozós megoldás kialakítása sok buktatót rejt magában SEO-szempontból, és érdemes az egyszerűségre törekedni.

Mi az a lapszámozás?

A weboldalakon a lapszámozás akkor látható, amikor oldalak sorozatát olyan módon jelenítjük meg, hogy mindegyik oldalról link mutat a sorozat egy másik oldalára, melyek lejjebb vagy feljebb találhatók a struktúrában. A leggyakrabban ilyen lapozóval blogokon, illetve webáruházak kategóriaoldalain találkozhatunk.

Lapozás helyett gyakran a “tovább” (load more) gombot szokták használni, mely vagy tovább nyitja lefelé az oldalt, vagy a következő oldalra visz, de ilyenkor nem látjuk pontosan, hol is tartunk a struktúrában.

Gomb nélkül is megoldható a további tartalmak betöltése, ami már a végtelen vagy hosszú görgetésű weboldalak világába vezet. Mindegyikkel lehetnek SEO-problémák, utóbbi esetében pedig még az a UX-probléma is felmerül amiatt, hogy elérhetetlenné válik a lábléc, aminek pedig fontos szerepe van a weboldalakon.

Ha nem megfelelő a lapozó kialakítása, akkor jellemzően három problémával nézünk szembe:

  • megjelenhetnek úgynevezett “árva” termékoldalak, melyek nincsenek linkelve
  • szükségtelenül méllyé válik az oldalstruktúra
  • a lapozható sorozat feltérképezése nem lesz teljes

Mire kell figyelni a lapozóknál?

Óvatosan a JavaScripttel!

Habár a JavaScript használata a következő oldal betöltésénél, anélkül, hogy a teljes oldalt frissíteni kellene, remek dolog, azonban óvatosan kell kezelni, ha a keresőbeli megjelenés is szempont.

Az AJAX-alapú lapozó rendkívül elterjedt a webáruházakban, ahogy az is, hogy a megoldás gyakran nem SEO-barátra sikerül. Az AJAX használatánál ugyanis figyelni kell arra, hogy a következő oldalra mutató link a sorozatban mindig legyen jelen. Ez a gyakorlatban azt jelenti, hogy mondjuk a “/?page=2”-re végződő link mindig legyen látható a HTML-forrásban, vagy legalább a DOM-on belül – bár ez már bizonytalan megoldás -, melyet a böngésző hoz létre.

Azt, hogy mi kerül be a böngésző által létrehozott DOM-ba, a “Vizsgáló”-nál (F12 lenyomásával) nézheted meg. Ami itt megjelenik, az eltér az oldal forrásától, mivel itt az látható, hogy éppen mit jelenített meg a böngésző, így azt is, hogy végrehajtott-e valamilyen JavaScriptet.

A probléma a DOM-ban meglévő linkkel az, hogy a Google sem mindig látja. Ennek oka alapvetően az, hogy a Googlebot vagy bármely más bot nem kattint, hogy végrehajtson egy JavaScriptet. Ha a Search Console URL-ellenőrző eszköze nem ismeri fel az URL-t, akkor ott ez a gond merül fel, tehát a Google nem látja a következő oldalt a struktúrában.

A felhasználóknak kínálhatsz tehát egy kellemes AJAX-alapú lapozót, azonban arra is figyelni kell, hogy a Google is képes legyen eljutni a második oldalra. Ehhez pedig linkeknek kell szerepelniük a sorozatban. És a legjobb, ha ezek a HTML-forrásban megjelennek.

De van még más probléma is a “tovább” gombbal

Ha a számos lapozó vagy a végtelen görgetés helyett “tovább” gombot használsz felmerül még más gond is. Azzal ugyanis, hogy megjeleníted a HTML-ben a linkeket, még nem oldottál meg minden problémát. Ezzel a módszerrel ugyanis szükségtelenül “méllyé válik” az oldalad.

Kattintási mélység tovább gomb esetén

Egy ilyen megoldás abban különbözik a számozott lapozótól, hogy ott, ha van mondjuk öt oldalad, akkor azok a jelen lévő linkek révén elérhetők a sorozat bármely oldaláról.

Ezzel szemben a “Tovább” gombra kattintva mindig csak a következő oldalra jut el a felhasználó, ahogy a Googlebot is. Ezáltal egy mély weboldalstruktúra alakul ki, ahol egyes oldalakat csak nagyon sok kattintással lehet elérni. Ez pedig nem tesz jót annak, hogy a Google megfelelően feltérképezze és értékelje a mélybe került oldalak tartalmát.

Megoldások

Ha ragaszkodsz a tovább gombhoz, akkor egy megoldás, ha amellett, illetve az alatt egy oldalszámos lapozó is megjelenik. Ahogy itt is látható:

Tovább gomb és lapszámozás egyszerre

Ebben az esetben megjelennek a lapszámozott oldalak számai és így linkjei, mely által így fog kinézni a struktúra:

Lapos oldalstruktúra

Egy további lehetőség, ha számozott lapozót használsz, de beteszed egy <noscript> címkébe. Ebben az esetben, ha egy felhasználónál nem működik a JavaScript, akkor egy oldalszámos lapozót lát. A hátránya viszont az, hogy nem biztos, hogy a Google látja, amit a <noscript> címke rejt. Sőt, valószínűbb, hogy nem látja.

Ha nem akarod egyszerre megjeleníteni a Tovább gombot és az oldalszámokat, akkor azt is megteheted, hogy CSS segítségével rejted el őket (display:none). Ebben az esetben a linkek a HTML forrásban megtalálhatók és teljesen normálisan feltérképezi őket a Google. Az persze kérdés, hogy az olyan linkek, melyekre nem érkezik kattintás – mivel rejtve vannak -, mennyire jó helyezést érnek el a találati oldalakon.

További lehetőség, ha létrehozol egy olyan oldalt, mely az összes többi, lapozós kategóriaoldalnak a tartalmát magában foglalja, és az egyes oldalak canonical címkével mutatnak erre az összefoglaló oldalra. Ezzel eléggé ellapítottad az oldalstruktúrát, ugyanakkor a weboldalsebességnek nem fog kedvezni az óriási oldal.

Összességében tehát elmondható, hogy a látványos vagy épp praktikusnak tűnő lapozó megoldások a keresőoptimalizáltság és a felhasználói élmény szempontjából nem igazán jók, legalábbis figyelni kell arra, hogy a Google be tudja járni valamennyi oldalt a sorozatban. Ha pedig biztosra akarunk menni, akkor egyszerűen a jó öreg oldalszámos lapozót használjuk, melyet könnyen feltérképez a Google, miközben az oldalstruktúrán is kellően lapos marad.

Kategória: Design | Címke: , ,

Főleg írok. Főleg blogot és közösségi médiát, de tágabb perspektívában: online marketing, úgyhogy van benne bőven SEO, laza AdWords, webdesign-okoskodás, és még ami belefér.

Comments are closed.