← Blog

Open Graph Next.js のタグ: 2026 開発者ガイド

Next.js では、メタデータ API を使用して OG タグを簡単に作成できます。静的な OG イメージから動的な OG イメージまで、知っておくべきすべてがここにあります。

Next.js OG タグが正しいかどうかわかりません?

Proovd でOpen Graph タグを無料で確認します。URL を貼り付けて、X、LinkedIn、Slack、Discord、WhatsApp、Reddit でどのように表示されるかを正確に確認します。

簡単な回答

  • Next.js 13 歳以上は OG タグのメタデータ API を使用します
  • 静的ページ: メタデータ オブジェクトをエクスポート
  • 動的ページ: generateMetadata() を使用します
  • ダイナミック OG 画像: @vercel/og を使用します

Next.js App Router — 静的メタデータ

Next.js 13+ (App Router) では、OG タグを設定する最も簡単な方法は、レイアウトまたはページ ファイルで メタデータ をエクスポートすることです。

export const metadata = {
  title: 'My Next.js App',
  description: 'A Next.js app with OG tags',
  openGraph: {
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
    type: 'website',
  },
  twitter: {
    card: 'summary_large_image',
    title: 'My Next.js App',
    description: 'A Next.js app with OG tags',
    images: ['https://yoursite.com/og-image.jpg'],
  },
};

これにより、ページ に正しい タグが自動的に生成されます。残りは Next.js が処理します。

Next.js App Router — 動的メタデータ

動的ページ (ブログ投稿、製品ページ) の場合は、generateMetadata() を使用します。

import { notFound } from 'next/navigation';
import { getPost } from '@/lib/posts';

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  if (!post) notFound();

  return {
    title: post.title,
    description: post.excerpt,
    openGraph: {
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
      type: 'article',
      publishedTime: post.date,
      authors: [post.author],
    },
    twitter: {
      card: 'summary_large_image',
      title: post.title,
      description: post.excerpt,
      images: [post.coverImage],
    },
  };
}

@vercel/og を使用した動的 OG イメージ

カスタム OG 画像 (ブランド カラー、投稿タイトルなど) については、@vercel/og を使用してください。

// app/api/og/route.ts
import { ImageResponse } from '@vercel/og';

export function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const title = searchParams.get('title') || 'Default Title';

  return new ImageResponse(
    (
      

        

          {title}
        

      

    ),
    {
      width: 1200,
      height: 630,
    }
  );
}

次に、メタデータでこの API ルートを参照します。

export async function generateMetadata({ params }) {
  const post = await getPost(params.slug);
  return {
    openGraph: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
    twitter: {
      images: [`https://yoursite.com/api/og?title=${encodeURIComponent(post.title)}`],
    },
  };
}

Next.js ページルーター

古い Pages Router を使用している場合は、next/head または next-seo パッケージを使用します。

import Head from 'next/head';

export default function PostPage() {
  return (
    <Head>
      <meta property="og:title" content={post.title} />
      <meta property="og:description" content={post.excerpt} />
      <meta property="og:image" content={post.coverImage} />
      <meta name="twitter:card" content="summary_large_image" />
      <meta name="twitter:title" content={post.title} />
      <meta name="twitter:image" content={post.coverImage} />
    </Head>
  );
}

または、よりクリーンな API として next-seo を使用します。

import { NextSeo } from 'next-seo';

<NextSeo
  title={post.title}
  description={post.excerpt}
  openGraph={{
    title: post.title,
    description: post.excerpt,
    images: [{ url: post.coverImage }],
    type: 'article',
  }}
  twitter={{
    type: 'summary_large_image',
  }}
/>

クイックフィックスチェックリスト

  1. 静的ページにはメタデータ API を使用する
  2. 動的ページには generateMetadata() を使用します
  3. openGraph と twitter の両方のプロパティを設定します
  4. 動的な OG 画像には @vercel/og を使用してください
  5. Proovd でテストして、すべてのプラットフォームで検証します

よくある質問

Next.js は HTML 内の OG タグを自動的にレンダリングしますか?

はい。 Next.js は、サーバーでレンダリングされた HTML にメタデータを タグとして挿入するため、クローラーは JavaScript なしでメタデータを認識できます。

Vercel Edge Functions で動的 OG イメージを使用できますか?

はい。 @vercel/og は Vercel Edge 上で実行され、オンザフライで画像を生成します。画像 URL はメタデータ内で参照され、プラットフォームはページをクロールするときに画像 URL を取得します。

関連記事

すべてのプラットフォームでNext.js OG タグを確認します

Proovd でOpen Graph タグを無料で確認します。URL を貼り付けると、X、LinkedIn、Slack、Discord、WhatsApp、Reddit でプレビューが表示されます。