Next.js 15 SEO Mastery: Dynamic Metadata, OpenGraph Cards, and Automated Sitemaps

In single-page applications, search engine optimization historically required awkward SSR workarounds or headless browser prerendering. In Next.js 15, SEO is a first-class citizen embedded directly into the framework. By leveraging the built-in Metadata API, programmatic OpenGraph image generation, and dynamic sitemaps, engineering teams can build web applications that achieve 100/100 Lighthouse SEO audits and maximize social media click-through rates.

Dynamic Metadata with generateMetadata()

For dynamic pages (such as e-commerce product pages or blog posts), metadata must be generated based on server-side database records. Next.js automatically dedupes identical fetch calls between your metadata generator and page component:

// app/blog/[slug]/page.tsx
import type { Metadata, ResolvingMetadata } from 'next';
import { db } from '@/lib/db';

type Props = {
  params: Promise<{ slug: string }>;
};

export async function generateMetadata(
  { params }: Props,
  parent: ResolvingMetadata
): Promise<Metadata> {
  const { slug } = await params;
  const post = await db.post.findUnique({ where: { slug } });

  if (!post) return { title: 'Post Not Found' };

  return {
    title: `${post.title} | Nitai IT Solution`,
    description: post.excerpt,
    alternates: {
      canonical: `https://nitaiitsolution.in/blog/${slug}/`,
    },
    openGraph: {
      title: post.title,
      description: post.excerpt,
      url: `https://nitaiitsolution.in/blog/${slug}/`,
      siteName: 'Nitai IT Solution',
      type: 'article',
      publishedTime: post.createdAt.toISOString(),
      images: [
        {
          url: `https://nitaiitsolution.in/api/og?title=${encodeURIComponent(post.title)}`,
          width: 1200,
          height: 630,
        },
      ],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
    },
  };
}

Programmatic Dynamic OpenGraph Images via @vercel/og

Static social preview images result in generic social sharing cards. With the @vercel/og edge runtime library, Next.js programmatically generates pixel-perfect 1200x630 social preview banners rendered on-the-fly using JSX and HTML/CSS:

// app/api/og/route.tsx
import { ImageResponse } from 'next/og';

export const runtime = 'edge';

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Nitai IT Solution Tech Insights';

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          justifyContent: 'center',
          backgroundColor: '#102b54',
          padding: '80px',
        }}
      >
        <span style={{ color: '#f4511e', fontSize: 24, fontWeight: 800, textTransform: 'uppercase' }}>
          Engineering Insights
        </span>
        <h1 style={{ color: '#ffffff', fontSize: 60, fontWeight: 900, lineHeight: 1.2, marginTop: 20 }}>
          {title}
        </h1>
        <p style={{ color: '#cadcee', fontSize: 22, marginTop: 10 }}>
          Nitai IT Solution • Enterprise Software Engineering
        </p>
      </div>
    ),
    { width: 1200, height: 630 }
  );
}

Automated Dynamic Sitemap & Robots.txt

Never manually edit XML files again. Next.js natively builds dynamic XML sitemaps and robots.txt files using typed TypeScript functions:

// app/sitemap.ts
import { MetadataRoute } from 'next';

export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
  const articles = await fetchPublishedArticles();
  const entries = articles.map((a) => ({
    url: `https://nitaiitsolution.in/blog/${a.slug}/`,
    lastModified: a.updatedAt,
    changeFrequency: 'monthly' as const,
    priority: 0.8
  }));

  return [
    { url: 'https://nitaiitsolution.in/', lastModified: new Date(), priority: 1.0 },
    { url: 'https://nitaiitsolution.in/blog/', lastModified: new Date(), priority: 0.9 },
    ...entries
  ];
}

Frequently Asked Questions