Do JavaScript links really need to be <a> elements with href to be crawled?

Is this directive really new or just a reminder?

Let's be honest: it’s not a revelation. Google has recommended the use of real HTML links for over a decade. What is changing is the frequency of reminders — a sign that too many modern sites still violate this basic rule. SPAs and front-end frameworks have multiplied bad practices to the point that Martin Splitt must regularly hammer home the obvious.

In the field, we notice that many e-commerce or media sites use styled buttons for category navigation, thinking that an onclick is sufficient. The result: entire sections of the site become orphaned from a crawling perspective, even if the JS performs well on the client side. SEO audits regularly reveal orphaned page rates exceeding 30% on sites that are supposedly “well-developed.”

What exceptions or gray areas should you know?

Google does not crawl all onclick events, but it can index content revealed by JavaScript if it is present in the DOM after rendering. However, if a button triggers the display of a modal with text, that text may be indexed — but the button itself will never be considered a navigation link.

Another gray area: dynamic links generated in JS. If your code creates a <a href="/page"> after loading, Googlebot will see it during rendering. But pay attention to the timing: if the link appears too long after loading or due to infinite scrolling, it may be missed. [To be verified] in each case using the Search Console or a rendering tool like Screaming Frog in JS mode.

When does this rule pose a real technical dilemma?

Complex web applications — dashboards, SaaS tools, collaborative platforms — often use rich UI components where navigation is not a SEO priority. In these contexts, forcing <a href> everywhere can complicate the architecture. And that’s where the problem lies: should you sacrifice usability for crawling?

The answer depends on your strategy. If your content needs to be indexed and discoverable, real links are non-negotiable. If you are managing a private app behind authentication, the question does not arise. The trap lies in the hybrid site — part SEO-friendly showcase, part JS-first app — where the boundary becomes blurred and mistakes are frequent.

How to audit JavaScript links on my site?

First step: crawl your site with and without JavaScript enabled. Use Screaming Frog in JS rendering mode and compare the link graphs. If pages appear only in the JS crawl but without a valid <a href> link, you have a problem. Tools like OnCrawl or Botify also offer comparative views between raw crawl vs. JS crawl.

Second check: inspect the final DOM in Chrome DevTools after full loading. Look for navigation elements and verify they are indeed <a> with a provided href. If you see <div class="link"> or <button onclick>, it’s an immediate red flag.

What modifications should be made to React, Vue, or Angular frameworks?

Most modern frameworks offer routing components that generate real links. In React, use <Link to="/page"> from React Router instead of <div onClick={navigate}>. This component produces a <a href> in the final DOM while managing client-side navigation.

For Vue, <router-link> does the job. Angular offers routerLink as a directive on an <a>. In every case, check the generated HTML code — some developers overload these components with styles or logic that break the href. And that’s where you lose the crawl without realizing it.

What should I do if my design requires buttons for navigation?

You can style an <a> to look like a button. CSS allows you to transform any element: display: inline-block, padding, border-radius, colors — there’s nothing that requires you to keep the default rendering of a link. The important thing is the underlying HTML semantics.

If your design team insists on <button> for accessibility reasons (and that’s legitimate in certain interaction contexts), then double the navigation: keep buttons for UX, but also add visually hidden links or a comprehensive HTML sitemap. It's not ideal, but it works.

• Crawl the site with JS enabled and ensure all navigation links are <a href>.
• Inspect the final DOM in DevTools to identify pseudo-links (divs, spans, buttons).
• Use the URL inspection tool in the Search Console to compare Googlebot’s rendering to the browser rendering.
• Modify routing components (React Router, Vue Router, Angular Router) to generate real HTML links.
• Test accessibility: a real link automatically benefits from keyboard focus and standard ARIA attributes.
• Document front-end development rules so that all new navigation respects the <a href> structure.