DEV Community

Aarju Shivnani
Aarju Shivnani

Posted on

Next.js SEO Checklist: 8 Things Developers Often Miss (2026)

#developers #webdev #javascript #nextjs

description: "A practical Next.js SEO checklist covering metadata, canonical URLs, sitemap, image optimization, structured data and Core Web Vitals to rank higher on Google."

Next.js gives you a great SEO foundation out of the box: server rendering, fast routing and built-in image optimization. But a good framework doesn't automatically mean good rankings.

After working on many client websites, these are the Next.js SEO mistakes we see missed most often. Use this checklist to fix them.

1. Set unique metadata for every page

Every page needs its own title and description. In the App Router, use the Metadata API:

// app/services/page.tsx
export const metadata = {
  title: "Web Development Services | Your Brand",
  description: "Custom, fast and SEO-friendly websites for growing businesses.",
};
Enter fullscreen mode Exit fullscreen mode

For dynamic pages, use generateMetadata so each product, blog post or service page gets its own values.

2. Add canonical URLs

If your site is reachable on more than one domain or URL (www vs non-www, .com vs .in), search engines can split your ranking signals. Declare one canonical version:

export const metadata = {
  alternates: {
    canonical: "https://www.example.com/services",
  },
};
Enter fullscreen mode Exit fullscreen mode

Make sure your canonical domain matches the domain you actually promote and build links to.

3. Generate a sitemap and robots file

Next.js can generate both from code:

// app/sitemap.ts
export default function sitemap() {
  return [
    { url: "https://www.example.com", lastModified: new Date() },
    { url: "https://www.example.com/services", lastModified: new Date() },
  ];
}
Enter fullscreen mode Exit fullscreen mode 
// app/robots.ts
export default function robots() {
  return {
    rules: { userAgent: "*", allow: "/" },
    sitemap: "https://www.example.com/sitemap.xml",
  };
}
Enter fullscreen mode Exit fullscreen mode

Then submit your sitemap in Google Search Console.

4. Use next/image properly

Always provide meaningful alt text, correct dimensions, and mark above-the-fold images as priority:

import Image from "next/image";

<Image
  src="/hero.webp"
  alt="Team working on a website redesign"
  width={1200}
  height={630}
  priority
/>
Enter fullscreen mode Exit fullscreen mode

This improves Core Web Vitals (especially LCP) and helps your images show up in image search.

5. Add structured data (JSON-LD)

Structured data helps search engines understand your business. A simple Organization example:

const jsonLd = {
  "@context": "https://schema.org",
  "@type": "Organization",
  name: "Your Company",
  url: "https://www.example.com",
  logo: "https://www.example.com/logo.png",
};

export default function Page() {
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}
Enter fullscreen mode Exit fullscreen mode

You can extend this with LocalBusiness, FAQPage, Article and more.

6. Don't hide content behind client-only rendering

If important text, headings or links only appear after client-side JavaScript runs, crawlers may see less than your users do. Prefer Server Components for content, and use Client Components only where interactivity is needed.

7. Watch your Core Web Vitals

Check LCP, CLS and INP in PageSpeed Insights or Lighthouse. Common quick wins:

  • Compress and lazy-load images
  • Use next/font to avoid layout shifts
  • Remove unused third-party scripts
  • Split large client bundles with dynamic imports

8. Use clean URLs and internal links

Use short, readable slugs (/web-development, not /page?id=482) and link related pages together with descriptive anchor text. Internal links help both users and crawlers discover your content.

Quick Next.js SEO checklist

  • [ ] Unique title and description on every page
  • [ ] One canonical URL per page
  • [ ] sitemap.xml and robots.txt in place
  • [ ] Optimized images with alt text
  • [ ] JSON-LD structured data
  • [ ] Important content server-rendered
  • [ ] Good Core Web Vitals
  • [ ] Clean URLs and internal links

Final thoughts

SEO for a Next.js app is mostly about getting the basics right and keeping them consistent. Fix these eight points and you're already ahead of most websites.

I'm part of the team at I Next ETS, a digital marketing and web development agency in Bhopal, India. What's the SEO issue you run into most often in your Next.js projects? Let me know in the comments.

Top comments (0)