Nem feltérképezhető linkek: JavaScript-menük, onclick és gombok

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

Egy weboldal navigációja kétféleképpen működhet. Az egyik esetben a menüpont egy közönséges hivatkozás, amelyet a böngésző, a keresőrobot és a mesterséges intelligencia crawlere egyformán lát és követ. A másik esetben a menüpont csak úgy néz ki, mint egy hivatkozás, de valójában egy kattintásra lefutó szkript viszi tovább a látogatót. Az ember ebből semmit nem vesz észre. A robot viszont egy zsákutcát lát. Ez a cikk azt mutatja meg, hol húzódik a határ, hogyan találod meg a problémás elemeket, és mit kérj a fejlesztőtől vagy állíts át az oldalépítőben.

Mit tekint a Google feltérképezhető linknek?

A Google csak azt az a elemet kezeli linkként, amelynek van href attribútuma, és abban feloldható URL áll. Minden más navigációs megoldás (gomb, onclick, data-url, span kattintáskezelővel) a Google számára jó eséllyel nem link, ezért nem is követi.

Hivatalosan igazolt. A Google Search Central linkekről szóló útmutatója kifejezetten felsorolja, mit tud a Google követni és mit nem. A követhető forma az <a href="https://example.com/oldal"> és a relatív <a href="/oldal"> alak. A dokumentáció példaként hozza azokat a mintákat is, amelyeket a Google nem tud megbízhatóan feldolgozni, például a href nélküli a elemet, a routerLink jellegű egyedi attribútumot, a <span href="..."> szerkezetet és az onclick-kel navigáló elemet.

A gyakorlatban ezekkel a mintákkal találkozol a legtöbbet.

• <a href="/kapcsolat">Kapcsolat</a> követhető, ez a cél.
• <a onclick="location.href='/kapcsolat'">Kapcsolat</a> nem követhető, mert nincs href.
• <a href="javascript:void(0)" onclick="nyit()"> nem követhető, a href nem valódi URL.
• <button onclick="window.location='/arak'"> nem követhető, a gomb nem hivatkozás.
• <div data-url="/termekek" class="menu-item"> nem követhető, a data-url csak a saját szkripted számára jelent valamit.
• <a href="#"> kattintáskezelővel nem követhető, a kettőskereszt ugyanarra az oldalra mutat.

Fontos különbség, hogy a Google renderel, vagyis lefuttatja a JavaScriptet, mielőtt feldolgozza az oldalt. Kattintani viszont nem kattint, és egérmozgásra sem reagál. Ha egy link csak akkor kerül be a DOM-ba, amikor valaki rákattint a hamburger ikonra, a renderelt változatban sem lesz ott.

Miért más a helyzet az AI-crawlereknél?

A legtöbb AI-crawler jó eséllyel a nyers HTML-t olvassa, és nem futtat JavaScriptet, ezért a szkripttel épülő menüt és a csak renderelés után megjelenő linkeket egyáltalán nem látja.

Hivatalosan igazolt. Az OpenAI dokumentációja leírja a GPTBot és az OAI-SearchBot felhasználói ügynökét és a robots.txt-ben való kezelésüket. Arról, hogy a crawler renderel-e, a hivatalos dokumentációk általában nem adnak részletes, technikai vállalást.

Szakmai feltételezés. Nyilvánosan közzétett szervernapló-elemzések és saját naplóvizsgálataink alapján az AI-crawlerek többsége a HTML-t letölti, a JavaScript-fájlokat pedig ritkán vagy egyáltalán nem kéri le. Ebből az következik, hogy ezek a robotok a forráskódban szereplő a href elemeken keresztül járják be az oldalt. Ez a működés bármikor változhat, ezért érdemes úgy építkezni, hogy a navigáció renderelés nélkül is teljes legyen.

A gyakorlati tanulság egyszerű. A Google-nél a renderelt HTML számít, az AI-crawlereknél jó eséllyel a nyers. Ha a fő navigációd mindkettőben benne van valódi linkként, mindkét oldalon nyugodt lehetsz.

Hogyan hat a nem követhető link a belső linkerőre és az oldalak felfedezésére?

Ami nem link, az nem ad át belső linkerőt, és nem segít a robotnak megtalálni a céloldalt. Ha egy fontos aloldalra csak onclick-es menüpont mutat, az oldal a belső linkhálóban árvának számít.

Hivatalosan igazolt. A Google azt írja, hogy a linkek segítségével talál új oldalakat, és a linkek a relevancia megítélésében is szerepet játszanak. Az oldaltérkép a felfedezést segíti, de a belső linkek jelzését nem pótolja.

Saját tapasztalat. Audit közben visszatérő minta, hogy az oldaltérképben benne van egy szolgáltatásoldal, a Search Console szerint indexelve is van, a feltérképező mégis nulla bejövő belső linket mutat rá. Ilyenkor szinte mindig kiderül, hogy a menüben egy gomb vagy egy kattintásra betöltődő almenü viszi oda a látogatót. Az ilyen oldal jellemzően gyengébben teljesít, mint a valódi linkekkel elért társai, bár ebben más tényezők is közrejátszanak, így a hatást önmagában nem lehet pontosan elkülöníteni.

Három következménnyel érdemes számolni.

1. A felfedezés lassabb vagy elmarad, főleg új oldalaknál, amelyeket még semmi más nem hivatkozik.
2. A belső linkerő a kezdőlapon és a valódi linkekkel elért oldalakon reked, a mélyebb szintekre kevesebb jut.
3. Az AI-alapú válaszmotorok jó eséllyel nem jutnak el azokhoz az oldalakhoz, amelyekhez csak szkripttel lehet eljutni, így azok idézésére is kisebb az esély.

Hogyan szűrd ki a problémás elemeket feltérképezővel?

Futtasd a feltérképezőt kétszer, egyszer JavaScript nélkül és egyszer renderelve, majd vesd össze a két eredményt. Ami csak renderelve jelenik meg, az a Google-nek jó eséllyel elérhető, az AI-crawlernek viszont valószínűleg nem. Ami egyikben sem jelenik meg, azt egyik robot sem találja meg linkként.

Lépésről lépésre

1. Állítsd a feltérképezőt (például Screaming Frog SEO Spider vagy Sitebulb) csak szöveges, renderelés nélküli módba, és futtasd le a teljes oldalra.
2. Mentsd el a talált URL-ek listáját és a bejövő belső linkek számát.
3. Kapcsold be a JavaScript-renderelést, és futtasd újra ugyanazzal a beállítással.
4. Hasonlítsd össze a két listát. A csak renderelve talált URL-ek a JavaScripttől függnek.
5. Töltsd be az oldaltérképet és a Search Console-ból exportált oldallistát is. Ami ezekben szerepel, de a feltérképező egyik futásban sem találta, az árva oldal.
6. Az árva oldalakat nyisd meg a böngészőben, és nézd meg, a menü melyik eleme vinne oda. Ez a hibás elem.

A Screaming Frogban a renderelt mód mellett a nyers és a renderelt HTML külön is megnézhető, ami a következő lépéshez hasznos.

Hogyan ellenőrizd a renderelt HTML-t kézzel?

Nézd meg ugyanazt az oldalt háromféleképpen, a forráskódban, a renderelt DOM-ban és a Google szemével, és keresd meg mindháromban a menü linkjeit.

• Nyers HTML. A böngészőben a forrás megtekintése (Ctrl+U vagy Cmd+Option+U) azt mutatja, amit egy renderelés nélküli robot kap. Keress rá egy menüpont URL-jére. Ha nincs ott, az AI-crawler jó eséllyel nem látja.
• Renderelt DOM. A fejlesztői eszközök Elements panelje a szkriptek lefutása utáni állapotot mutatja. Itt nézd meg, hogy a menüpont a href elem-e, vagy gomb, div, span.
• A Google nézete. A Search Console URL-ellenőrzőjében az élő teszt után a tesztelt oldal HTML-je azt mutatja, amit a Google renderelője kapott.

Egy gyors trükk a Chrome fejlesztői eszközeiben, hogy a parancspalettán kikapcsolod a JavaScriptet, és újratöltöd az oldalt. Ha a menü eltűnik vagy nem nyílik le, a navigáció a szkripttől függ.

A konzolban egy rövid sorral azt is kilistázhatod, mely elemek viselkednek linkként úgy, hogy nem azok.

document.querySelectorAll('nav [onclick], nav [data-url], nav button, nav a:not([href]), nav a[href^="javascript"], nav a[href="#"]')

Ha a lista nem üres, a talált elemek mindegyikét érdemes megvizsgálni. A menünyitó gomb ide tartozik, és rendben is van, ha a mögötte lévő linkek valódiak.

Mi a helyes minta a JavaScripttel épített mobilmenühöz?

A mobilmenü nyitható-zárható lehet szkripttel, de a benne lévő linkeknek már az első HTML-válaszban ott kell lenniük valódi a href elemként. A JavaScript csak a láthatóságot váltsa, a tartalmat ne ő hozza létre.

A helyes szerkezet nagyjából így néz ki.

<button aria-expanded="false" aria-controls="fomenu">Menü</button>
<nav id="fomenu"><a href="/szolgaltatasok">Szolgáltatások</a> <a href="/kapcsolat">Kapcsolat</a></nav>

Itt a gomb tényleg gomb, mert nem navigál, csak kinyit valamit. A W3C akadálymentességi útmutatói is ezt a munkamegosztást javasolják, a navigációra a link, a műveletre a gomb való. Ez a keresőnek és a képernyőolvasónak egyaránt egyértelmű.

Kerülendő az a megoldás, amikor a hamburger ikonra kattintva egy kérés tölti le a menüpontokat, vagy amikor a menü elemei csak egy JSON-ból épülnek fel a böngészőben. Ilyenkor a nyers HTML-ben nincs menü, és a renderelt változatban is csak akkor lenne, ha valaki rákattint.

Hogyan javítsd ezt oldalépítős környezetben?

Oldalépítőben a legtöbb hiba abból ered, hogy egy gombhoz művelet van rendelve link helyett, vagy hogy a menü egy felugró ablakban él. A javítás többnyire beállítás kérdése, kódot ritkán kell írni.

Elementor és hasonló WordPress-oldalépítők

• A Gomb widget akkor ad valódi a href elemet, ha a Link mezőbe URL-t írsz. Ha ehelyett egy műveletet (például felugró ablak megnyitását) rendelsz hozzá, a robot nem talál célt.
• A teljes menüt felugró ablakba tenni kényelmes, de ellenőrizd, hogy a felugró tartalma benne van-e a betöltött HTML-ben. Ha csak kattintásra töltődik be, építsd át a Nav Menu widgetre vagy a téma saját menüjére.
• Ha egy egész kártya vagy oszlop kattintható, nézd meg, hogy a kártyában van-e valódi link (például a címen). A wrapper link sokszor szkripttel működik, ilyenkor tegyél a címre vagy egy Tovább gombra rendes hivatkozást.

Gutenberg, Divi, Webflow, Wix

• A blokkszerkesztő Gombok blokkja alapból a href elemet ad, itt ritka a hiba.
• Divinél és Webflow-nál az egyedi interakciók (kattintásra induló animáció, ami után átirányít) okoznak gondot. A navigációt bízd a link mezőre, az animáció csak díszítés legyen.
• Zárt rendszereknél (például Wix) a nyers és a renderelt HTML összevetése a legmegbízhatóbb próba, mert a kimenetet nem te írod.

Lapozás, szűrők, „Továbbiak betöltése”

A „Továbbiak betöltése” gomb mögé tegyél valódi lapozó linkeket is, például <a href="/blog/page/2">, amelyeket a szkript elrejthet a látogató elől. A Google is azt javasolja, hogy a lapozott tartalom minden oldalának legyen saját URL-je. A webshopok szűrőinél döntsd el, mely szűrt nézeteket akarod feltérképeztetni, és csak azokhoz adj valódi linket, a többi maradhat gomb.

Mikor rendben van a gomb vagy az onclick?

Ha az elem nem visz másik oldalra, a gomb a helyes választás, és SEO-szempontból sincs vele baj. Kosárba tétel, űrlapküldés, lenyíló panel, fülváltás, szűrőváltás, sütiablak bezárása, ezek műveletek.

A gond akkor kezdődik, amikor ugyanaz a gomb új URL-re visz. Egy egyszerű próba segít. Ha a látogató a középső egérgombbal új lapon szeretné megnyitni, és ez nem működik, az elem navigál, de nem link. Ezt érdemes javítani.

Szakmai feltételezés. A fülekbe és lenyíló panelekbe rejtett szöveget a Google a renderelt HTML-ből általában feldolgozza, ha az a DOM-ban már betöltéskor ott van. Az AI-crawlereknél ez attól függ, hogy a tartalom a nyers HTML-ben is szerepel-e. Ha szkript tölti be, jó eséllyel kimarad.

Mit tartalmazzon a fejlesztői átadás ellenőrzőlistája?

Rövid, kipipálható pontok kellenek, amelyeket a fejlesztő élesítés előtt maga is le tud futtatni. Ezt a listát érdemes a feladatleírásba tenni, és átadáskor visszakérni.

1. Minden navigációs elem (fő menü, mobilmenü, lábléc, morzsamenü, kártya) valódi a elem, href attribútummal és abszolút vagy relatív URL-lel.
2. Nincs a navigációban href="#", javascript: kezdetű href, data-url, és onclick-kel navigáló gomb.
3. A mobilmenü linkjei benne vannak a szerver első HTML-válaszában, a szkript csak a megjelenítést váltja.
4. A menünyitó elem button, aria-expanded attribútummal.
5. A lapozásnak és a „Továbbiak betöltése” funkciónak van valódi, saját URL-es, linkes megfelelője.
6. A renderelés nélküli és a renderelt feltérképezés ugyanannyi belső URL-t talál, vagy az eltérés dokumentált és szándékos.
7. Az oldaltérkép minden URL-jére mutat legalább egy belső link.
8. JavaScript kikapcsolásával a fő navigáció használható marad.
9. A Search Console URL-ellenőrzőjében a tesztelt oldal HTML-je tartalmazza a menü linkjeit.

Ha ezek a pontok teljesülnek, a navigáció a Google és az AI-crawlerek számára is bejárható. Helyezést ez nem jelent, és a rangsorolást számos más tényező is alakítja. Azt viszont jó eséllyel eléred vele, hogy egyetlen fontos oldalad se maradjon ki pusztán amiatt, hogy a hozzá vezető út egy gombon múlt.

Források és további olvasnivalók

• Google Search Central, Linkekkel kapcsolatos SEO-ajánlott eljárások (Make your links crawlable)
• Google Search Central, A JavaScript SEO alapjai
• Google Search Central, Lapozás, fokozatos betöltés és ezek hatása a Google Keresőre
• Google Search Console súgó, URL-ellenőrző eszköz
• OpenAI dokumentáció, Overview of OpenAI Crawlers
• W3C, WAI-ARIA Authoring Practices Guide (Disclosure és Menu Button minták)
• WHATWG, HTML Living Standard, az a elem és a href attribútum