早押しボタンweb

Next.jsでのOGP設定について

OGP（Open Graph Protocol）は、WebページがSNSでシェアされた際に、リンクカード（プレビュー）として表示される情報を定義するための仕組みです。Next.jsでは、静的・動的どちらのOGP設定にも対応しており、特にSNSでの見栄えを整えたいときに重要です。

OGPの基本

OGPでは、HTMLのメタタグを使って、ページのタイトルや説明、画像などを定義します。代表的なOGPメタタグは以下の通りです：

これらを正しく設定することで、TwitterやLINE、Facebookなどでリンクを共有した際に適切なプレビューが表示されるようになります。

静的なOGP設定

静的なページでは、export const metadataを使ってOGPメタタグを定義します。

1import { Metadata } from 'next';
2
3  export const metadata: Metadata = {
4    title: 'ページタイトル',
5    description: 'このページの説明文です。',
6    openGraph: {
7      title: 'OGP用タイトル',
8      description: 'OGP用の説明文です。',
9      url: 'https://example.com/page', // ← 必ず絶対URLにすること！
10      type: 'website',
11      images: [
12        {
13          url: 'https://example.com/ogp.jpg', // ← 相対パス不可！必ず絶対URLにする
14          width: 1200,
15          height: 630,
16          alt: 'OGP画像の代替テキスト',
17        },
18      ],
19    },
20  };
21

注意：画像URL（og:image）やページURL（og:url）は相対パスではなく絶対パスで指定する必要があります。相対パスを使うとOGPが正しく表示されない場合があります。

動的なOGP設定

ブログ記事や商品ページなど、ページによって内容が変わる場合には、generateMetadataを使って動的にOGPを設定します。

1import { Metadata } from 'next';
2
3  type Props = {
4    params: { slug: string };
5  };
6
7  export async function generateMetadata({ params }: Props): Promise<Metadata> {
8    const post = await fetchPost(params.slug); // 仮のデータ取得処理
9    const siteUrl = 'https://example.com';
10
11    return {
12      title: post.title,
13      description: post.description,
14      openGraph: {
15        title: post.title,
16        description: post.description,
17        url: `${siteUrl}/blog/${params.slug}`, // ← 絶対パスで！
18        type: 'article',
19        images: [
20          {
21            url: `${siteUrl}/ogp/${params.slug}.jpg`, // ← 必ず絶対パスにする
22            width: 1200,
23            height: 630,
24            alt: post.title,
25          },
26        ],
27      },
28    };
29  }
30

このように、ページの内容に応じたOGP情報を動的に返すことが可能です。ここでも、画像URLやページURLは必ず絶対パスで記述してください。

OGP画像の仕様

OGP用の画像には以下のような推奨仕様があります：

Vercelなどのホスティングを使っている場合は、/public フォルダ内に画像を配置すれば、https://example.com/ogp.jpg のようなURLでアクセスできます。

まとめ

Next.jsでは、metadataとgenerateMetadataを活用することで、静的・動的にOGP設定を行えます。OGP画像やURLは必ず絶対パスで記述することが重要です。適切なOGP設定は、SNSでの見栄えを向上させ、クリック率にも大きく影響します。

記事一覧へ戻る