先生と生徒の会話形式で理解しよう

生徒

「先生、Next.jsでWebページのタイトルや説明を設定するにはどうすればいいですか？」

先生

「それはMetadataを使います。Metadataはページごとのタイトルや説明、検索エンジン向けの情報をまとめて設定できる仕組みです。」

生徒

「Metadataって難しそうですね。初心者でも簡単に使えますか？」

先生

「大丈夫です。Next.jsでは簡単に設定できます。順番に例を見ながら理解していきましょう。」

1. Next.jsのMetadataとは何か？

Metadataとは、Webページのタイトル、説明文（description）、キーワード、SNS共有用の情報など、ページの情報をまとめて指定できる機能です。検索エンジンやSNSがこの情報を参照して、ページを理解しやすくなります。Next.jsでは、この設定を簡単にページごとに行うことができます。

2. Next.jsでの基本的なMetadata設定方法

Next.jsでは、ページコンポーネントでmetadataを設定できます。基本の書き方は下記の通りです。


export const metadata = {
  title: "My Next.js Page",
  description: "これはNext.jsのMetadata設定のサンプルページです",
};

export default function HomePage() {
  return (
    <div>
      <h1>Next.js Metadataの設定例</h1>
    </div>
  );
}

（この設定により、ブラウザのタブに「My Next.js Page」と表示され、検索結果に説明文が表示されるようになります）

3. Metadataで設定できる項目一覧

Next.jsのMetadataで設定できる代表的な項目は次の通りです。

title：ページのタイトル
description：検索結果やSNSで表示される説明文
keywords：検索エンジン向けのキーワード
authors：ページの作成者情報
robots：検索エンジンのクロール制御
openGraph：SNSでシェアしたときの表示情報
twitter：Twitter用のメタ情報

4. タイトルと説明文を個別ページで設定する例

ページごとにタイトルや説明を変えたい場合は、以下のように書きます。


export const metadata = {
  title: "Aboutページ | My Next.jsサイト",
  description: "Aboutページの説明です。Next.jsで簡単に設定できます",
};

export default function AboutPage() {
  return (
    <div>
      <h1>Aboutページ</h1>
      <p>Next.jsのMetadataを使ったページ例です</p>
    </div>
  );
}

（ブラウザのタブに「Aboutページ | My Next.jsサイト」と表示され、検索結果に説明文が反映されます）

5. Open GraphでSNS表示をカスタマイズする

Open Graphは、FacebookやLINE、LinkedInなどでシェアしたときに表示されるタイトルや画像を設定する機能です。


export const metadata = {
  title: "Next.js Open Graphサンプル",
  description: "SNSで見栄えの良い情報を設定する例です",
  openGraph: {
    title: "Next.js Open Graphサンプル",
    description: "SNSで見栄えを良くする説明文です",
    url: "https://example.com/page",
    siteName: "My Next.jsサイト",
    images: [
      {
        url: "https://example.com/og-image.png",
        width: 800,
        height: 600,
      },
    ],
    locale: "ja_JP",
    type: "website",
  },
};

export default function OGPage() {
  return (
    <div>
      <h1>Open Graph Metadata設定例</h1>
    </div>
  );
}

（この設定により、SNSでシェアしたときに画像やタイトル、説明がきれいに表示されます）

6. Twitterカードの設定方法

Twitter用のメタ情報を設定すると、ツイートでの見栄えが良くなります。


export const metadata = {
  title: "Next.js Twitterカード例",
  description: "Twitterで見栄え良く表示する設定のサンプル",
  twitter: {
    card: "summary_large_image",
    title: "Next.js Twitterカード例",
    description: "説明文をここに入れます",
    creator: "@username",
    images: ["https://example.com/twitter-image.png"],
  },
};

export default function TwitterPage() {
  return (
    <div>
      <h1>Twitterカード設定例</h1>
    </div>
  );
}

（この設定で、Twitterにシェアしたときに大きな画像付きでタイトルと説明が表示されます）

7. Metadataの動的設定方法

場合によってはページの内容に応じてタイトルや説明を変えたいことがあります。その場合は関数を使って動的に設定できます。


interface PageProps {
  title: string;
  description: string;
}

export default function DynamicPage({ title, description }: PageProps) {
  return (
    <>
      <head>
        <title>{title}</title>
        <meta name="description" content={description} />
      </head>
      <div>
        <h1>{title}</h1>
        <p>{description}</p>
      </div>
    </>
  );
}

（プロパティを使って、ページごとに異なるタイトルや説明を表示することができます）

8. Metadata設定時の注意点

Metadataを設定する際のポイントは以下の通りです。

必ずページごとにユニークなタイトルを設定する
descriptionは120～160文字程度にまとめると検索結果で見やすい
画像URLは絶対パスで指定する
robotsは必要に応じてindexやnofollowを設定する

まとめ

本記事では、Next.jsでのMetadata設定について詳しく解説しました。Metadataは、Webページのタイトル、説明文、キーワード、SNS共有用情報などを包括的に管理できる機能であり、検索エンジン最適化やSNSでの見栄え向上に欠かせない重要な役割を果たします。Next.jsではページごとに簡単にMetadataを設定でき、metadataオブジェクトを使った静的設定、または動的にページ内容に応じてタイトルや説明を変える方法も用意されています。

具体的には、基本的なタイトルと説明の設定方法から、Open Graphを活用したSNS表示のカスタマイズ、Twitterカード設定によるツイート時の見栄え改善、さらに動的にプロパティを渡してページごとに異なるMetadataを設定する方法までを紹介しました。これにより、検索結果でのクリック率向上やSNSでのシェア拡散を狙いやすくなります。さらに、Metadata設定時の注意点として、タイトルのユニーク化、descriptionの文字数制限、画像URLの絶対パス指定、robotsの適切な設定なども押さえておく必要があります。

また、Next.jsでは、export const metadataを使うだけで簡単にページごとにSEO情報を整理できるため、初心者でも比較的容易に検索エンジン最適化を意識したページ作りが可能です。Open GraphやTwitterカードの設定を組み合わせることで、SNSでの表示も統一感があり、魅力的なページに仕上げることができます。動的設定を取り入れれば、ブログやECサイトなど、コンテンツが頻繁に変わるページでも柔軟に対応できます。

下記は、動的にページタイトルと説明を設定する例です。Propsを使ってタイトルや説明を変更でき、汎用性の高いページコンポーネントを作ることができます。


interface PageProps {
  title: string;
  description: string;
}

export default function DynamicPage({ title, description }: PageProps) {
  return (
    <>
      <head>
        <title>{title}</title>
        <meta name="description" content={description} />
      </head>
      <div>
        <h1>{title}</h1>
        <p>{description}</p>
      </div>
    </>
  );
}

（Propsで渡したタイトルと説明が画面に反映され、ページごとに異なるSEO情報を簡単に設定できます）

先生と生徒の振り返り会話

生徒

「先生、Metadataってタイトルや説明だけじゃなくて、SNS表示まで変えられるんですね？」

先生

「そうです。Open GraphやTwitterカードを使えば、シェアされたときの見栄えを制御できます。これにより、ユーザーがリンクをクリックしたくなるような魅力的な表示が可能になります」

生徒

「なるほど。検索結果に表示されるdescriptionも文字数を意識するんですね」

先生

「はい、一般的には120～160文字にまとめると見やすく、クリック率も上がります。また、ページごとにユニークなタイトルを設定することで、検索エンジンがページ内容を正しく認識しやすくなります」

生徒

「動的に設定できると、ブログ記事や商品ページでも便利そうです」