How to Fix: tag doesn’t allow the Google search engine to crawl

Updated June 8, 2026 5 min read

Aldawsari

5 min read

If Google seems to ignore navigation built with Next.js <Link>, the problem is usually not the component itself. Search engines can crawl links rendered by Next.js, but they depend on one critical detail: the page must output a real, discoverable <a href=”…”> element in the final HTML.

Table of Contents

Understanding the Root Cause
Step-by-Step Solution
Common Edge Cases
FAQ

Understanding the Root Cause

Google does not crawl React components by name. It crawls the rendered HTML and then optionally executes JavaScript. That means the crawler looks for standard anchor elements with valid href attributes.

In Next.js, the <Link> component is a client-side routing helper. It improves navigation performance, prefetching, and SPA behavior, but for SEO it must still produce a normal anchor in the output. If your implementation fails to render a proper anchor tag, Google may not treat it as a crawlable link.

This issue typically appears for one of these reasons:

The <Link> component is used incorrectly and does not render a valid anchor in the final markup.
A custom component is wrapped inside <Link> but does not forward the href to an actual <a> tag.
Navigation is triggered with JavaScript events like onClick instead of a real anchor.
The linked page is blocked by robots.txt, noindex, authentication, or runtime rendering issues.
The page content is not present in server-rendered HTML, making discovery harder for crawlers that do not fully execute client logic.

In short, Next.js is not inherently blocking Google. The crawlability problem happens when the rendered output stops behaving like normal HTML navigation.

Step-by-Step Solution

Use the Next.js link API in a way that guarantees a crawlable anchor in the generated markup.

1. Verify the rendered HTML

Inspect the page source in the browser, not just the DevTools component tree. You should see a real anchor like this:

<a href="/about">About</a>

If the final HTML does not include a valid <a href>, fix the component usage first.

2. Use the correct Link pattern

In modern Next.js, the simplest and safest pattern is:

import Link from 'next/link'

export default function Navigation() {
  return (
    <nav>
      <Link href="/about">About</Link>
      <Link href="/blog">Blog</Link>
      <Link href="/contact">Contact</Link>
    </nav>
  )
}

This should render crawlable links when used correctly.

3. If using a custom child component, forward the anchor props

A common bug is wrapping a styled component that never outputs an anchor. If you need a custom component, make sure it renders <a> and receives the link attributes.

import Link from 'next/link'

function NavLink(props) {
  return <a {...props} />
}

export default function Navigation() {
  return (
    <nav>
      <Link href="/pricing" passHref legacyBehavior>
        <NavLink>Pricing</NavLink>
      </Link>
    </nav>
  )
}

If you are on an older Next.js version or using legacyBehavior, passHref is important so the child anchor gets the correct href.

This is bad for SEO when used as the main navigation pattern:

export default function BadNavigation({ router }) {
  return (
    <button onClick={() => router.push('/about')}>
      About
    </button>
  )
}

Use a real link instead:

import Link from 'next/link'

export default function GoodNavigation() {
  return <Link href="/about">About</Link>
}

Search engines understand anchors far better than click handlers.

5. Make sure linked pages are indexable

Even if the link is crawlable, Google may still skip the destination page if it is blocked. Check for:

meta name=”robots” content=”noindex”
Disallow rules in robots.txt
Authentication walls
Soft 404s or redirect loops
Server errors during rendering

You can validate this with Google Search Console and by testing the live URL inspection report.

6. Prefer server-rendered or statically generated content for important pages

Google can process JavaScript, but relying entirely on client-side rendering increases risk. For key SEO pages, prefer SSR, SSG, or the App Router patterns that send meaningful HTML immediately.

import Link from 'next/link'

export default async function Page() {
  const posts = [
    { slug: 'post-1', title: 'Post 1' },
    { slug: 'post-2', title: 'Post 2' }
  ]

  return (
    <section>
      <h1>Blog</h1>
      <ul>
        {posts.map((post) => (
          <li key={post.slug}>
            <Link href={`/blog/${post.slug}`}>{post.title}</Link>
          </li>
        ))}
      </ul>
    </section>
  )
}

This produces clear internal links that crawlers can discover more reliably.

7. Confirm with real output checks

After deploying:

Open View Page Source and verify the anchors exist.
Run a crawl with a tool like Screaming Frog SEO Spider.
Inspect the URL in Google Search Console.
Check that canonical tags, redirects, and status codes are correct.

Common Edge Cases

Custom UI libraries: Some design system components look like links but render <div> or <button>. If there is no real anchor, crawlability suffers.
Missing href propagation: When composing components, the visible text may appear clickable, but the child never receives the actual href.
Conditional rendering: If links only appear after client hydration, crawlers may not discover them consistently.
Infinite scroll navigation: If deeper pages are only reachable through interaction and not through crawlable links, Google may miss them.
Robots directives: Developers often blame <Link> when the real issue is noindex or a blocked path.
Broken canonical tags: A page may be crawled but not indexed as expected if canonical URLs point elsewhere.
Locale or basePath issues: Incorrect route generation can create malformed URLs that render but lead to wrong destinations.

FAQ

Does Next.js <Link> hurt SEO by default?

No. Next.js <Link> is SEO-friendly when it renders a normal anchor with a valid href. The issue is almost always caused by incorrect usage or unrelated indexing blockers.

How do I check whether Google can crawl my Next.js links?

Start by viewing the server-rendered page source and confirming that each navigation item becomes a real <a href>. Then validate the page in Google Search Console.

Is router.push equivalent to a normal anchor for search engines?

No. router.push is useful for application behavior, but it is not a replacement for a crawlable HTML link. For discoverable internal navigation, use anchors generated through <Link>.

The fix is straightforward: ensure every important internal route is exposed through standard, server-visible anchor tags. Once Next.js Link outputs clean HTML anchors and the destination pages are indexable, Google can crawl the site just like any other well-structured web application.