Next.js SEO Best Practices

Why Next.js is Great for SEO

Because Next.js renders HTML on the server, search engines see fully-formed content immediately — unlike client-only React apps where crawlers may see an empty page.

1. Use the Metadata API

// app/about/page.tsx
export const metadata = {
  title: "About Us | MySite",
  description: "Learn about our mission and team.",
  openGraph: {
    title: "About Us",
    images: ["/og-about.png"],
  },
};

2. Dynamic Metadata

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return { title: post.title, description: post.excerpt };
}

3. Generate a Sitemap

// app/sitemap.ts
export default async function sitemap() {
  const posts = await getPosts();
  return posts.map(p => ({
    url: `https://site.com/${p.slug}`,
    lastModified: p.updatedAt,
  }));
}

4. Add Structured Data (JSON-LD)

<script type="application/ld+json"
  dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }} />

5. Optimise Images

import Image from "next/image";
<Image src="/hero.jpg" width={1200} height={600} alt="Hero" priority />

SEO Checklist

• ✅ Unique title + meta description per page
• ✅ Server-render content (avoid pure client rendering)
• ✅ Canonical URLs to avoid duplicates
• ✅ sitemap.xml + robots.txt
• ✅ Fast Core Web Vitals (use next/image, next/font)

FAQs

Does Google index client components?

Yes, but server-rendered content is indexed faster and more reliably. Keep important content in Server Components.

How do I set canonical URLs?

Add alternates: { canonical: url } in your metadata. More in our Next.js section.