How to Use Links for SEO in Remix Framework

In Remix, use the Link component from @remix-run/react to create internal links that support SEO by rendering semantic <a> tags and enabling prefetching. Always use Link for navigation within your app to improve crawlability and user experience.

Syntax

The Link component from @remix-run/react creates navigation links that render as semantic <a> tags. It accepts to for the target URL and optional prefetch to control preloading behavior.

• to: The path or URL to navigate to.
• prefetch: Controls when Remix preloads the linked route data (intent, render, or none).
• children: The link text or elements inside the link.

tsx

import { Link } from '@remix-run/react';

<Link to="/about" prefetch="intent">About Us</Link>

Output

<a href="/about" rel="prefetch">About Us</a>

Example

This example shows a simple navigation bar using Remix Link components. It demonstrates internal linking with prefetching on user intent for better SEO and faster navigation.

tsx

import { Link } from '@remix-run/react';

export default function NavBar() {
  return (
    <nav aria-label="Main navigation">
      <ul style={{ display: 'flex', gap: '1rem', listStyle: 'none' }}>
        <li><Link to="/" prefetch="intent">Home</Link></li>
        <li><Link to="/about" prefetch="intent">About</Link></li>
        <li><Link to="/blog" prefetch="intent">Blog</Link></li>
      </ul>
    </nav>
  );
}

Output

<nav aria-label="Main navigation">
  <ul style="display:flex;gap:1rem;list-style:none;">
    <li><a href="/" rel="prefetch">Home</a></li>
    <li><a href="/about" rel="prefetch">About</a></li>
    <li><a href="/blog" rel="prefetch">Blog</a></li>
  </ul>
</nav>

Common Pitfalls

Many developers mistakenly use regular <a> tags for internal navigation, which causes full page reloads and loses Remix's prefetch benefits. Another mistake is not using prefetch to improve loading speed and SEO. Also, avoid linking to external URLs with Link—use <a> with rel="noopener noreferrer" instead.

tsx

/* Wrong: Using <a> for internal links causes full reloads */
<a href="/about">About</a>

/* Right: Use Remix Link for SPA navigation and SEO */
import { Link } from '@remix-run/react';
<Link to="/about" prefetch="intent">About</Link>

Quick Reference

• Use Link for internal navigation to enable client-side routing and SEO-friendly <a> tags.
• Set prefetch="intent" to preload data when users hover or focus links.
• Use semantic HTML and ARIA labels for accessibility.
• Use regular <a> with rel="noopener noreferrer" for external links.

Key Takeaways

Always use Remix's Link component for internal links to improve SEO and user experience.

Use the prefetch prop to enable data preloading on user intent for faster navigation.

Avoid using plain <a> tags for internal navigation to prevent full page reloads.

Use semantic HTML and ARIA attributes to keep links accessible and SEO-friendly.

For external links, use standard <a> tags with proper security attributes.