JavaScript Links

Element Code: PE-020

What counts as a JavaScript link

A JavaScript link is any clickable element that navigates the user through script instead of through a standard anchor. The usual shapes: a <div> or <span> with an onclick handler that sets window.location, a <button> wired to a router, an anchor with href="#" or href="javascript:void(0)" where the real destination lives only in the click handler, or a menu component that builds its navigation entirely in event listeners.

To a human with a mouse, these work perfectly. That is exactly why they survive code review. To a crawler, they mostly do not exist, and Google is unambiguous about this: its JavaScript SEO documentation states that Google can follow links only if they are <a> tags with an href attribute. Googlebot does not click things. It renders the page, extracts URLs from anchor hrefs, and moves on. A destination that only materializes when an event handler fires is a destination Googlebot never learns about from that page.

Why this hits harder than most technical issues

Most technical SEO problems degrade something. This one deletes something. Three separate losses stack up:

Discovery. If the only paths to your product detail pages run through a JavaScript-driven filter or a scripted menu, those pages are orphans in Google's link graph. They might still get found through the XML sitemap, but sitemap-only URLs crawl slower, and a page with zero internal links pointing at it starts life with a credibility problem.

Link equity. PageRank flows through anchors. A div with a click handler passes nothing. I have watched a retailer rebuild its category navigation as a scripted mega-menu and wondered why deep categories bled positions over the following weeks: the pages were still in the sitemap, still indexed, but the internal links that had been feeding them authority had effectively vanished. The damn pages looked linked to every human who checked.

Anchor text. Even when a page gets discovered another way, the descriptive anchor text that tells Google what the target is about never gets attributed. "Waterproof hiking boots" as anchor text is a relevance signal you are throwing away.

And beyond SEO: script-only navigation usually breaks middle-click to open in a new tab, breaks keyboard navigation and screen readers, and breaks the browser's link preview. The accessibility failure and the crawlability failure are the same failure.

Which patterns are crawlable

Pattern reference

How to detect it on your site

1. Compare a raw crawl to a rendered crawl. In Screaming Frog, crawl once with plain HTML extraction, then again with JavaScript rendering enabled (Config, Spider, Rendering). Now compare inlinks per URL. Pages with healthy inlink counts in neither crawl, but which you know your menus "link" to, are your victims. Sitebulb runs the same comparison and visualizes the delta nicely.
2. Disable JavaScript and click around. Toggle JS off in DevTools (Command palette, "Disable JavaScript") and try to use your main nav, faceted filters, pagination, and footer. Anything that stops being a followable link deserves scrutiny. This five-minute test finds most offenders.
3. Inspect the rendered HTML in Search Console. URL Inspection, Test Live URL, View Tested Page. Search the rendered source for the hrefs you expect. If your category page's product links are not in that HTML as anchors, Google is not seeing them either.
4. Grep the codebase. Searching templates for javascript:void, href="#", and onclick near navigation components is crude and effective.
5. Watch server logs. Sections of the site Googlebot rarely requests, despite being "linked" from high-traffic templates, are a symptom worth chasing back to the markup.

How to fix it

1. Give every navigation element a real anchor. The destination URL goes in the href. If you want client-side routing on top, attach the handler to the anchor and call preventDefault; crawlers read the href, users get the SPA experience. This is standard progressive enhancement and every major framework supports it out of the box.
2. Use your framework's link component, not raw handlers. Next.js Link, React Router Link, Nuxt's NuxtLink all render anchors with hrefs. The bugs appear when developers bypass them with onClick navigation on divs and buttons.
3. Make filter and pagination states real URLs where you want them indexed. A "load more" button can stay a button if a crawlable paginated alternative exists in the markup.
4. Keep buttons for actions. Add to cart, open modal, toggle menu: buttons. Go to another URL: anchor. This split also fixes your accessibility story for free.
5. Re-crawl after the fix. Rendered Screaming Frog crawl, confirm the target pages now show inlinks with sensible anchor text, then watch crawl stats pick up over the following weeks.

What good looks like: every URL you care about is reachable through anchor hrefs present in the rendered HTML, no javascript: or bare # hrefs anywhere in navigation, and your raw versus rendered crawls tell approximately the same link story.

FAQ