T-CREATOR

Next.js Metadata API 逆引き：`robots`／`alternates`／`openGraph`／`twitter` の記入例

Next.js Metadata API 逆引き：`robots`／`alternates`／`openGraph`／`twitter` の記入例

Next.js で SEO やソーシャルメディア対応を進める際、Metadata API の設定は避けて通れません。しかし、公式ドキュメントを見ても「どの設定をどう使えば目的が達成できるのか」がすぐには分からず、困った経験はありませんか？

本記事では、Next.js の Metadata API における robots、alternates、openGraph、twitter の 4 つの重要なメタデータについて、「やりたいこと」から逆引きできる形で具体的な記入例をご紹介します。実務ですぐに使える実装パターンを網羅していますので、ぜひ参考にしてください。

Metadata API 早見表

以下は、Next.js Metadata API の主要なメタデータ設定の早見表です。目的に応じて必要な設定を素早く見つけることができます。

robots メタデータ早見表

#目的設定値効果
1検索エンジンにインデックスさせる{ index: true, follow: true }ページをクロール・インデックス許可
2検索エンジンからページを隠す{ index: false, follow: false }インデックス拒否、リンク追跡なし
3キャッシュを禁止する{ nocache: true }検索エンジンのキャッシュを防ぐ
4画像のインデックスを防ぐ{ noimageindex: true }ページ内画像のインデックスを拒否
5スニペット表示を制限する{ nosnippet: true, max_snippet: -1 }検索結果でのスニペット非表示

alternates メタデータ早見表

#目的設定値効果
1正規 URL を指定する{ canonical: 'https:​/​​/​example.com​/​page' }重複コンテンツ対策
2多言語対応ページを設定{ languages: { 'ja': '​/​ja', 'en': '​/​en' } }言語別ページの関連付け
3RSS フィードを追加{ types: { 'application​/​rss+xml': '​/​rss.xml' } }RSS フィード URL の指定
4モバイル版 URL を指定{ media: { 'only screen and (max-width: 600px)': '​/​mobile' } }デバイス別 URL の設定

openGraph メタデータ早見表

#目的設定値効果
1基本的な OG タグ設定{ title, description, url, siteName }SNS でのシェア時の基本情報
2画像を設定する{ images: [{ url, width, height, alt }] }シェア時のサムネイル画像
3記事タイプの設定{ type: 'article', publishedTime, authors }ブログ記事用メタデータ
4動画を設定する{ videos: [{ url, width, height }] }動画コンテンツの埋め込み
5ロケール設定{ locale: 'ja_JP', alternateLocale: ['en_US'] }言語・地域の指定

twitter メタデータ早見表

#目的設定値効果
1サマリーカード表示{ card: 'summary', title, description }小さなカード形式でのシェア
2大きな画像カード表示{ card: 'summary_large_image', images }大きな画像付きカード
3アプリカード表示{ card: 'app', app: { id: { iphone, ipad } } }アプリダウンロード促進
4プレイヤーカード表示{ card: 'player', players }動画・音声の再生機能付き
5Twitter アカウント紐付け{ site: '@username', creator: '@author' }サイト・作成者の Twitter 連携

背景

Next.js の Metadata API とは

Next.js 13.2 で導入された App Router では、ページごとのメタデータを型安全かつ効率的に管理できる Metadata API が提供されています。

従来の Pages Router では <Head> コンポーネントを使って手動でメタタグを記述していましたが、App Router では metadata オブジェクトや generateMetadata 関数をエクスポートするだけで、自動的に最適化されたメタタグが生成されます。

typescript// app/page.tsx での基本的な使い方
import { Metadata } from 'next';

export const metadata: Metadata = {
  title: 'ホームページ',
  description: 'サイトの説明文',
};

この記述により、Next.js が自動的に以下のような HTML を生成してくれます。

html<head>
  <title>ホームページ</title>
  <meta name="description" content="サイトの説明文" />
</head>

SEO とソーシャルメディア対応の重要性

現代の Web サイトにおいて、検索エンジン最適化（SEO）とソーシャルメディアでのシェア最適化は、トラフィック獲得の重要な要素です。

適切なメタデータを設定することで、以下のメリットが得られます。

  • 検索エンジンからの流入増加: robots メタデータで検索エンジンのクローラー動作を制御
  • 重複コンテンツの回避: alternates で正規 URL を明示し、SEO ペナルティを防止
  • SNS でのクリック率向上: openGraph と twitter で魅力的なシェアカードを表示
  • 多言語サイトの適切な管理: alternates で言語別ページの関連付け

以下の図は、Metadata API が生成するメタタグと、それらがどのように外部サービスに影響を与えるかを示しています。

mermaidflowchart TB
    metadata["Metadata API<br/>(metadata オブジェクト)"]

    metadata --> robots["robots メタタグ"]
    metadata --> alternates["alternates メタタグ"]
    metadata --> og["Open Graph メタタグ"]
    metadata --> tw["Twitter Card メタタグ"]

    robots --> googlebot["Google Bot<br/>(クローラー制御)"]
    alternates --> seo["SEO 評価<br/>(正規 URL・多言語)"]
    og --> facebook["Facebook<br/>(シェアカード)"]
    og --> line["LINE<br/>(シェアカード)"]
    tw --> twitter["X (Twitter)<br/>(Twitter Card)"]

図の要点：Metadata API で設定した情報が、検索エンジンや SNS プラットフォームそれぞれに最適化された形で配信されます。

課題

メタデータ設定の複雑さ

Next.js Metadata API は強力ですが、設定項目が多岐にわたるため、以下のような課題に直面することがあります。

課題 1: どのメタデータを使えばよいか分からない

SEO 対策をしたい、SNS でのシェアを最適化したいといった目的は明確でも、それを実現するために robots、alternates、openGraph、twitter のどれをどう使えばよいのか、すぐには判断できません。

課題 2: 設定値のパターンが多すぎる

各メタデータには複数のプロパティがあり、それぞれに様々な設定値を指定できます。例えば robots だけでも index、follow、noarchive、nosnippet など多数のオプションがあり、全てを把握するのは困難です。

課題 3: 実装例が少ない

公式ドキュメントには API の仕様は詳しく書かれていますが、「この目的を達成するにはこう書く」という実践的な例が不足しているため、実装に時間がかかってしまいます。

以下の図は、メタデータ設定における典型的な課題の流れを示しています。

mermaidflowchart LR
    goal["目的<br/>(SEO 向上・SNS 最適化)"]
    question["どのメタデータを<br/>使えばいい？"]
    docs["公式ドキュメント<br/>を確認"]
    confusion["設定項目が多く<br/>迷う"]
    trial["試行錯誤"]

    goal --> question
    question --> docs
    docs --> confusion
    confusion --> trial
    trial -.時間がかかる.-> goal

図の要点：目的から実装までの道のりが長く、試行錯誤が必要になる現状の課題を表しています。

解決策

逆引き形式でのメタデータ設定ガイド

本記事では、以下のアプローチで課題を解決します。

解決策 1: 目的ベースの逆引き形式

「検索エンジンからページを隠したい」「SNS でシェアした時に大きな画像を表示したい」といった具体的な目的から、必要な設定を逆引きできる形式で解説します。

解決策 2: コピー&ペーストで使える実装例

すぐに実務で使える TypeScript のコードを、短いブロックに分割して提供します。各コードブロックには詳細なコメントを付け、初心者でも理解しやすくしています。

解決策 3: 4 つのメタデータを体系的に整理

robots（検索エンジン制御）、alternates（URL 関連付け）、openGraph（SNS 共通）、twitter（X 特化）の 4 つに分類し、それぞれの役割と使い分けを明確にします。

以下の図は、目的から実装への最短ルートを示しています。

mermaidflowchart LR
    goal["目的を明確化"]
    table["早見表で確認"]
    example["具体例を参照"]
    implement["コピー&ペースト"]
    done["実装完了"]

    goal --> table
    table --> example
    example --> implement
    implement --> done

    style done fill:#90EE90

図の要点：本記事の逆引き形式を使えば、目的から実装まで最短ルートで到達できます。

Metadata API の基本構造

具体例に入る前に、Metadata API の基本的な使い方を確認しておきましょう。

Next.js の App Router では、各ページのファイル（page.tsx や layout.tsx）から metadata オブジェクトをエクスポートします。

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

// 静的なメタデータの場合
export const metadata: Metadata = {
  // メタデータの設定をここに記述
};

動的にメタデータを生成する場合は、generateMetadata 関数を使用します。

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

// 動的なメタデータの場合
export async function generateMetadata({
  params,
}): Promise<Metadata> {
  // params などから情報を取得
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.description,
  };
}

これらの基本構造に、次のセクションで紹介する robots、alternates、openGraph、twitter の設定を追加していきます。

具体例

ここからは、4 つのメタデータそれぞれについて、具体的な記入例を「やりたいこと」ごとに紹介していきます。

robots メタデータの記入例

robots メタデータは、検索エンジンのクローラーに対して、ページのインデックス方法を指示するために使用します。

例 1: ページを検索エンジンにインデックスさせる（基本設定）

最も基本的な設定です。ページを検索結果に表示させ、リンクを追跡させたい場合に使用します。

typescriptimport { Metadata } from 'next';

export const metadata: Metadata = {
  robots: {
    index: true, // このページをインデックスに登録する
    follow: true, // ページ内のリンクを追跡する
  },
};

生成される HTML のメタタグは以下のようになります。

html<meta name="robots" content="index, follow" />

例 2: 検索エンジンからページを完全に隠す

会員限定ページやテストページなど、検索結果に表示させたくない場合の設定です。

typescriptexport const metadata: Metadata = {
  robots: {
    index: false, // インデックス登録を拒否
    follow: false, // リンクの追跡も拒否
    nocache: true, // キャッシュも禁止
  },
};

この設定により、以下のメタタグが生成されます。

html<meta name="robots" content="noindex, nofollow, nocache" />

例 3: ページ内の画像をインデックスさせない

テキストはインデックスさせたいが、画像は検索結果に表示させたくない場合に便利です。

typescriptexport const metadata: Metadata = {
  robots: {
    index: true,
    follow: true,
    noimageindex: true, // 画像のインデックスを防ぐ
  },
};

例 4: 検索結果のスニペット表示を制御する

検索結果に表示されるテキストの長さや、スニペット自体の表示を制御できます。

typescriptexport const metadata: Metadata = {
  robots: {
    index: true,
    follow: true,
    nosnippet: true, // スニペットを表示しない
    max_snippet: -1, // スニペットの長さ制限なし（nosnippetと併用）
    max_image_preview: 'large', // 画像プレビューのサイズ（none/standard/large）
    max_video_preview: -1, // 動画プレビューの長さ（秒数、-1は無制限）
  },
};

例 5: 特定の検索エンジンに個別に指示する

Google と他の検索エンジンで異なる設定をしたい場合、googleBot プロパティを使用します。

typescriptexport const metadata: Metadata = {
  robots: {
    index: true,
    follow: true,
  },
  // Google Bot にのみ適用される設定
  googleBot: {
    index: true,
    follow: false, // Google だけリンク追跡させない
    noimageindex: true,
    'max-video-preview': -1,
    'max-image-preview': 'large',
    'max-snippet': -1,
  },
};

alternates メタデータの記入例

alternates メタデータは、ページの代替バージョン（正規 URL、他言語版、RSS フィードなど）を指定するために使用します。

例 1: 正規 URL を設定する（重複コンテンツ対策）

複数の URL で同じコンテンツが表示される場合、正規 URL を明示することで SEO の評価が分散するのを防ぎます。

typescriptexport const metadata: Metadata = {
  alternates: {
    canonical: 'https://example.com/products/item-123',
  },
};

生成されるリンクタグは以下の通りです。

html<link
  rel="canonical"
  href="https://example.com/products/item-123"
/>

これにより、クエリパラメータ付き URL（?utm_source=...）などからアクセスされても、正規の URL に評価が集約されます。

例 2: 多言語対応ページを設定する

多言語サイトで、同じコンテンツの他言語版を検索エンジンに伝えるための設定です。

typescriptexport const metadata: Metadata = {
  alternates: {
    languages: {
      ja: 'https://example.com/ja/about', // 日本語版
      en: 'https://example.com/en/about', // 英語版
      'zh-CN': 'https://example.com/zh-cn/about', // 中国語（簡体字）版
      'x-default': 'https://example.com/en/about', // デフォルト言語
    },
  },
};

この設定で、以下のような hreflang タグが生成されます。

html<link
  rel="alternate"
  hreflang="ja"
  href="https://example.com/ja/about"
/>
<link
  rel="alternate"
  hreflang="en"
  href="https://example.com/en/about"
/>
<link
  rel="alternate"
  hreflang="zh-CN"
  href="https://example.com/zh-cn/about"
/>
<link
  rel="alternate"
  hreflang="x-default"
  href="https://example.com/en/about"
/>

例 3: RSS フィードを追加する

ブログサイトなどで RSS フィードを提供している場合、以下のように設定します。

typescriptexport const metadata: Metadata = {
  alternates: {
    types: {
      'application/rss+xml': 'https://example.com/rss.xml',
    },
  },
};

生成されるタグは以下の通りです。

html<link
  rel="alternate"
  type="application/rss+xml"
  href="https://example.com/rss.xml"
/>

例 4: モバイル専用 URL を設定する

デスクトップとモバイルで異なる URL を使用している場合（レスポンシブではなく別 URL の場合）の設定です。

typescriptexport const metadata: Metadata = {
  alternates: {
    media: {
      'only screen and (max-width: 600px)':
        'https://m.example.com/page',
    },
  },
};

例 5: 複数の alternates を組み合わせる

実務では、正規 URL と多言語設定を同時に使用することが多いでしょう。

typescriptexport const metadata: Metadata = {
  alternates: {
    // 正規 URL
    canonical: 'https://example.com/ja/blog/article-1',

    // 多言語版
    languages: {
      ja: 'https://example.com/ja/blog/article-1',
      en: 'https://example.com/en/blog/article-1',
      'x-default': 'https://example.com/en/blog/article-1',
    },

    // RSS フィード
    types: {
      'application/rss+xml':
        'https://example.com/ja/blog/rss.xml',
    },
  },
};

openGraph メタデータの記入例

openGraph メタデータは、Facebook、LINE、Slack などの SNS でシェアされた際の表示内容を制御します。

例 1: 基本的な Open Graph タグを設定する

SNS でシェアされた際に最低限必要な情報を設定します。

typescriptexport const metadata: Metadata = {
  openGraph: {
    title: 'Next.js Metadata API 完全ガイド',
    description:
      'Next.js の Metadata API を使った SEO 対策とソーシャルメディア最適化の方法',
    url: 'https://example.com/blog/nextjs-metadata-guide',
    siteName: 'Tech Blog',
    locale: 'ja_JP',
    type: 'website',
  },
};

この設定で生成される主なメタタグは以下の通りです。

html<meta
  property="og:title"
  content="Next.js Metadata API 完全ガイド"
/>
<meta
  property="og:description"
  content="Next.js の Metadata API を使った SEO 対策とソーシャルメディア最適化の方法"
/>
<meta
  property="og:url"
  content="https://example.com/blog/nextjs-metadata-guide"
/>
<meta property="og:site_name" content="Tech Blog" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="website" />

例 2: 画像を設定する（シェア時のサムネイル）

SNS でシェアされた際に表示される画像を設定します。この設定は CTR（クリック率）に大きく影響します。

typescriptexport const metadata: Metadata = {
  openGraph: {
    title: 'Next.js Metadata API 完全ガイド',
    description: 'SEO 対策とソーシャルメディア最適化の方法',
    images: [
      {
        url: 'https://example.com/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Next.js Metadata API のイメージ画像',
      },
    ],
  },
};

推奨される画像サイズは 1200×630 ピクセル です。このサイズは Facebook や LinkedIn で最適に表示されます。

例 3: 複数の画像を設定する

複数の画像を登録すると、SNS プラットフォームが最適なものを選択します。

typescriptexport const metadata: Metadata = {
  openGraph: {
    images: [
      {
        url: 'https://example.com/og-image-large.png',
        width: 1200,
        height: 630,
        alt: 'メイン画像',
      },
      {
        url: 'https://example.com/og-image-square.png',
        width: 800,
        height: 800,
        alt: '正方形画像',
      },
    ],
  },
};

例 4: ブログ記事用の Open Graph 設定

ブログ記事の場合、type: 'article' を設定し、記事固有の情報を追加します。

typescriptexport const metadata: Metadata = {
  openGraph: {
    title: 'Next.js 14 の新機能を徹底解説',
    description:
      'Server Actions、Partial Prerendering など最新機能を紹介',
    url: 'https://example.com/blog/nextjs-14-features',
    siteName: 'Tech Blog',
    locale: 'ja_JP',
    type: 'article',

    // 記事固有の情報
    publishedTime: '2024-01-15T09:00:00.000Z',
    modifiedTime: '2024-01-20T15:30:00.000Z',
    authors: ['山田太郎', '佐藤花子'],
    tags: ['Next.js', 'React', 'Web開発'],

    images: [
      {
        url: 'https://example.com/blog/nextjs-14-features/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Next.js 14 の新機能紹介',
      },
    ],
  },
};

この設定により、以下のような記事専用のメタタグが生成されます。

html<meta property="og:type" content="article" />
<meta
  property="article:published_time"
  content="2024-01-15T09:00:00.000Z"
/>
<meta
  property="article:modified_time"
  content="2024-01-20T15:30:00.000Z"
/>
<meta property="article:author" content="山田太郎" />
<meta property="article:author" content="佐藤花子" />
<meta property="article:tag" content="Next.js" />
<meta property="article:tag" content="React" />
<meta property="article:tag" content="Web開発" />

例 5: 動画コンテンツを含む Open Graph 設定

動画を含むページの場合、動画の情報も Open Graph に追加できます。

typescriptexport const metadata: Metadata = {
  openGraph: {
    title: 'Next.js チュートリアル動画',
    description: '初心者向け Next.js の使い方を動画で解説',
    type: 'video.other',

    videos: [
      {
        url: 'https://example.com/videos/nextjs-tutorial.mp4',
        width: 1280,
        height: 720,
        type: 'video/mp4',
      },
    ],

    images: [
      {
        url: 'https://example.com/videos/nextjs-tutorial-thumbnail.png',
        width: 1200,
        height: 630,
        alt: '動画のサムネイル',
      },
    ],
  },
};

例 6: 多言語対応の Open Graph 設定

多言語サイトで、代替言語のページを指定する場合の設定です。

typescriptexport const metadata: Metadata = {
  openGraph: {
    title: 'Next.js Metadata API ガイド',
    description: 'メタデータの設定方法を詳しく解説',
    locale: 'ja_JP',
    alternateLocale: ['en_US', 'zh_CN'],
    url: 'https://example.com/ja/guide',
  },
};

twitter メタデータの記入例

twitter メタデータは、X（旧 Twitter）でシェアされた際の Twitter Card の表示を制御します。Open Graph と併用することが一般的です。

例 1: サマリーカード（小さな画像）を表示する

テキスト中心で、小さなサムネイル画像を表示する基本的なカードです。

typescriptexport const metadata: Metadata = {
  twitter: {
    card: 'summary',
    title: 'Next.js Metadata API 完全ガイド',
    description:
      'SEO 対策とソーシャルメディア最適化の方法を解説',
    site: '@your_site_account',
    creator: '@author_account',
  },
};

生成されるメタタグは以下の通りです。

html<meta name="twitter:card" content="summary" />
<meta
  name="twitter:title"
  content="Next.js Metadata API 完全ガイド"
/>
<meta
  name="twitter:description"
  content="SEO 対策とソーシャルメディア最適化の方法を解説"
/>
<meta name="twitter:site" content="@your_site_account" />
<meta name="twitter:creator" content="@author_account" />

例 2: 大きな画像カードを表示する（推奨）

視覚的なインパクトが大きく、CTR が高くなる傾向があります。ブログ記事や商品ページに最適です。

typescriptexport const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js Metadata API 完全ガイド',
    description: 'SEO 対策とソーシャルメディア最適化の方法',
    site: '@your_site_account',
    creator: '@author_account',
    images: ['https://example.com/twitter-card-image.png'],
  },
};

推奨される画像サイズは 1200×675 ピクセル（アスペクト比 16:9） または 1200×628 ピクセル です。

例 3: 複数の画像を設定する

Twitter Card でも複数の画像を設定できます。配列形式で指定します。

typescriptexport const metadata: Metadata = {
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js 14 新機能まとめ',
    description:
      'Server Actions と Partial Prerendering を解説',
    images: [
      'https://example.com/twitter-image-1.png',
      'https://example.com/twitter-image-2.png',
    ],
  },
};

例 4: アプリカードを表示する（モバイルアプリの場合）

iOS や Android アプリを宣伝する場合、アプリカードを使用します。

typescriptexport const metadata: Metadata = {
  twitter: {
    card: 'app',
    title: '最高の TODO アプリ',
    description: 'タスク管理がこれ一つで完結',
    site: '@your_app_account',

    app: {
      id: {
        iphone: '123456789', // App Store の ID
        ipad: '123456789',
        googleplay: 'com.example.app', // Google Play のパッケージ名
      },
      url: {
        iphone: 'todoapp://open',
        ipad: 'todoapp://open',
      },
      name: {
        iphone: 'TODO アプリ',
        ipad: 'TODO アプリ',
        googleplay: 'TODO アプリ',
      },
    },
  },
};

例 5: プレイヤーカード（動画・音声用）を表示する

動画や音声コンテンツを Twitter 上で直接再生できるカードです。

typescriptexport const metadata: Metadata = {
  twitter: {
    card: 'player',
    title: 'Next.js チュートリアル動画',
    description: '初心者向け Next.js の使い方',
    site: '@your_site_account',

    players: {
      playerUrl: 'https://example.com/embed/video/123',
      streamUrl:
        'https://example.com/videos/stream/123.mp4',
      width: 1280,
      height: 720,
    },

    images: ['https://example.com/video-thumbnail.png'],
  },
};

例 6: Open Graph と Twitter Card を併用する

実務では、両方を設定することで幅広い SNS に対応します。

typescriptexport const metadata: Metadata = {
  // Open Graph の設定
  openGraph: {
    title: 'Next.js Metadata API 完全ガイド',
    description:
      'SEO 対策とソーシャルメディア最適化の方法を詳しく解説します',
    url: 'https://example.com/blog/nextjs-metadata-guide',
    siteName: 'Tech Blog',
    locale: 'ja_JP',
    type: 'article',
    publishedTime: '2024-01-15T09:00:00.000Z',
    authors: ['山田太郎'],
    images: [
      {
        url: 'https://example.com/og-image.png',
        width: 1200,
        height: 630,
        alt: 'Next.js Metadata API のイメージ',
      },
    ],
  },

  // Twitter Card の設定
  twitter: {
    card: 'summary_large_image',
    title: 'Next.js Metadata API 完全ガイド',
    description: 'SEO 対策とソーシャルメディア最適化の方法',
    site: '@tech_blog_jp',
    creator: '@yamada_taro',
    images: ['https://example.com/twitter-card-image.png'],
  },
};

Open Graph で設定した情報は Twitter でも使用されますが、Twitter 固有の設定（@username など）は twitter メタデータで指定します。

動的ページでのメタデータ生成

実際のアプリケーションでは、ブログ記事や商品ページなど、動的にメタデータを生成する必要があります。

例: ブログ記事ページの動的メタデータ

ブログの記事詳細ページで、記事ごとに適切なメタデータを設定する例です。

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

// 記事データを取得する関数（実装は省略）
async function getPost(slug: string) {
  // データベースや CMS から記事を取得
  return {
    title: 'Next.js 14 の新機能',
    description:
      'Server Actions と Partial Prerendering を解説',
    publishedAt: '2024-01-15T09:00:00.000Z',
    updatedAt: '2024-01-20T15:30:00.000Z',
    author: '山田太郎',
    tags: ['Next.js', 'React'],
    coverImage:
      'https://example.com/blog/nextjs-14/cover.png',
  };
}

上記のデータ取得関数を使って、動的にメタデータを生成します。

typescriptexport async function generateMetadata({
  params,
}): Promise<Metadata> {
  // URL のパラメータから記事を取得
  const post = await getPost(params.slug);

  return {
    title: post.title,
    description: post.description,

    // robots の設定
    robots: {
      index: true,
      follow: true,
    },

    // 正規 URL の設定
    alternates: {
      canonical: `https://example.com/blog/${params.slug}`,
    },

    // Open Graph の設定
    openGraph: {
      title: post.title,
      description: post.description,
      url: `https://example.com/blog/${params.slug}`,
      siteName: 'Tech Blog',
      locale: 'ja_JP',
      type: 'article',
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt,
      authors: [post.author],
      tags: post.tags,
      images: [
        {
          url: post.coverImage,
          width: 1200,
          height: 630,
          alt: post.title,
        },
      ],
    },

    // Twitter Card の設定
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.description,
      site: '@tech_blog_jp',
      creator: '@yamada_taro',
      images: [post.coverImage],
    },
  };
}

この実装により、各記事ページで適切なメタデータが自動生成され、SEO と SNS シェアの両方に対応できます。

メタデータのテスト方法

設定したメタデータが正しく機能しているか確認するためのツールを紹介します。

Open Graph のテスト

Facebook が提供するシェアリングデバッガーを使用します。

Twitter Card のテスト

Twitter の Card Validator を使用します。

構造化データとメタタグの確認

Google の Rich Results Test を使用します。

これらのツールを使って、実際にどのように表示されるか確認しながら調整していくことをお勧めします。

まとめ

本記事では、Next.js Metadata API の中でも特に重要な robots、alternates、openGraph、twitter の 4 つのメタデータについて、具体的な記入例を逆引き形式でご紹介しました。

各メタデータの役割を再確認しておきましょう。

robots メタデータ

検索エンジンのクローラー動作を制御し、インデックスの可否や画像・スニペットの表示を細かく設定できます。会員限定ページやテストページを検索結果から除外する際に活用してください。

alternates メタデータ

正規 URL の指定や多言語対応、RSS フィードの設定など、ページの代替バージョンを検索エンジンに伝えます。重複コンテンツによる SEO ペナルティを防ぐために必須の設定です。

openGraph メタデータ

Facebook、LINE、Slack などの SNS でシェアされた際の表示内容を制御します。魅力的な画像と説明文を設定することで、シェアからの流入を大きく増やせます。

twitter メタデータ

X（旧 Twitter）でのシェア表示を最適化します。summary_large_image カードを使用すると、視覚的なインパクトが大きくなり、クリック率の向上が期待できます。

これらのメタデータを適切に設定することで、検索エンジンからの評価が向上し、SNS でのシェアが最適化され、結果としてサイトへのトラフィックが増加します。

本記事の早見表と具体例を参考に、ぜひご自身のプロジェクトに実装してみてください。型安全な TypeScript のコードをコピー&ペーストするだけで、すぐに使い始めることができます。

実装後は、必ず Facebook シェアリングデバッガーや Twitter Card Validator などのツールで表示確認を行い、意図した通りに表示されているかチェックすることをお勧めします。

関連リンク

Next.jsの記事Nextjs

もっと見る

記事Article

もっと見る

ブログBlog

もっと見る

書籍レビューReview

もっと見る