skip to content →
warningSEO RULE · R28

Non-crawlable links: when JavaScript navigation breaks SEO

Google can only follow links that look like links: <a> tags with an href attribute pointing to a real URL. JavaScript-only navigation (onclick on a span, framework router-links without href) is invisible to many crawlers and to assistive tech.

Google can only follow links that look like links: <a> tags with an href attribute pointing to a real URL. JavaScript-only navigation (onclick on a span, framework router-links without href) is invisible to many crawlers and to assistive tech. A crawlable anchor is <a href="/path">text</a>. Non-crawlable patterns: <span onclick="navigate(...)">text</span>, <a onclick="..." href="#">text</a>, or framework components that render a <button> when they should render an anchor.

Last updated·part of the 50-rule library

What it is

A crawlable anchor is <a href="/path">text</a>. Non-crawlable patterns: <span onclick="navigate(...)">text</span>, <a onclick="..." href="#">text</a>, or framework components that render a <button> when they should render an anchor.

Why it matters

A non-crawlable link is an invisible link. The destination page doesn't receive PageRank from it, and screen reader users can't navigate to it with the link list. Pages that depend on JS-only navigation also lose AI engine discoverability — most AI crawlers don't execute JS.

How to fix it

  1. Render every navigation element as a real anchor. Vue: <router-link to="/path">. React: <Link to="/path">. Both produce real <a> tags with proper href.
  2. Audit interactive elements for misuse. A <button> that navigates is wrong; should be an <a>. A <span onclick> is wrong; should be an <a> or <button>.
  3. Verify in view-source. View raw HTML, search for the destination URL. If you can't find a real href to it, the link isn't crawlable.

Authoritative sources

Related SEO rules