Why does Google ignore your links without an HREF attribute?

What qualifies as a valid anchor tag for Google?

Google defines a usable link as a HTML <a> tag containing a href attribute with a valid URL. This is the only format that Googlebot recognizes and follows during crawling. Attributes like onclick, data-url, or <div> elements transformed into links via JavaScript do not allow Google to discover your pages.

This statement reminds us of a fundamental principle of the Web: semantic HTML takes precedence over sophisticated JavaScript solutions. A link is primarily an <a href="..."> element, not an event-driven construct. Modern frameworks (React, Vue, Angular) sometimes generate pseudo-links that work for users but are invisible to crawlers.

What is the reason for this technical restriction?

Googlebot analyzes the initial HTML DOM and executes JavaScript at a later stage. If your critical links are generated solely by JavaScript without an underlying <a href> tag, there is a timing gap. The crawler can miss URLs if the crawl budget is limited or if the JavaScript fails to execute properly.

Alternative methods like window.location via onclick work for the user but do not create a link signal for crawling. Google cannot deduce that a button with a JavaScript event handler represents a link to another page. This is a deliberate limitation to maintain crawl performance.

What common mistakes hinder crawling?

Many e-commerce sites use styled buttons in <div> or <button> tags for navigation between categories. If these elements do not have a <a href> tag in the background, the landing pages will never be discovered by Google. This is particularly problematic for sites with deep architecture.

Single-page applications (SPAs) often generate dynamic URLs via history.pushState() without exposing real HTML links. Even if Google indexes these pages via JavaScript rendering, the internal linking remains invisible for PageRank calculation and authority distribution. Crawling becomes erratic and incomplete.

• Only <a href="URL"> tags are followed by Googlebot during initial exploration
• Pure JavaScript links (onclick, event listeners) are not crawled unless they generate an anchor tag
• Front-end frameworks must generate semantic HTML to ensure page discovery
• JavaScript rendering does not compensate for the absence of valid HTML links in the crawl structure
• Crawl budget is wasted if the bot has to wait for JavaScript execution to discover URLs

Is this statement consistent with real-world observations?

Absolutely. Technical audits consistently reveal that sites with pure JavaScript navigation suffer from massive orphan pages. Hundreds of indexed pages are not discovered through crawling, only accessible via XML sitemap. This is a recurring pattern on poorly configured React or Vue sites.

Even though Google has improved its JavaScript rendering engine, the reality remains harsh: initial crawling relies on raw HTML. If your critical links do not exist at this stage, you are entirely at the mercy of the rendering engine. And when the crawl budget is tight, that goodwill disappears quickly.

What nuances should be considered regarding this rule?

Google does indeed index pages discovered via JavaScript, but the quality of internal linking suffers significantly. A page found via XML sitemap but without internal HTML links will be considered isolated. Its authority remains low, and its recrawl frequency decreases.

Links with onclick using <a href="#"> are technically anchor tags, but the href="#" is pointless for crawling. [To be verified] if Google follows these links when JavaScript changes the actual destination, but in practice, it's a gray area to avoid. Why take the risk when a real href reliably works?

When does this rule pose a genuine problem?

Websites with a high volume of dynamically generated pages (product filters, facets) hit a wall. If each combination of filters does not generate a static HTML link with HREF, Google will only discover a fraction of the indexable URLs. Results pages remain orphaned.

Progressive web applications (PWAs) designed for user experience often neglect crawling. A site can be technically brilliant for the user but catastrophic for SEO if the architecture does not respect this basic rule. This is where the gap between front-end developers and SEO becomes dangerous.

What should be prioritized for checking on your site?

Run a crawl with Screaming Frog or Oncrawl by disabling JavaScript rendering. Compare the number of discovered URLs with a crawl that has JavaScript enabled. If the gap exceeds 10%, you have a structural problem. Your critical links are not accessible in raw HTML.

Inspect your source code (CTRL+U, not the inspector) and look for your main navigation links. If they do not appear as <a href="complete-URL">, Google does not see them during the initial crawl. This is non-negotiable for strategic pages: categories, subcategories, SEO landing pages.

What technical errors should be corrected immediately?

Replace all <div onclick="navigate()"> with real <a href> tags. Yes, this might break your design. No, this is not optional if you want Google to crawl these destinations. Technical SEO is not a matter of aesthetic preference, it is an architectural constraint.

For SPAs, implement server-side rendering (SSR) or static site generation (SSG) with Next.js, Nuxt, or equivalent. These frameworks produce valid HTML with usable links while maintaining the JavaScript experience on the client side. It is the only way to reconcile modern UX with effective crawling.

How can you check if your fixes are working?

Use the URL inspection tool in Search Console and look at the HTML snapshot. If your links appear as <a href> in this version, you are good. If you only see JavaScript or non-anchor tags, Google is not following those links.

Test your internal linking with a crawler configured to ignore JavaScript. The number of discovered pages should match your target architecture. If 30% of your pages remain orphaned without JavaScript, your crawl budget is wasted and your PageRank distribution is compromised.

• Audit the raw HTML source code (without JavaScript) to identify all navigation links
• Replace buttons and divs with onclick with valid <a href> tags
• Implement SSR/SSG for modern JavaScript applications (React, Vue, Angular)
• Verify in Search Console that the links appear in the rendered HTML
• Crawl the site in no-JS mode to detect structural orphans
• Test internal linking in index coverage reports