Technikai alapok Szakszó

JavaScript-függő tartalom és a szerveroldali renderelés

Szerző: · 7 perc olvasás · Frissítve:
JavaScript-függő tartalom és a szerveroldali renderelés - Technikai alapok (szakszó) a tudástárban
JavaScript-függő tartalom és a szerveroldali renderelés - Technikai alapok | eClick GEO-audit tudástár

A JavaScript-függő tartalom az a szöveg vagy elem, amely nincs benne a szerver által kiadott HTML-ben, és csak a böngészőben lefutó JavaScript rakja be az oldalba. A szerveroldali renderelés (SSR) ennek az ellentéte: a szerver már kész HTML-t küld, benne a főcímmel, a fő szöveggel és a navigációval.

Hogyan olvassa egy gép az oldalt

Minden oldalnak kétféle olvasata van. Az első a nyers HTML: amit a szerver a kérésre visszaad. A második a renderelt DOM: amit a böngésző a JavaScript lefutása után megjelenít.

Ha a kettő között van a lényeg, a gépek a szegényebb változatot látják. A render-blokkoló erőforrások ezt tovább rontják, mert késleltetik a futtatást.

Miért más ez az AI-nak, mint a Google-nek

A Google renderel, de nem azonnal és nem mindig teljesen. A második hullám órákkal vagy napokkal később jöhet.

A generatív keresők robotjai ennél egyszerűbbek. A legtöbb AI-crawler egyáltalán nem futtat JavaScriptet. Ami csak JS után jelenik meg, az számukra nem létezik. Ez igaz a kereső-célú botokra is, például az OAI-SearchBot által lekért válaszokra.

Mi legyen a kezdeti HTML-ben

  • A fő szöveg és az első bekezdés
  • A címsorok (H1, H2, H3)
  • A navigáció és a belső linkek
  • A JSON-LD strukturált adat
  • A kapcsolati adatok és az árak

A JavaScript ezen felül kiegészíthet: szűrők, galéria, kalkulátor. A tartalom azonban ne függjön tőle. A riportokban rendszeresen látunk olyan oldalt, ahol a nyers HTML mindössze egy üres <div id="root">.

Röviden: ha a főcím és a fő bekezdés nincs benne a szerver válaszában, akkor az AI számára nincs is tartalom az oldalon.

Miért fontos

A JS-függő tartalom a legdrágább fajta láthatatlanság: az oldal a böngészőben hibátlan, a gépek számára mégis üres.

  • Indexelés: a Google renderel, de a sorban állás miatt a friss tartalom napokig nem kerül be.
  • AI-válaszok: ha a robot nem látja a szöveget, nem is idézheti. A márkád kimarad a generatív válaszokból.
  • Strukturált adat: a JS-ből injektált JSON-LD-t a nem renderelő botok átlépik. Az ár, a nyitvatartás és az értékelés elveszik.
  • Félreértés: üres HTML mellett a modell a menüből és a lábjegyzetből próbál következtetni. Ilyenkor romlik a tényszerű összefoglalhatóság.

A szöveg / HTML arány ilyen oldalakon jellemzően 2 százalék alá esik. Ez önmagában is jelzi a problémát.

Kikre vonatkozik

Vonatkozik minden oldalra, amelynek a tartalma kliensoldali keretrendszerből jön. Tipikus esetek:

  • React, Vue, Angular, Svelte alapú egyoldalas alkalmazások
  • Headless CMS-re épülő oldalak kliensoldali lekéréssel
  • Fülekbe, akkordionba vagy modálba AJAX-szal töltött leírások
  • Végtelen görgetésű termék- és bloglisták
  • Beágyazott foglaló, árkalkulátor és vélemény-widgetek

Kevésbé érinti a klasszikus szerveroldali CMS-eket. A WordPress, az Unas és a Shoprenter alapból HTML-t ad ki. Ott a probléma inkább részleges: egy-egy blokk vagy a vélemények hiányoznak a forrásból.

Nem téma a zárt admin-felületeknél és a bejelentkezés utáni nézeteknél. Azokat nem is kell indexelni.

Hogyan ellenőrzöd

  1. Nyisd meg a view-source: előtaggal az oldalt. Ez a nyers HTML, JavaScript nélkül.
  2. Keress rá a Ctrl+F kereséssel a főcím szövegére. Utána a fő bekezdés első öt szavára.
  3. Futtasd le ugyanezt parancssorból is: curl -sL https://pelda.hu/. A böngésző-kiegészítők így nem zavarnak be.
  4. Kapcsold ki a JavaScriptet a devtools Command Menu Disable JavaScript parancsával, majd töltsd újra az oldalt.
  5. Nézd meg a Search Console URL-ellenőrzését. A "Tesztelt oldal" fülön ott a Google által renderelt HTML.
  6. Ellenőrizd a sémát a Rich Results teszttel. Ha ott látszik, de a view-source-ban nincs, akkor JS-ből jön.

Jó jel

  • A főcím és a fő bekezdés megtalálható a nyers forrásban.
  • A menü linkjei <a href> elemek, nem JS-eventek.
  • A JSON-LD a HTML-ben van, nem script-ből injektált.
  • JS nélkül is olvasható az oldal, csak csúnyább.

Rossz jel

  • A forrásban főleg <script> tagek és egy üres konténer-div van.
  • JS kikapcsolva fehér oldal vagy villogó töltő-ikon jelenik meg.
  • A termékár csak a renderelt változatban szerepel.
  • A nyers HTML-ben a "Loading..." felirat marad.

Mit néz ebből a riport

Az audit kétféleképpen olvassa az oldalt: lekéri a nyers HTML-t, és megnézi a renderelt változatot is. A kettő eltérése jelzi a problémát. Ha a főcím vagy a fő szöveg csak a renderelt verzióban van meg, a riport JS-függő tartalmat jelez.

Hogyan javítod

WordPress

  1. Maradj szerveroldali témánál. A teljesen kliensoldali "headless" megoldás csak SSR-rel biztonságos.
  2. A page builder blokkjait ellenőrizd egyenként a view-source-ban. Néhány slider és tab-modul JS-ből tölt.
  3. A séma-plugin JSON-LD-jét a szerver írja ki. Ha a kimenet csak JS-ből jön, cseréld a plugint.
  4. A kommenteket és véleményeket szerveroldalon jelenítsd meg, ne lazy widgettel.

Shopify

  1. A Liquid sablon szerveroldalon fut, ezért az alaptartalom rendben van.
  2. A JS-ből töltött szekciókat (ajánlott termékek, vélemény-appok) nézd meg forrásban.
  3. A termékleírás maradjon a Liquid kimenetben, ne app-blokkban.

Unas

  1. A sablonkimenet szerveroldali. A saját beillesztett JS-blokkokat vizsgáld.
  2. A kategória-leírásokat a sablon szövegmezőjébe tedd, ne JS-be.

Shoprenter

  1. A Twig sablon HTML-t ad ki, a tartalom alapból látható.
  2. Az egyedi widgetek és a külső vélemény-beágyazások a gyanúsak.

Egyedi fejlesztés

  1. Válts SSR-re vagy statikus előgenerálásra. Next.js, Nuxt, SvelteKit, Astro mind tudja.
  2. Ami nem változik gyakran, azt generáld ki build időben.
  3. A JSON-LD-t a szerver válaszába írd bele.
  4. Hidratálás után is ugyanaz legyen a szöveg, különben cloaking gyanúja merül fel.
  5. Ellenőrizd a javítást curl-lel, ne csak böngészőben.

Gyakori hibák

  • Üres root-div a forrásban: a nem renderelő botok számára az oldal tartalom nélküli.
  • JS-ből injektált JSON-LD: a strukturált adat a botok nagy részének láthatatlan.
  • Menü JavaScriptből: a belső linkek nem követhetők, a mély oldalak kiesnek a feltérképezésből.
  • Fülekbe töltött leírás: a termék fő szövege csak kattintás után kerül a DOM-ba.
  • Végtelen görgetés lapozó nélkül: a lista második felét soha senki nem látja gépként.
  • Más szöveg SSR-ben és hidratálás után: a két verzió eltérése megtévesztésnek tűnhet.
  • "A Google renderel, szóval jó": a magyar KKV-oldalak többségén ez a feltevés vezet oda, hogy az AI-válaszokból kimaradnak.

Technikai példa

Ugyanaz az oldal kétféle kimenettel. Az első változat a gépek számára üres:

<!-- Kliensoldali renderelés: a nyers HTML nem tartalmaz szöveget -->
<body>
  <div id="root"></div>
  <script src="/assets/app.js" defer></script>
</body>

<!-- Szerveroldali renderelés: a tartalom a válaszban van -->
<body>
  <main>
    <h1>Ipari padlóbevonat Budapesten</h1>
    <p>Epoxi- és poliuretán padlót készítünk üzemekbe 2004 óta.</p>
  </main>
  <script src="/assets/app.js" defer></script>
</body>

Ellenőrzés parancssorból, böngésző nélkül:

# Megvan-e a H1 a szerver válaszában?
curl -sL https://pelda.hu/ | grep -i -o '<h1[^>]*>[^<]*</h1>'

# Benne van-e a JSON-LD a nyers HTML-ben?
curl -sL https://pelda.hu/ | grep -c 'application/ld+json'

# Mennyi szöveg jön a tagek nélkül? (durva becslés)
curl -sL https://pelda.hu/ | sed 's/<[^>]*>//g' | tr -s ' \n' ' ' | wc -c

Ha a grep nem talál H1-et, a probléma megvan. A harmadik parancs néhány száz karaktert ad vissza egy JS-függő oldalon, és több ezret egy szerveroldalon rendereltnél.

Gyakori kérdések

A Google tényleg nem látja a JavaScriptet?
Látja, de nem azonnal. A renderelés külön sorban áll, és a második hullám órákkal vagy napokkal később jöhet. Előfordul, hogy a futtatás időtúllépés vagy hiba miatt félbemarad. Ezért kockázatos a fontos szöveget JS-re bízni.
Melyik botok futtatnak JavaScriptet?
A Googlebot és a Bingbot renderel. A tréning- és kereső-célú AI-crawlerek többsége nem futtat JS-t, csak a nyers HTML-t dolgozza fel. A legbiztosabb feltevés az, hogy JS nélkül olvassák az oldalt.
Elég a dinamikus renderelés (prerender botoknak)?
Áthidaló megoldásként működik, de a Google már nem ajánlja hosszú távra. Két kimenetet kell karbantartani, és könnyű eltérést okozni a két változat között. Jobb irány az SSR vagy a statikus előgenerálás.
Mi a baj, ha a JSON-LD csak JS-ből kerül be?
A Google a renderelés után általában megtalálja, a Rich Results teszt is zöld lesz. Az AI-crawlerek viszont a nyers HTML-t olvassák, és ott nem lesz séma. Az ár, a nyitvatartás és az értékelés így kimarad a gépi olvasatból.
Lazy loading is JS-függő tartalom?
A képek lusta betöltése rendben van, mert az alt és a src a HTML-ben marad. A probléma akkor kezdődik, ha a szöveg vagy a termékadat is csak görgetésre töltődik be. A szöveget mindig szerveroldalon adjuk ki.

Források

Kapcsolódó fogalmak

A te oldaladon hogy áll a(z) „JavaScript-függő tartalom és a szerveroldali renderelés”?

Futtass egy SEO-auditot: pontszám, fejlesztői ítélet, a leggyorsabb javítások, és minden tételhez bizonyíték.

Ingyenes SEO-audit indítása