IT2026年4月2日

⚡

Next.js 15 メタタグ完全ガイド — og:image から hreflang まで

Next.js 15 メタタグ完全ガイド — og:image から hreflang までを実践的に解説し、明確なチェックリスト、注意すべき主要リスク、行動前に選択肢を比較したい読者のための次のステップをまとめたガイドです。

重要ポイント
Next.js 15 では、App Router をベースにした Metadata API により、静的および動的なメタタグを宣言的に管理できます。

generateMetadata() 関数を使うと、ページごとに動的な og:image、title、description を自動生成できます。
Twitter Card、hreflang、canonical URL、構造化データ（JSON-LD）は、すべて単一ファイルから制御できます。
メタタグの設定が誤っていると、ソーシャルプレビューのエラーや検索順位の低下に直結するため、デプロイ前に必ず Meta Tag Checker で確認してください。

クイック回答: Next.js 15 では Metadata API を使ってメタタグを効率的に管理できます。

Next.js 15 Metadata API とは？

項目	値
Next.js バージョン	15
メタデータ管理方法	Metadata API
動的メタデータ生成関数	generateMetadata()
対応するメタタグの種類	og:image, title, description, Twitter Card, hreflang, canonical URL, JSON-LD
メタタグチェッカーのリンク	Meta Tag Checker

Next.js 13 で導入された App Router は、従来のコンポーネント方式に代わる Metadata API を提供します。Next.js 15 ではこの API がさらに洗練され、layout.tsx と page.tsx ファイルから、metadata オブジェクトを export する方法と generateMetadata() 関数を使う方法の 2 通りでメタタグを制御できます。

静的メタデータ

最もシンプルな形式は、metadata オブジェクトを直接 export する方法です。

tsx

// app/page.tsx
import type { Metadata } from 'next'

export const metadata: Metadata = {
  title: 'Next.js 15 Meta Tag Guide',
  description: 'Everything about Next.js meta tags, from og:image to hreflang',
}

このアプローチは、ビルド時点で内容が確定している静的ページに適しています。たとえば、ブログのホームページや、内容が頻繁には変わらない about ページなどです。

動的メタデータ: generateMetadata()

ブログ記事や商品詳細ページのように、URL パラメータに応じて内容が変わるページでは、generateMetadata() 関数を使用します。

tsx

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

type Props = {
  params: { slug: string }
}

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

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [{ url: post.ogImage, width: 1200, height: 630 }],
    },
  }

generateMetadata() はサーバー上で実行されるため、データベースクエリや外部 API 呼び出しを行えます。戻り値は Metadata 型で、Next.js が自動的にタグへ挿入します。

og:image を適切に設定するには？

Next.js 15 メタタグ完全ガイド — og:image から hreflang まで visual 2

Open Graph 画像は、KakaoTalk、Slack、Twitter などのソーシャルプラットフォームでリンクが共有されたときに表示されるプレビュー画像です。設定が誤っていると、空白の画像や崩れたレイアウトが表示され、クリック率が大きく低下します。

基本的な og:image 設定

tsx

export const metadata: Metadata = {
  openGraph: {
    title: 'Page Title',
    description: 'Page description',
    url: 'https://example.com/blog/my-post',
    siteName: 'Site Name',
    images: [
      {
        url: 'https://example.com/og/my-post.png',
        width: 1200,
        height: 630,
        alt: 'Post representative image',
      },
    ],
    locale: 'ko_KR',
    type: 'article',
  },
}

Next.js における動的 og:image 生成 — ImageResponse

Next.js 15 は、next/og の ImageResponse を使ったサーバーサイドの動的 OG 画像レンダリングに対応しています。別途画像編集を行わなくても、デザイン全体をコードで制御できます。

tsx

// app/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') ?? 'Default Title'

  return new ImageResponse(
    (
      <div
        style={{
          display: 'flex',
          fontSize: 60,
          background: '#0f172a',
          color: 'white',
          width: '100%',
          height: '100%',
          alignItems: 'center',
          justifyContent: 'center',
          padding: '40px',
        }}
      >
        {title}
      </div>
    ),
    { width: 1200, height: 630 }
  )
}

その後、generateMetadata() 内でこのエンドポイントを参照できます。

tsx

images: [{ url: `https://example.com/og?title=${encodeURIComponent(post.title)}` }]

Twitter Card の設定

Twitter（現在の X）は独自のメタタグ仕様を使用しますが、Next.js Metadata API ではこれを twitter キーの下に集約できます。

tsx

export const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Page Title',
    description: 'Page description',
    creator: '@handle',
    images: ['https://example.com/og/my-post.png'],
  },
}

card の値には、summary、summary_large_image、app、player のいずれかを指定できます。ブログ記事には、summary_large_image が最も適しています。

hreflang で多言語 SEO を完成させる方法

Next.js 15 メタタグ完全ガイド — og:image から hreflang まで visual 3

hreflang タグは、同じコンテンツの各バージョンがどの言語・地域向けであるかを検索エンジンに伝えます。サイトに韓国語版と英語版の両方がある場合は、必ず設定する必要があります。設定しないと、Google が言語別ページを重複コンテンツとして扱い、検索での表示機会が損なわれる可能性があります。

alternates で hreflang を設定する

tsx

export const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/ko/blog/my-post',
    languages: {
      'ko-KR': 'https://example.com/ko/blog/my-post',
      'en-US': 'https://example.com/en/blog/my-post',
      'ja-JP': 'https://example.com/ja/blog/my-post',
    },
}

この設定に基づいて、Next.js は次のタグを自動生成します。

html

<link rel="canonical" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="ko-KR" href="https://example.com/ko/blog/my-post" />
<link rel="alternate" hreflang="en-US" href="https://example.com/en/blog/my-post" />
<link rel="alternate" hreflang="ja-JP" href="https://example.com/ja/blog/my-post" />

Canonical URL 設定が重要な理由

canonical URL タグは、同一または類似のコンテンツが複数の URL に存在する場合に、「この URL がオリジナルである」ことを検索エンジンに伝えます。ページネーション、UTM パラメータ、www あり・なしの違いなどによって重複 URL が発生したとき、canonical タグを省略すると検索ランキングのシグナルが複数の URL に分散してしまいます。

tsx

alternates: {
  canonical: 'https://example.com/blog/my-post',
}

サイト全体で絶対パスを使用し、HTTPS と www の有無に一貫性を持たせてください。

構造化データ（JSON-LD）でリッチリザルトを獲得する

Next.js 15 メタタグ完全ガイド — og:image から hreflang まで visual 4

構造化データを使うと、星評価、著者、公開日などの追加情報を検索結果に表示するリッチリザルトが可能になります。Next.js で推奨される方法は、`

🔧 関連する無料ツール

🔍

Keyword Density Analyzer

SEO keyword density analysis

次に役立つステップ