Kalkulátorok és interaktív eszközök: hogyan értse meg az AI, mit számol az oldalad?

Scheo · 2026-10-17 · olvasási idő ~10 perc · Szerző: Schmidt Péter

Egy jól megépített kalkulátor a weboldal egyik leghasznosabb része. A látogató beírja a falfelületet, kiválasztja a rétegek számát, és azonnal látja, mennyi festékre lesz szüksége. Az AI-alapú keresők és válaszmotorok egy része viszont ebből jó eséllyel semmit sem lát, mert a számítás a böngészőben, JavaScriptben fut, a nyers HTML-ben pedig csak egy üres űrlap és néhány gomb marad. Ez a cikk azt mutatja meg, hogyan írd le szövegben is, mit csinál az eszközöd, és hogyan teheted ezt úgy, hogy a leírásból ne legyen kötelező ajánlat.

Miért láthatatlan az AI számára a JavaScriptben futó kalkulátor?

Röviden. Sok AI-crawler csak a szerver által küldött nyers HTML-t olvassa, a JavaScriptet nem futtatja le. Ha a kalkulátor logikája, a mezők magyarázata és az eredmények csak a script lefutása után jelennek meg, ezek a robotok egy üres felületet látnak, így nincs miből idézniük.

A Google helyzete más. Hivatalosan igazolt. A Google Search Central dokumentációja szerint a Googlebot több lépésben dolgozik (feltérképezés, renderelés, indexelés), és a JavaScriptet egy rendszeresen frissített, Chromium-alapú renderelővel lefuttatja. A renderelés ugyanakkor sorba kerülhet, és a dokumentáció maga is azt javasolja, hogy a fontos tartalom lehetőleg szerveroldali vagy előre renderelt formában is elérhető legyen.

Az AI-cégek robotjairól kevesebb a nyilvános információ. Az OpenAI dokumentációja megnevezi a saját crawlereit (például GPTBot és OAI-SearchBot), és leírja, hogyan szabályozhatod őket a robots.txt fájlban, azt viszont nem részletezi, hogy lefuttatják-e a JavaScriptet. Szakmai feltételezés. Független mérések, például a Vercel és a MERJ 2024-es elemzése, arra jutottak, hogy több nagy AI-crawler letölti ugyan a JavaScript-fájlokat, de nem hajtja végre őket. Ez változhat, és robotonként eltérhet, ezért a legbiztonságosabb úgy tervezni, mintha a robot csak a nyers HTML-t látná.

Egy tipikus konfigurátor nyers HTML-je sokszor alig több egy <div id=app></div> sornál és egy hivatkozásnál a script-csomagra. A mértékegységek, a képlet, a magyarázó szöveg és az eredmény mind a böngészőben állnak össze. Ember számára ez tökéletesen működik, egy nem renderelő robot számára viszont az oldal gyakorlatilag üres.

Miért a versenytárs statikus táblázata kerül a válaszba?

Röviden. A válaszmotor abból dolgozik, amit ki tud olvasni. Ha a versenytárs oldalán egy egyszerű HTML-táblázat mutatja, hogy 40 m² falhoz két rétegben nagyjából mennyi festék kell, akkor egy ilyen kérdésnél annak az oldalnak van idézhető válasza, a tiédnek nincs.

Az AI-nak nem kell számolnia ahhoz, hogy hasznos választ adjon. Elég, ha megtalálja a szabályt, a szükséges adatokat és egy-két kidolgozott példát. Egy statikus oldal, amelyen ez a három elem szövegben szerepel, jó eséllyel többet ér a válaszmotornak, mint a legszebb interaktív eszköz, amelyből a robot semmit sem lát.

Saját tapasztalat. Amikor AI-válaszok forrásait nézzük „mennyi kell”, „mekkora legyen”, „hány darab” típusú kérdéseknél, a hivatkozott oldalak között gyakran egyszerű, szöveges vagy táblázatos tartalmat látunk, képlettel és rövid magyarázattal. Ez megfigyelés, nem szabály, és nem jelenti azt, hogy a statikus oldal mindig nyer. Azt viszont jól mutatja, hogy a kiolvasható tartalom előnyben van.

A jó hír az, hogy nem kell választanod a kettő között. A kalkulátor maradhat interaktív, ha mellette ugyanazon az oldalon, szövegben is ott van minden, amit a robotnak érdemes tudnia. A következő szakasz ezt bontja ki lépésenként.

Mit kell szövegben leírnod a kalkulátor mellé?

Röviden. Négy dolgot érdemes leírni. Milyen adatokat kér az eszköz, milyen szabály szerint számol, mi jön ki néhány tipikus esetben, és mire nem alkalmas. Ezek együtt adják azt a szöveget, amelyből egy válaszmotor idézni tud.

A bemenetek

Minden mezőhöz írd le a nevét, a mértékegységét, a szokásos tartományát és az alapértékét, ha van ilyen. A festékkalkulátor példájánál ez így néz ki:

• Falfelület m²-ben, az ajtók és ablakok levonása után.
• Rétegek száma, általában egy vagy kettő, alapértéke kettő.
• Kiadósság m²/liter mértékegységben, a festék dobozán szereplő érték.
• Ráhagyás százalékban, alapértéke 10%.

A számítás logikája

Írd le a képletet emberi nyelven és egy sorban is. Például szükséges festék (liter) = falfelület (m²) × rétegek száma ÷ kiadósság (m²/liter) × 1,1, ahol az 1,1-es szorzó a 10%-os ráhagyás. Ha a logika elágazik (más szabály vonatkozik a mennyezetre, vagy a durva felület több festéket igényel), az elágazást is írd le egy-egy mondatban.

Példaeredmények

Két-három kidolgozott példa sokat segít, mert ezek önmagukban is idézhető mondatok. A saját oldaladon nyugodtan tedd őket valódi HTML-táblázatba.

• 40 m² fal, két réteg, 10 m²/liter kiadósság esetén nagyjából 8,8 liter festék kell.
• 60 m² fal, két réteg, 12 m²/liter kiadósság esetén nagyjából 11 liter.
• 25 m² fal, egy réteg, 10 m²/liter kiadósság esetén nagyjából 2,8 liter.

A határok

Írd le, mire nem ad választ az eszköz. A festékkalkulátor például nem számol az alapozóval, a sötét színről világosra festés többletigényével és a nagyon nedvszívó felületekkel. Ez a mondat kétszer is hasznos, mert a látogatót és a válaszmotort is pontosabb képhez juttatja.

Hogyan írd le a példaeredményeket úgy, hogy ne legyen belőlük kötelező ajánlat?

Röviden. Jelöld egyértelműen, hogy tájékoztató becslésről van szó, nevezd meg a mögötte álló feltételezéseket, és írd le, mi alapján születik a végleges ajánlat.

• Használj következetes szavakat, például „példa”, „becslés”, „tájékoztató érték”, és kerüld a „garantált” vagy „fix” jellegű kifejezéseket.
• Minden példa mellett szerepeljenek a feltételezések (felület, rétegszám, anyagminőség), hogy látszódjon, mitől változhat az eredmény.
• Írd le, hogy a végleges mennyiséget vagy ajánlatot felmérés, egyeztetés vagy a pontos adatok ismeretében adod meg.
• Árbecslőnél ne a konkrét összeget írd szövegbe, hanem azt, milyen tényezőkből áll össze az eredmény (anyag, munkadíj, kiszállás, egyedi igények), és melyik tényező mozgatja leginkább.
• A figyelmeztető mondat a példák közelében legyen, ne csak a lábléc apró betűi között.

Egy jól működő megfogalmazás például ez.

A fenti értékek tájékoztató példák, átlagos felületet és a dobozon szereplő kiadósságot feltételeznek. A tényleges igény a fal állapotától, a színváltástól és a felhordás módjától függ, ezért a pontos mennyiséget a helyszín ismeretében tudjuk megmondani.

Szakmai feltételezés. Az, hogy egy weboldalon közölt szám mikor minősül ajánlatnak, jogi kérdés, amelyet az általános szerződési feltételek és a fogyasztóvédelmi szabályok is befolyásolnak. A fenti megfogalmazások csökkenthetik a félreértés esélyét, de jogi tanácsot nem helyettesítenek, ezért a végleges szöveget érdemes jogásszal átnézetni.

Milyen technikai megoldások segítik, hogy a tartalom renderelés nélkül is látszódjon?

Röviden. A legbiztosabb, ha a magyarázó szöveg, a képlet és a példák a szerver által küldött HTML-ben vannak, a JavaScript pedig csak az interaktív számolást teszi hozzá. Ezt progresszív fejlesztésnek hívják.

• Szerveroldali vagy statikus renderelés. Ha a kalkulátor React, Vue vagy hasonló keretrendszerben készült, az SSR vagy a statikus generálás (SSG) a szöveges részeket már a nyers HTML-be teszi.
• Kiszámolt alapállapot. Az űrlap az alapértékekkel kiszámolt eredménnyel töltődjön be, és ez az eredmény szövegként szerepeljen a HTML-ben.
• Statikus példák. A példaeredmények és a táblázat ne a script generálja, hanem fixen legyenek a sablonban.
• Kattintás nélkül elérhető szöveg. Ami egy lapfül vagy lenyíló mögött van, az maradjon a HTML-ben, csak vizuálisan legyen összecsukva. Ne kattintásra töltődjön be a szerverről.
• Címkézett mezők. Minden beviteli mezőhöz tartozzon valódi <label> elem. Ez a W3C akadálymentességi irányelveinek is megfelel, és a robot számára is értelmezhetővé teszi a mezőket.
• Strukturált adat. A Schema.org WebApplication típusa leírhatja az eszközt, a GYIK-szakaszhoz pedig FAQPage jelölés tartozhat.

Hivatalosan igazolt. A Google irányelvei szerint a strukturált adatnak az oldalon látható tartalmat kell leírnia, és a jelölés nem garantál semmilyen megjelenést. A Google a dinamikus renderelést (amikor a robot külön, előre renderelt változatot kap) ma átmeneti megoldásnak tekinti, és a szerveroldali, statikus vagy hibrid renderelést javasolja helyette.

Szakmai feltételezés. A <noscript> blokkba tett szövegre nem érdemes építeni, mert a robotok eltérően kezelhetik, és könnyen elavul a valódi tartalomhoz képest.

Hogyan nézheted meg egyszerűen, mit lát egy renderelés nélküli robot?

Röviden. Kapcsold ki a JavaScriptet a böngészőben, vagy töltsd le a nyers HTML-t parancssorból, és nézd meg, ott van-e a képlet, a mezők leírása és legalább egy példaeredmény.

1. Nyisd meg a kalkulátor oldalát Chrome-ban, és indítsd el a fejlesztői eszközöket (F12).
2. Nyomd meg a Ctrl+Shift+P (Macen Cmd+Shift+P) billentyűket, írd be, hogy Disable JavaScript, és töltsd újra az oldalt.
3. Nézd meg, mi maradt. Ha csak egy üres keret vagy egy betöltésjelző látszik, a robot is ennyit lát.
4. Parancssorból töltsd le a nyers HTML-t, és keress rá egy kulcsszóra, például curl -s https://pelda.hu/festek-kalkulator | grep -i 'kiadósság'. Ha nincs találat, a szó csak a renderelés után kerül az oldalra.
5. Hasonlítsd össze a böngésző forráskód nézetét (view-source:) a fejlesztői eszközök Elements paneljével. Az első a nyers HTML, a második a renderelt állapot. Ami csak a másodikban van, az a nem renderelő robotok számára hiányzik.
6. Ha a Google nézetére is kíváncsi vagy, a Search Console URL-ellenőrzés eszköze megmutatja a renderelt HTML-t. Ez a Googlebot képe, az AI-crawlerek ettől eltérhetnek.

A teszt után ne felejtsd el visszakapcsolni a JavaScriptet a böngészőben.

Mit nézz végig az ellenőrzőlistán, mielőtt élesíted a kalkulátort?

Röviden. Ha az alábbi pontok mindegyikére igen a válasz, a kalkulátorod tartalma jó eséllyel a nem renderelő robotok számára is olvasható.

• Egy bekezdés a HTML-ben elmondja, mire való az eszköz és kinek.
• Minden bemenet le van írva névvel, mértékegységgel, tartománnyal és alapértékkel.
• A számítás szabálya szövegben és képletként is szerepel.
• Legalább két-három példaeredmény statikus HTML-ben van, a feltételezésekkel együtt.
• Le van írva, mire nem alkalmas az eszköz.
• A példák mellett, jól látható helyen ott a tájékoztató jellegre utaló mondat.
• Árbecslőnél konkrét összeg helyett a tényezők szerepelnek a szövegben.
• Minden mezőnek van <label> eleme.
• A lenyíló vagy lapfüles szöveg a HTML-ben van, nem kattintásra töltődik be.
• A JavaScript kikapcsolásával végzett teszt és a curl teszt is megtalálja a kulcsszavakat.
• A strukturált adat csak azt írja le, ami az oldalon látható.
• A robots.txt nem zárja ki azokat az AI-crawlereket, amelyeknek szeretnéd megengedni a hozzáférést.

Mi igazolt, mi tapasztalat és mi feltételezés ebben a témában?

Röviden. A Google renderelési folyamata dokumentált, az AI-crawlerek JavaScript-kezelése nagyrészt nem, ezért ott óvatos tervezés kell.

• Hivatalosan igazolt. A Googlebot lefuttatja a JavaScriptet, de a Google a szerveroldali vagy statikus renderelést javasolja. A strukturált adatnak a látható tartalmat kell tükröznie. Az OpenAI nyilvánosan dokumentálja a crawlereit és a robots.txt-alapú szabályozásukat.
• Saját tapasztalat. A „mennyi kell” típusú kérdéseknél a válaszmotorok gyakran egyszerű, szöveges vagy táblázatos oldalakat idéznek, a csak JavaScriptben élő eszközök tartalma pedig ritkán jelenik meg a válaszokban.
• Szakmai feltételezés. Több nagy AI-crawler jelenleg nem futtat JavaScriptet. A kalkulátor melletti szöveges leírás segítheti az idézhetőséget, de megjelenést vagy hivatkozást nem garantál, mert a válaszmotorok forrásválasztása nem nyilvános és folyamatosan változik.

Források és további olvasnivalók

• Google Search Central, Understand the JavaScript SEO basics
• Google Search Central, Dynamic rendering as a workaround
• Google Search Central, General structured data guidelines
• Google Search Console súgó, URL-ellenőrzés eszköz
• OpenAI dokumentáció, Overview of OpenAI Crawlers
• Schema.org, WebApplication és FAQPage típusok
• W3C, Web Content Accessibility Guidelines (WCAG) 2.2
• Vercel és MERJ, The rise of the AI crawler (független mérés, 2024)