Next.js provides an excellent foundation for SEO-friendly web applications. But good rankings require more than server-side rendering. Metadata, structured data, and Core Web Vitals all contribute to how search engines — and increasingly AI answer engines — understand and surface your pages.

Use the Metadata API

The App Router has a built-in Metadata API. Every page should export unique, accurate metadata:

// app/blog/[slug]/page.tsx
import type { Metadata } from 'next';

export async function generateMetadata({ params }): Promise<Metadata> {
  const post = await getPost(params.slug);
  return {
    title: post.title,
    description: post.excerpt,
    alternates: { canonical: `https://example.com/blog/${params.slug}` },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      type: 'article',
      images: [post.coverImage],
    },
  };
}

A canonical URL per page prevents duplicate-content dilution, and per-page Open Graph data controls how links look when shared.

Add structured data (JSON-LD)

Structured data helps search engines parse your content into entities — articles, organizations, breadcrumbs. Inject it as JSON-LD:

export default function Page({ post }) {
  const jsonLd = {
    '@context': 'https://schema.org',
    '@type': 'BlogPosting',
    headline: post.title,
    datePublished: post.date,
    author: { '@type': 'Organization', name: 'Your Company' },
  };
  return (
    <script
      type="application/ld+json"
      dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }}
    />
  );
}

This is also what AI answer engines lean on to attribute and cite content correctly.

Optimize Core Web Vitals

Core Web Vitals are a ranking signal and a real UX signal. The highest-leverage moves in Next.js:

  • Use next/image for automatic sizing, lazy loading, and modern formats.
  • Use next/font to avoid layout shift from web fonts.
  • Keep client JavaScript small — prefer Server Components for non-interactive UI.
import Image from 'next/image';

<Image src="/hero.jpg" alt="Product" width={1200} height={630} priority />

Conclusion

SEO in Next.js comes down to three habits: unique metadata with canonicals on every route, structured data so machines understand your content, and disciplined performance. Get these right and you build pages that are fast, discoverable, and citable by both search and AI engines.