OnlineMarketingWelt.hu

Az alábbi cikkre maga a szerző, Pelle Boese hívta fel a figyelmemet egy kedves levélben. Pelle a seo-mobile.de blog gazdája, akinek egy írását (Hirdetések mobilon) már korábban fordítottam. Most az ajax és a seo kapcsolatát boncolgatja.

Az ajax és a seo
Az utóbbi időben megint elég sokat lehet olvasni a web2.0-ról, és ezzel összefüggésben az ajaxról is. Az ajax az „Asynchronous Javascript and XML” kifejezés rövidítése, ami pedig a Microsoft által bevezetett “XMLHttpRequest” javascript API-ra vonatkozik. Az ajax lehetővé teszi, hogy egy weboldal böngészése közben a háttérben adatok töltődjenek le a webszerverről és ne kelljen a weblap egyes részeinek frissítéséhez a teljes lapot újratölteni.

Az ajaxot gyakran különböző effektekhez használják, mint például dinamikusan változó tartalmak az oldal egy meghatározott területén. Ahogy a nevéből is kitűnik, a technológia javascript alapú, ebből pedig az következik, hogy a keresők számára láthatatlan: az ajax segítségével letöltött tartalmak (egyelőre) nem kerülhetnek az indexbe. Mégis van megoldás arra, hogy az ajaxos oldalakat keresőbaráttá tegyük.

Hogyan működik az ajax?
Az ajaxos megoldásokhoz általában egyszerű javascript-függvényeket vagy kész keretrendszereket használnak, amelyek lehetővé teszik, hogy egy úgynevezett “Callback-Funktion” segítségével ajax-lekérdezést (request) küldjünk a szervernek. Ez a callback-függvény akkor fut le, ha az oldal teljesen letöltődött, és letölti a webszerverről a további tartalmakat. A háttérben általában egy teljesen hétköznapi, paraméterezett script fut, amely szöveget, xml-t, json-t (JavaScript Object Notation), vagy más jellegű, a paraméterek által meghatározott tartalmakat ad vissza. A legtöbb ajax-lekérés klikkelésre vagy automatikusan, pl. minden 5. másodpercben indul el.

Példák az ajax használatára
Sok olyan feladat van, amikor az ajax használata az ésszerű megoldás. Egy ilyen például, amikor egy cikk alatt egyszerre csak előre meghatározott mennyiségű hozzászólást jelenítenek meg. Az oldal letöltésekor pl. csak az utolsó öt komment látható, de ha a látogató az „összes hozzászólás megtekintése” linkre kattint, akkor a háttérben lefut egy ajax-parancs, amely letölti az összes hozzászólást, és ezzel felülírja a megjelenítetteket.
Egy másik hasznos felhasználási lehetőség a információk automatikus letöltése. Így lehet például egy közösségi oldalon a bejelentkezettek listáját megjeleníteni, pl. 10 másodpercenként frissítve. Nem kell a felhasználónak állandóan újratölteni az egész oldalt, ez neki is kényelmesebb és nem utolsó sorban kevésbé terheli a webszervert.
Használható még az ajax ellenőrzések elvégzésére is, amelyek egyébként tovább tartanának és az oldal használatát sokkal nehézkesebbé tennék. Ilyen lehet például a domainnevek foglaltságának ellenőrzése.

Keresőoptimalizálás vs. ajax
Ahogy már említettem, a keresők egyáltalán nem, vagy csak korlátozottan tudják olvasni a javascriptet. Több keresőpók egészen egyszerűen figyelmen kívül hagyja a js-kódokat. Ha egy weboldal tartalma dinamikusan, csak ajax segítségével jelenik meg, akkor ezek a tartalmak a keresők számára láthatatlanok és így nem kerülhetnek fel a találati listákra.
Vannak olyan website-ok, amelyek csak egy kezdőlapból állnak, a többi tartalmat ajaxos megoldásokkal jelenítik meg. Ebben az esetben a kereső csak a kezdőlap tartalmát tudja indexelni, a dinamikus tartalom láthatatlan marad.

Hogy lehet kiküszöbölni a hibákat?
Az ajaxos oldalak esetén leggyakrabban előforduló hiba, hogy a dinamikusan letöltött tartalom nem érhető el statikusan, vagy legalábbis nem megoldott, hogy a keresők megtalálják és indexelni tudják. Gyakran így néz ki egy ajax-lekérdezés:
<a href="javascript:getCommentsAJAX(2)">További hozzászólások megmutatása</a>
Ha a látogató a linkre kattint, akkor lefut a „getCommentsAJAX“ függvény, amely paraméterül kapja, hogy „2”. Ez a függvény lehívja a hozzászólások újabb listáját, amely az oldalon megjelenített hozzászólások helyére kerül. Itt az a probléma, hogy ezt a linket a keresőrobotok nem tudják követni, így az újabb listának esélye sincs, hogy felbukkanjon a találatok között. A jó megoldás egyszerű:
<a href="/cikk/1/hozzaszolasok/2" onclick="javascript:getCommentsAJAX(2); return false">További hozzászólások megmutatása</a>
Így a keresőknek egy teljesen hagyományos linket adunk, miközben a felhasználók, akik aktív javascripttel böngésznek, az ajaxos megoldást használják. Ha tehát a látogató a linkre kattint, a javascript-függvény fut le, a „return false“ parancs pedig megakadályozza, hogy a href-ben megadott url betöltődjön. (A javascript nélkül böngészők és a keresőrobotok számára viszont az onClick parancs értelmetlen, nekik a href-ben megadott link töltődik be.)
Persze gondoskodni kell arról, hogy a megadott url-en valóban az a tartalom jelenjen meg, ami oda tartozik. Ezt például úgy lehet elérni, ha az ember ugyanazt a scriptet használja, mint amit az ajaxos megoldásnál. „Normál” meghívásnál a teljes oldalt adja vissza a script, ajax használata esetén pedig csak a friss hozzászólásokat. A kétféle meghívás megkülönböztetésére be lehet vezetni egy újabb paramétert.

Alternatíva
A háttérben való letöltés alternatívája lehet például egyes tartalmak megjelenítése vagy elrejtése. Ez a megoldás lehetővé teszi, hogy a keresők az összes hozzászólást az első oldalon indexelhessék, a látogató viszont – hogy könnyebben tudja használni az oldalt – több részre osztva kapja meg a listát. Egy egyszerű példa:
<div id="hozzaszolas1">
itt van az első 5 hozzászólás
</div>
<div id="hozzaszolas2" style="display:none">
itt van a következő 5 hozzászólás
</div>
[…]

Így az összes hozzászólást tartalmazza az első oldal, indexelhetők, de a felhasználó csak a „hozzaszolas1” id-jű div-et látja. A következő blokk megjelenítéséhez azt kell láthatóvá tenni és az elsőt elrejteni:
<a href="javascript:void(0)" onclick="document.getElementById('hozzaszolas1').style.display='none'; document.getElementById('hozzaszolas2').style.display='block'; return false">Következő 5 hozzászólás megjelenítése</a>

Ez a megoldás erősen leegyszerűsített és nem is túl elegáns, de a lényeget bemutatja. A “javascript:void(0)” linkkel a keresők nem foglalkoznak (és ha foglalkoznának, akkor se jelentene számukra semmit), az onClick pedig az első div-et elrejti és a másodikat megmutatja.

Összefoglalás
A weboldal tulajdonosának el kell döntenie, mely ajaxos tartalmakat akarja láthatóvá tenni a keresők számára és melyeket nem. Tény, hogy sok dinamikus tartalom olyan jellegű, hogy nem kell szerepelnie a keresési találatok között, de gyakran kódolási hibák okozzák, hogy értékes tartalmakat nem tudnak indexelni a keresők robotjai – így eltűnnek a web mélyén, nem megtalálhatóak a felhasználók számára. Remélem – írja végül a szerző – hogy ezzel a cikkel érthetőbbé tudtam tenni a keresőoptimalizálás és az ajax közötti összefüggéseket.

Forrás: SEO und AJAX

Köszönöm Princz Lászlónak, hogy programozói szemmel ellenőrizte a fordítást.