Introduction

Next.js is one of the best frameworks for SEO because of its server-side rendering capabilities. In this guide, I'll show you exactly how to dominate search rankings.

1. Meta Tags Setup

Every page needs proper meta tags. Here's how to do it in Next.js 14:

export const metadata = {
  title: 'Your Page Title | Brand',
  description: 'Your description here — keep it under 160 characters.',
  keywords: 'keyword1, keyword2, keyword3',
  openGraph: {
    title: 'Your Page Title',
    description: 'Your description',
    type: 'website',
  },
}

2. Core Web Vitals

Google uses Core Web Vitals as a ranking factor. Focus on:

• LCP (Largest Contentful Paint) — keep under 2.5s
• FID (First Input Delay) — keep under 100ms
• CLS (Cumulative Layout Shift) — keep under 0.1

3. Image Optimization

Always use Next.js Image component:

import Image from 'next/image'

<Image
  src="/your-image.jpg"
  alt="Descriptive alt text"
  width={800}
  height={600}
  priority
/>

4. Sitemap Generation

Create a dynamic sitemap at app/sitemap.js:

export default function sitemap() {
  return [
    { url: 'https://yoursite.com', lastModified: new Date() },
    { url: 'https://yoursite.com/blog', lastModified: new Date() },
  ]
}

Conclusion

Following these steps will dramatically improve your Next.js site's SEO. Start with meta tags, then focus on performance, and watch your rankings climb.