JavaScript definíciója, legfontosabb tudnivalók a JavaScriptről: JavaScript működése, JavaScript felépítése: JavaScript részei;

javascript

A JavaScript definíciója

A JavaScript (röviden JS) egy webhelyeken használ programozási nyelv.
A JavaScript olyan funkciók a weboldalaknak, amelyekre a HTML és a CSS nem képesek. Ilyen funkciók például az űrlapok és más interaktív elemek, az animált grafikák, térképek és így tovább.

Manapság egyre több webhely használ úgynevezett JavaScript keretrendszereket, amelyek mobilos és webes alkalmazások létrehozására is alkalmasak. Ezek a JS keretrendszerek továbbá egy- és többoldalas webes alkalmazások kialakításához is használhatók, ezért nagyon népszerűek a webprogramozók köreiben.

A JavaScript SEO

A JavaScript SEO a technikai keresőoptimalizálás részét képezi, célja pedig, hogy megkönnyítse a JavaScript feltérképezését és indexelését a keresőmotorok számára.
A JavaScript keresőoptimalizálás a sajátos kihívások és feladatok elé állítja a webhelyek üzemeltetőit. A megfelelő technikák nélkül a JavaScript pont, hogy hátráltathatja a keresőmotorok munkáját, csökkentve ezzel a rangsorolás esélyét. Ez szoros együttműködést és rengeteg kommunikációt követel meg a SEO csapattól és a webprogramozóktól.

Hogyan térképezi fel és indexeli a Google a JavaScriptet?

A Google-nak néhány évvel ezelőtt általában hetekbe tellett, hogy feltérképezze és indexelje egy webhely JavaScript forráskódját. Szerencsére ez a folyamat manapság sokkal gyorsabban és hatékonyabban zajlik.

A Google három nagy lépésben dolgozza fel és értelmezi egy webhely JavaScript kódját:
1.    Feltérképezés
2.    Renderelés (az oldal megjelenítése)
3.    Indexelés

Ezt a folyamatot sokkal egyszerűbb lesz értelmezni, ha összehasonlítjuk azzal, ahogyan a Googlebot egy HTML oldalon dolgozik.

A Googlebot először is letilti a HTML fájlt, kigyűjti belőle a linkeket, majd letölti a CSS fájlt is, mielőtt elküldené ezeket a Caffeine-nek, vagyis a Google indexelő motorjának. Végül a Caffeine indexeli az oldalt.

Szóval mi van a JavaScripttel? Akárcsak egy HTML oldalnál, a folyamat a HTML fájl letöltésével indul. A hivatkozásokat ez után a JavaScript hozza létre, de ezeket nem ugyan úgy gyűjti ki a Google az oldalról. A Googlebot letölti az oldal CSS és JavaScript fájljait, majd a Web Rendering Service segítségével (ami a Caffeine része) megjeleníti és indexeli az oldalt, illetve kigyűjti belőle a hivatkozásokat.

Ez egy jóval összetettebb folyamat, amihez egy HTML oldal indexelésével szemben sokkal több erőforrásra van szükség. Mi több, a Google addig nem tudja indexelni az oldal tartalmát, amíg nem rendereli (jeleníti meg) teljesen a JavaScriptet.

Röviden tehát: Egy HTML oldal feltérképezése gyors és egyszerű: a Googlebot letölti a HTML fájlt és kiolvassa belőle az ott elhelyezett linkeket. Ha azonban JavaScript is van az oldalon, akkor az egész oldalt meg kell jeleníteni, mielőtt a Google kinyerhetné belőle a hivatkozásokat.

A JavaScript keresőoptimalizálása

Ahhoz, hogy a Google feltérképezhesse és indexelhesse webhelyed oldalait, először renderelnie kell az oldalakon működő JavaScriptet.
Ezt a feladatot többféleképpen is megkönnyítheted a Google számára, amelyek általában három fő tényezőre fókuszálnak:
•    Biztosítanod kell, hogy a Google fel tudja térképezni webhelyed tartalmát
•    Biztosítanod kell, hogy a Google renderelni tudja webhelyed tartalmát
•    Biztosítanod kell, hogy a Google indexelni tudja webhelyed tartalmát

Az oldalak renderelhetőségének ellenőrzése a Google Search Console-ban

Habár a Googlebot a Chrome legújabb verziója alapján készül el, nem pontosan úgy működik, mint a Google által fejlesztett népszerű webböngésző szoftver. Tehát ha webhelyed meg is jelenik rendesen a Chrome böngészőben, ez még nem jelenti azt, hogy a Google is képes renderelni azt.

Ezt a Google Search Console felületén ellenőrizheted az „URL-ellenőrzés” eszköz segítségével. Ehhez másold be az oldal URL címét a felső URL sávba, nyomd meg az ENTER-t, majd válaszd az „Élő URL tesztelése” gombot a jobb felső sarokban.

A Google ilyenkor néhány percig gondolkodik majd az oldalon, majd megjelenik egy „Valós idejű tesztelés” fül a jelentés tetején. Ezen belül megnézheted, hogy a Google hogyan jeleníti meg az oldalt, és milyen HTML kódot renderelt hozzá.

Ellenőrizd, hogy az oldal úgy néz-e ki, mint ahogyan kellene, illetve, hogy nincsenek-e megjelenítési problémák. A hiányzó elemek azt jelenthetik, hogy a különböző erőforrások (pl. a JavaScript) blokkolásra kerültek, vagy hogy hibák vagy időtúllépések történtek.

A leggyakoribb ok, ami hátráltatja JavaScript renderelését

A Google a legtöbb esetben azért nem tudja renderelni a JavaScript oldalakat, mert az ehhez szükséges erőforrások blokkolásra kerültek a robots.txt fájlban. Ez persze általában egy véletlen hiba eredménye.

Az ilyen kizárások elkerülése végett helyezd el az alábbi sorokat a robots.txt fájlban:

Fontos észben tartani, hogy a Google nem azért indexeli a CSS és JavaScript fájlokat, hogy megjelenítse őket a keresőtalálatok között. Ezeket az erőforrásokat az oldalak rendereléséhez használja fel.

Éppen ezért nagyon fontos, hogy a Googlebot hozzáférjen ezekhez az erőforrásokhoz, különben az oldal felhasználóknak szánt tartalma sem kerül majd indexelésre, és így a keresőtalálatok között sem jelenhet majd meg.

A JavaScript indexelésének biztosítása

Amennyiben meggyőződtél róla, hogy a Google képes megfelelően renderelni oldaladat, ki kell derítened, hogy indexeli-e azt.

Ezt a Google Search Console felületén, illetve közvetlenül a Google Keresőben is ellenőrizheted. Nyisd meg a Google Keresőt, és használd a site: parancsot – ez megmutatja, hogy az oldal szerepel-e a Google indexében. Például:

Természetesen használd a saját oldalad URL címét. Ha az oldal megjelenik, akkor szerepel a Google indexében.

Ha azt szeretnéd ellenőrizni, hogy egy JavaScripttel létrehozott tartalomrészlet is szerepel-e az indexben, akkor a következőképpen teheted meg:

Ügyelj rá, hogy a tartalomrészlet pontosan egyezzen azzal, aminek az oldalon is szerepelnie kell, és hogy kerüljön idézőjelek közé.
Ha a Google sikeresen indexelte a JavaScript által létrehozott tartalmat, akkor az a szövegrészlet jelenik majd meg a találatban is.

Ugyan ezt a Search Console felületén is ellenőrizheted. Használd ugyan úgy az URL-ellenőrzés eszközt, azonban ne az „Élő URL tesztelése” gombra nyomj rá, hanem válaszd a „Feltérképezett oldal megtekintése” opciót.
Itt megnézheted, hogy a HTML kód tartalmazza-e azokat az kódrészleteket, amelyeket a JavaScript hozott létre.

Miért nem indexeli a Google a JavaScript tartalmakat?

Számos oka lehet annak, hogy a Google nem indexeli a JavaScript által létrehozott tartalmakat. A leggyakoribbak ezek közül:
•    A tartalmat nem lehet megjeleníteni.
•    Az URL-t nem lehet felfedezni, mert a rá mutató hivatkozásokat a JavaScript hozza létre egy felhasználói kattintást követően.
•    Az oldal időtúllépésbe ütközik, miközben a Google indexelni próbálja a tartalmát.
•    A Google úgy döntött, hogy a JavaScript nem változtatja meg eléggé az oldalt ahhoz, hogy érdemes legyen letölteni.

Néhány ilyen probléma megoldásáról lejjebb olvashatsz majd, de előtt néhány szó a renderelésről…

Szerveroldali, kliensoldali és dinamikus renderelés – mi a különbség?

Az, hogy a Google-nak sikerül-e megfelelően indexelnie JavaScript tartalmaidat első sorban attól függ majd, hogy webhelyed hogyan rendereli, azaz jeleníti meg ezt a kódot. Mindenekelőtt különbséget kell tenned a szerveroldali, a kliensoldali és a dinamikus renderelés között.

SEO szakemberként szorosan együtt kell működnöd a webhelyeket fejlesztő csapat tagjaival, ha szeretnéd elkerülni a JavaScript használatából adódó problémákat. A Google folyamatosan arra törekszik, hogy minél hatékonyabban térképezze fel, renderelje és indexelje a JavaScript által létrehozott tartalmakat, számos gyakori problémát megelőzhetsz, ha tudod, mire kell odafigyelned.

Ebben rengeteget segíthet a különböző renderelési módszerek ismerete:

Szerveroldali renderelés (SSR)

A szerveroldali renderelés azt jelenti, hogy a JavaScriptet a szerver rendereli, majd ezt a renderelt HTML oldalt küldi vissza a kliensnek (ami lehet a Googlebot vagy egy böngészőszoftver stb.)

Mivel a kliens egy „kész” HTML oldalt kap vissza, ennek a feltérképezése és indexelés ugyan úgy zajlik, mit bármelyik HTML oldalé, ezért nem kell tartani a fent felsorolt JavaScript problémáktól.

Az egyetlen nehezítő tényező az, hogy a szerveroldali renderelést nagyon nehéz jól kivitelezni fejlesztői szempontból, habár a különböző eszközök és keretrendszerek sokat segíthetnek ebben.

Kliensoldali renderelés (CSR)

A kliensoldali renderelés a szerveroldali renderelés ellentétje. CSR használata esetében a JavaScriptet a kliens (böngésző, Googlebot stb.) rendereli a DOM alapján. Amikor a kliensnek kell renderelnie a JavaScriptet, a fent említett problémák mind előfordulhatnak, miközben a Googlebot megkísérli a tartalom feltérképezését, renderelését és indexelését.

Dinamikus renderelés

A dinamikus renderelés a szerveroldali renderelés egy alternatívája. Lényege, hogy a felhasználóknak egy kliens által renderelendő verziót kínál, míg a keresőmotoroknak egy szerveren renderelt, statikus HTML verziót. Ezt a módszert a Bing is támogatja (és javasolja).

A dinamikus renderelés nem számít elfedésnek (cloaking) a keresőmotorok szemében, ha az oldal mindkét verziója kellően hasonlít egymáshoz. Tehát csak jelentene problémát, ha a keresőmotorok egészen más oldalt kapnának, mint a felhasználók.

Dinamikus renderelés használatakor a két oldal hasonló, csak épp eltérő interaktivitást kínálnak.

A leggyakoribb JavaScript SEO problémák (és elkerülésük)

A modern keresőoptimalizálás során többféle JavaScript SEO problémába is beleszaladhatsz. Íme a leggyakoribbak ezek közül, és néhány hasznos tipp az elkerülésükhöz:
•    Ha blokkolod a .js fájlokat a robots.txt-ben, akkor a Google nem fog tudni hozzáférni ezekhez, és így sem a renderelést, sem pedig az indexelést nem tudja végrehajtani. Engedélyezd tehát a .js fájlok feltérképezést.
•    A Google általában nem vár sokáig a JavaScript tartalmak renderelésére, ezért, ha ezt valami késlelteti, akkor időtúllépés akadályozza majd a JS tartalmak indexeléést.
•    Ha oldalszámozást (pagináció) használsz, ahol a későbbi oldalakon megjelenő linkek csak egy felhasználói interakció (pl. kattintás) után jönnek létre, akkor ezek a linkek láthatatlanok maradnak a keresőmotorok számára, hiszen nem kattintanak rá gombokra. Mindig használj statikus hivatkozásokat, hogy megkönnyíts a Googlebot dolgát webhelyeden.
•    Ha lazy loadinget alkalmazol, akkor ne késleltesd az indexelésre szánt tartalmak megjelenítését. Ezt a késleltetett töltési módszert inkább képek megjelenítéséhez használd.
•    A kliensoldali rendereléssel megjelenített JavaScript nem tud szerverhibákat visszaadni úgy, mint a szerver által renderelelt tartalmak. Irányításd át a hibákat például egy olyan oldalra, ami 404-es HTTP válaszkódot ad vissza.
•    Ügyelj rá, hogy webhelyed oldalaihoz statikus URL-ek készüljenek, nem pedig olyanok, amelyek #-t használnak. A Google általában figyelmen kívül hagyja a #-eket, ezért ezek az oldalak nem kerülnek indexelésre.