Next.js SEO Best Practices for 2025

Search has evolved, but the fundamentals still matter. In this guide, we’ll apply realistic, high-impact SEO improvements to a Next.js app without over-engineering.

1. Descriptive metadata

Use the app router metadata API to set per-page title and description. Include a consistent brand suffix.

// app/blog/[slug]/layout.js
export const metadata = {
  title: {
    template: '%s | LumeTran',
    default: 'LumeTran',
  },
  description: 'Modern web insights and tutorials',
};

2. Semantic HTML and headings

• Use one H1 per page; subsections use H2/H3.
• Prefer <article>, <section>, <nav>, <aside> where appropriate.

3. Social sharing (OG/Twitter)

Open Graph images dramatically improve link previews.

// app/blog/[slug]/page.js (example)
export const generateMetadata = ({ params }) => ({
  openGraph: {
    title: 'Post title',
    images: [{ url: '/og/your-image.png', width: 1200, height: 630 }],
  },
  twitter: {
    card: 'summary_large_image',
  },
});

4. Performance + Core Web Vitals

• Optimize images (next/image for dynamic, pre-sized covers for static).
• Defer non-critical JS; reduce hydration where possible.
• Cache MDX parsing server-side.

5. Sitemaps & robots

Generate a sitemap.xml and expose robots.txt.

// app/sitemap.ts
import { getAllPostIds } from '@/lib/posts';
export default async function sitemap() {
  const posts = getAllPostIds();
  return posts.map(({ params }) => ({ url: `https://lumetran.com/blog/${params.slug}` }));
}

Takeaway

Keep it simple. Ship semantic HTML, correct metadata, pleasant typography, and fast pages. The rest compounds.