Next.js MetadataでOGP設定を完全解説！og:imageやog:titleを使ったSEO対策入門

1. Next.jsのMetadataとOGPとは？

1. Next.jsのMetadataとOGPとは？

Next.jsのMetadataとは、Webページの情報を検索エンジンやSNSに正しく伝えるための仕組みです。ページのタイトルや説明文、画像などを設定できます。

OGPとはオープングラフプロトコルの略で、SNSにURLを貼り付けたときに表示されるタイトルや画像を指定するためのルールです。たとえば、ニュース記事のリンクを共有すると画像付きで表示されますが、それがOGPです。

Next.jsでは、appディレクトリでMetadataを設定することで、SEO対策やOGP設定が簡単にできます。特にog:imageやog:titleはとても重要な項目です。

2. Next.jsで基本的なMetadataを設定する方法

2. Next.jsで基本的なMetadataを設定する方法

まずは一番基本となるMetadataの書き方を見てみましょう。Next.jsのappフォルダ内にあるlayout.jsまたはpage.jsでexport const metadataを使って設定します。

export const metadata = {
  title: "Next.jsでOGP設定を学ぼう",
  description: "Next.jsのMetadata機能を使ったOGP設定方法を初心者向けに解説します。"
};

export default function Page() {
  return <h1>Next.js Metadataの基本</h1>;
}

このコードでは、titleとdescriptionを設定しています。titleはブラウザのタブに表示される文字です。descriptionは検索結果に表示される説明文です。

3. og:titleやog:descriptionを設定する方法

3. og:titleやog:descriptionを設定する方法

次にOGPの設定を行います。Next.jsではopenGraphという項目を使います。ここにog:titleやog:descriptionの内容を書きます。

export const metadata = {
  title: "Next.js OGP完全ガイド",
  description: "Next.jsでOGP設定を行う方法を解説します。",
  openGraph: {
    title: "Next.js OGP完全ガイド",
    description: "SNSで正しく表示されるOGP設定の方法",
    url: "https://example.com",
    siteName: "Next.js学習ブログ",
    type: "website"
  }
};

export default function Page() {
  return <div>OGP設定ページ</div>;
}

openGraphの中に書いた情報が、SNSでリンクを共有したときに使われます。typeはページの種類を表します。websiteは一般的なWebページを意味します。

4. og:imageを設定してSNSに画像を表示する

4. og:imageを設定してSNSに画像を表示する

OGPで特に重要なのがog:imageです。画像を設定しておくと、SNSで大きく目立つ表示になります。

export const metadata = {
  title: "Next.jsでog:imageを設定する",
  openGraph: {
    title: "Next.jsでog:imageを設定する",
    images: [
      {
        url: "https://example.com/ogp-image.jpg",
        width: 1200,
        height: 630,
        alt: "Next.js OGPサンプル画像"
      }
    ]
  }
};

export default function Page() {
  return <div>og:image設定サンプル</div>;
}

画像サイズは横千二百縦六百三十が推奨されています。これは多くのSNSで最適な比率だからです。altは画像の説明文です。

5. ページごとにOGPを変更する方法

5. ページごとにOGPを変更する方法

Next.jsではページごとにMetadataを個別設定できます。ブログ記事ページなどで、それぞれ違うog:titleやog:imageを設定したい場合に便利です。

export const metadata = {
  title: "記事ページタイトル",
  openGraph: {
    title: "記事ページのOGPタイトル",
    description: "記事専用の説明文です。",
    images: [
      {
        url: "https://example.com/article-image.jpg"
      }
    ]
  }
};

export default function ArticlePage() {
  return <article>記事の内容</article>;
}

これにより、トップページと記事ページで別々のOGP設定が可能になります。検索エンジン対策やSNS拡散を意識する場合は必須の設定です。

6. Twitterカードも同時に設定する方法

6. Twitterカードも同時に設定する方法

OGPと合わせて設定したいのがTwitterカードです。Next.jsではtwitterという項目で設定できます。

export const metadata = {
  title: "Next.js Twitterカード設定",
  twitter: {
    card: "summary_large_image",
    title: "Next.js Twitterカード設定",
    description: "Next.jsでTwitterカードを設定する方法",
    images: ["https://example.com/twitter-image.jpg"]
  }
};

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

summary_large_imageを指定すると、大きな画像付きカードで表示されます。OGPと一緒に設定しておくことで、さまざまなSNSに対応できます。

7. 初心者が覚えておきたい重要ポイント

7. 初心者が覚えておきたい重要ポイント

Next.jsでMetadataやOGP設定を行うときは、正しいURLと画像パスを指定することが大切です。画像が存在しない場合は表示されません。

また、titleやdescriptionはページ内容に合った自然な文章にすることが重要です。検索エンジンはページの内容と一致しているかを確認します。

Next.jsのMetadata機能を活用すれば、HTMLのmetaタグを直接書かなくても自動的にhead内に反映されます。初心者でも安心してSEO対策やOGP設定が行えます。

まとめ

まとめ

今回はNext.js Metadataを活用したOGP設定の方法について、og:titleやog:description、og:imageの指定方法まで段階的に解説してきました。Next.jsのappディレクトリでexport const metadataを使うことで、titleやdescriptionといった基本的なメタデータを簡単に設定できることが分かりました。これにより、検索エンジンに対してページ内容を正確に伝えることができ、検索結果に表示されるタイトルや説明文を最適化できます。

また、openGraphプロパティを利用することで、SNS共有時の表示内容を細かくコントロールできる点も重要です。og:titleはSNS上で表示される見出し、og:descriptionは概要文、og:imageは視覚的に目立たせるための画像です。特にog:imageはクリック率や拡散率に大きく影響するため、横千二百縦六百三十の推奨サイズで適切な画像を用意することが大切です。

さらに、Next.jsではページごとにMetadataを分けて設定できるため、トップページ、ブログ記事ページ、サービス紹介ページなど、それぞれに最適化されたOGP設定が可能です。これにより、コンテンツごとの関連性が高まり、検索エンジンからの評価向上にもつながります。Next.js SEO対策としては、titleとdescriptionをページ内容に沿って具体的に記述し、openGraphやtwitter設定を組み合わせることが基本になります。

Twitterカードの設定も忘れてはいけません。twitterプロパティでsummary_large_imageを指定することで、大きな画像付きカードとして表示されます。OGP設定とTwitterカード設定を同時に行うことで、さまざまなSNSプラットフォームに対応したWebページを構築できます。Next.js MetadataはHTMLのheadタグを直接操作することなく、自動的にmetaタグを生成してくれるため、初心者でも扱いやすい設計になっています。

実際の開発では、下記のように基本設定とOGP設定をまとめて記述するケースが多いです。title、description、openGraph、twitterを一括管理することで、Next.js SEO対策とSNS最適化を同時に実現できます。

export const metadata = {
  title: "Next.js MetadataとOGP設定のまとめ",
  description: "Next.jsでog:titleやog:imageを設定する方法を総復習します。",
  openGraph: {
    title: "Next.js Metadata総まとめ",
    description: "SEOとSNS表示を最適化するOGP設定",
    url: "https://example.com/summary",
    siteName: "Next.js実践ガイド",
    images: [
      {
        url: "https://example.com/ogp-summary.jpg",
        width: 1200,
        height: 630,
        alt: "Next.js Metadataまとめ画像"
      }
    ],
    type: "website"
  },
  twitter: {
    card: "summary_large_image",
    title: "Next.js Metadata総まとめ",
    description: "Next.jsで学ぶOGPとSEOの基本",
    images: ["https://example.com/twitter-summary.jpg"]
  }
};

export default function SummaryPage() {
  return <div>Next.js MetadataとOGP設定の総まとめページ</div>;
}

このように設定することで、検索エンジンには適切なメタ情報が伝わり、SNSでは魅力的なカード形式で表示されます。Next.js Metadataは現代のWeb制作において欠かせない機能であり、SEO対策、OGP設定、Twitterカード設定を効率的に行うための強力な仕組みです。初心者の方でも基本構造を理解すれば、確実に実装できる内容です。ページごとの最適化を意識しながら、titleやdescriptionを丁寧に設計していきましょう。