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.
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.