A legtöbb modern webhely JavaScriptet tartalmaz, így dinamikus és interaktív. Bár a keresőrobotok meglehetősen intelligensek, előfordulhat, hogy mégsem jelenítik meg a JavaScript-tartalom nagy részét, ami befolyásolja az oldal rangsorolását.
A JavaScript-tartalom nagyban függ attól, hogy webhelye hogyan jeleníti meg a kódot.
Például a szerveroldali megjelenítésnél a szerver tartalmazza a webhely tartalmát. Kérésre a böngésző megkapja a teljesen renderelt HTML-t.
Az ügyféloldali megjelenítésben azonban a JavaScriptet a böngésző DOM segítségével jeleníti meg.
A harmadik lehetőség a megjelenítésre a dinamikus megjelenítés, ahol a kliens oldalon megjelenített tartalom a böngészőbe kerül, míg a szerver oldalon megjelenített tartalom a keresőmotor(ok)ba.
A megjelenítési technikák befolyásolják a JS megjelenítését, és ezáltal az oldalak rangsorolását.
Annak biztosítása érdekében, hogy webhelye teljes JS-kódja megjelenjen, kövesse a megfelelő JavaScript SEO gyakorlatokat. De először értsük meg, mi az a JavaScript SEO.
Tartalomjegyzék
Mi az a JavaScript SEO?
A JavaScript SEO megkönnyíti a keresőmotorok számára egy webhely (vagy weboldal) JavaScript-kódjának (dinamikus tartalom) feltérképezését és indexelését. A Google vagy bármely más keresőmotor három szakaszban dolgozza fel a JavaScriptet: feltérképezés, megjelenítés és indexelés. Ahhoz, hogy a Google mindezeket meg tudja tenni, a JavaScript-tartalomnak SEO-barátnak, azaz láthatónak és elérhetőnek kell lennie.
Hogyan dolgozza fel a Google egy oldal JavaScript-tartalmát
A Googlebot a következő lépéseket követi a JavaScript feldolgozásához:
- A HTTP-kérésen keresztül lekér egy URL-t a feltérképezési sorból
- Ellenőrzi, hogy a robots.txt fájlban vannak-e olyan URL-ek, amelyek feltérképezését a webhely nem teszi lehetővé
- Kihagyja a „nem engedélyezett” URL-eket, elemzi a választ más URL-ekhez, és hozzáadja őket a feltérképezési sorhoz
- Sorba állítja az oldalakat a megjelenítéshez, kivéve azokat, amelyek nem indexelve vannak megjelölve
- A Chromium megjeleníti az oldalt, végrehajtja a JavaScriptet, és indexeli az oldalt
- Újra elemzi a megjelenített HTML-t a hivatkozásokhoz
- Sorba állítja az URL-eket a feltérképezéshez
Mikor nem indexeli a Google a JavaScript tartalmat?
A Google képes indexelni a JavaScriptet, ha helyesen van implementálva. Ha például néhány JS- és CSS-fájl rejtett, előfordulhat, hogy a Google nem tudja megfelelően feltérképezni a webhelyet. Hasonlóképpen, ha a nyers HTML-ben olyan hivatkozások vannak, amelyek nem jelennek meg a megjelenített HTML-ben, a Google kihagyhatja ezeknek a linkeknek a feltérképezését vagy indexelését.
Továbbá, ha a JavaScript nincs közvetlenül beágyazva a HTML-be, a Google-nak le kell töltenie a fájlt a végrehajtáshoz. Ezenkívül előfordulhat, hogy a keresőmotorok a weboldal gyorsítótárazott változatával rendelkeznek (a jobb teljesítmény érdekében), és előfordulhat, hogy az oldalon lévő JavaScript nincs vele szinkronban.
Mivel a JavaScript kód minden bitjét el kell olvasni, a JavaScript túlzott használata lelassíthatja az oldal sebességét vagy időtúllépési hibákat okozhat.
Miért fontos a JavaScript SEO?
A JavaScript SEO fontos, mert számos olyan oldalelemre és rangsorolási tényezőre hatással van, amelyeket a Google (vagy a keresőmotorok) keres SEO-ra:
Az oldalon lévő elem
Lehetséges SEO probléma
Lehetséges SEO megoldás
Renderelt tartalom
A keresőmotorok (például a Google) nem tudják megjeleníteni az oldalt, ha annak erőforrásai le vannak tiltva webhelye robots.txt fájljában. Ezenkívül a Google nem tudja indexelni vagy megjeleníteni a blokkolt vagy rejtett JS- és CSS-fájlokat.
Csökkentse a JavaScriptet az oldal alapvető tartalmában, kövesse az ügyféloldali megjelenítés alternatív megközelítéseit, például szerveroldali megjelenítést, dinamikus megjelenítést, hibrid megjelenítést (kliensoldali és szerveroldali kombináció)
Linkek
Ha egyes hivatkozások belsőek, vagy ha a felhasználó rákattint, a JavaScript létrehozza az URL-címre mutató hivatkozásokat, a Google nem tudja felfedezni az ilyen hivatkozásokat.
Használjon horgonylinkeket a href attribútummal, leíró horgonyszövegeket a hivatkozásokhoz. Az álhivatkozások, például a
Metaadatok
Hacsak a webhely nem használ Node.js csomagokat, például a vue-meta-t, előfordulhat, hogy a keresőmotorok ugyanazokat a térképeket térképezik fel, vagy ami még rosszabb, nem metaadatokat minden egyes nézethez vagy oldalhoz.
Használjon Node.js csomagokat, például react-helmet, vue-meta, react-meta-tags
Lusta töltött képek
A keresőrobot nem választ ki olyan tartalmat, amely lusta betöltésre van megjelölve. A keresőmotor nem tud görgetni a tartalom után, ezért előfordulhat, hogy bizonyos tartalmak soha nem jelennek meg.
Használja az IntersectionObserver API-t, amely megérti a DOM-elemek láthatóságát és helyzetét, amint azok elérhetők. Használhatja a böngésző (Chrome) natív lusta betöltés funkcióját is.
Oldalbetöltési idők
Előfordulhat, hogy egy sok JavaScript-tartalommal rendelkező oldal lassan töltődik be, ami befolyásolhatja a keresési rangsorolását.
Adjon hozzá kritikus JS-kódot soron belül, és halassza el a nem kritikus JS-kódot a fő tartalom megjelenítéséig, csökkentve ezzel a teljes JS-kódot.
A JavaScript SEO legjobb gyakorlatai
Néhány bevált gyakorlat követésével a keresőmotorok jobban feltérképezhetik és jobban megjeleníthetik az oldalakat:
Adjon hozzá hivatkozásokat és képeket a meghatározott webes szabványoknak megfelelően
Az onclick, #pageurl vagy window.location.href=’/page-url helyett az ahreftag használatával adja hozzá az összes hivatkozást. A Google könnyen feltérképezheti a linkeket, és követheti őket.
<a href=”http://etoppc.com.com”>Welcome to Geek world</a>
Ugyanígy adjon hozzá képeket az img src címkével, és ne az img data-src címkével:
<img src=”myimg.png” />
Előnyben részesítse a szerveroldali megjelenítést
Győződjön meg arról, hogy webhelye tartalma elérhető a szerveren a felhasználói böngészőn kívül.
Győződjön meg arról, hogy a megjelenített HTML tartalmazza az összes megjeleníteni kívánt fontos tartalmat
A megjelenített HTML-nek a megfelelő címmel, metarobotokkal, metaleírásokkal, képekkel, strukturált adatokkal és kanonikus címkékkel kell rendelkeznie.
JavaScript-webhelyének SEO-baráttá tétele
A JavaScript SEO implementációjának teszteléséhez weboldalán kövesse az alábbi lépéseket:
- Tudja meg, hogy webhelye mennyi JavaScriptet használ: Ehhez egyszerűen letilthatja a JavaScriptet a böngészőjében. Ha nem lát sok tartalmat, az azt jelenti, hogy webhelye nagyrészt JavaScriptre támaszkodik.
- Ellenőrizze, hogy a Googlebot megkapja-e az összes fontos tartalmat és címkéket: Használhatja a Google mobilbarát teszteszköz vagy a bővített eredményeket vizsgáló eszközzel ellenőrizheti, hogyan használja a Googlebot a nyers HTML-t a tartalom megjelenítésére.
- Használhat króm bővítményeket is, mint pl Renderelt forrás megtekintése hogy megértse, hogyan változtatja meg a JavaScript az oldalt, és összehasonlítja a forrás-HTML-t és a megjelenített HTML-t.
- A megjelenített HTML-ben a fontos címkéket (cím, meta leírás stb.) ellenőrizheti a következővel SEO Pro Chrome bővítmény.
Következtetés
Ebben a cikkben megtudtuk, hogy a JavaScript miként teheti kissé bonyolultabbá a SEO kezelését, és hogyan lehet megoldani azokat a lehetséges problémákat, amelyeket sok JavaScript hozzáadása a kódhoz okozhat.
Láttunk néhány bevált gyakorlatot és eszközt is, amellyel JavaScript-webhelyét SEO-baráttá teheti. További nagyszerű eszközök, amelyek segítenek a Google-nak felismerni és feltérképezni az Ön dinamikus tartalmát, az előmegjelenítés, AngularJSés Huckabuy.
Megnézheti a webhely betöltési idejének csökkentésének legjobb módjait is.
Élvezettel olvasta a cikket? Mit szólnál a világgal való megosztáshoz?