Next.js 15 Meta Tags Complete Guide — og:image to hreflang

Next.js 15 App Router lets you manage static and dynamic meta tags declaratively via the Metadata API. Use generateMetadata() to auto-generate per-page og:image, title, and description at build or request time.

Next.js 15 Meta Tags Complete Guide — og:image to hreflang

Key Summary Next.js 15 App Router uses the Metadata API to generate SEO-critical meta tags. This guide covers: generateMetadata() for dynamic pages, static metadata for layout files, og:image with Next.js Image Optimization, hreflang for multilingual sites, canonical URLs, and Twitter Card configuration.

Basic Static Metadata (layout.tsx)

typescript

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    template: "%s | MillionsCode",
    default: "MillionsCode — Free Tools & Finance Info",
  },
  description: "Free financial calculators, crypto tools, and investment guides.",
  metadataBase: new URL("https://millionscode.com"),
  openGraph: {
    type: "website",
    siteName: "MillionsCode",
    locale: "ko_KR",
  },
  twitter: {
    card: "summary_large_image",
    site: "@millionscode",
  },
};

Dynamic Metadata for Blog Posts

typescript

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

export async function generateMetadata(
  { params }: { params: Promise<{ id: string }> }
): Promise<Metadata> {
  const { id } = await params;
  const post = await getPost(id);

  return {
    title: post.title,
    description: post.description,
    openGraph: {
      title: post.title,
      description: post.description,
      type: "article",
      publishedTime: post.published_at,
      images: [{
        url: `/api/og?title=${encodeURIComponent(post.title)}`,
        width: 1200,
        height: 628,
        alt: post.title,
      }],
    },
    alternates: {
      canonical: `https://millionscode.com/blog/${id}`,
      languages: {
        "en": `https://millionscode.com/en/blog/${id}`,
        "ja": `https://millionscode.com/ja/blog/${id}`,
        "zh": `https://millionscode.com/zh/blog/${id}`,
        "x-default": `https://millionscode.com/blog/${id}`,
      },
    },
  };
}

hreflang for Multilingual Sites

The alternates.languages field in Next.js 15 automatically generates tags. Always include x-default pointing to the primary language version.

og:image with Dynamic Generation

typescript

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

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get("title") ?? "MillionsCode";

  return new ImageResponse(
    (<div style={{ display: "flex", width: 1200, height: 628,
                   background: "#1a1a2e", alignItems: "center", padding: 80 }}>
      <h1 style={{ color: "white", fontSize: 56, fontWeight: 700 }}>{title}</h1>
    </div>),
    { width: 1200, height: 628 }
  );
}