アプリやサービスをSNSでシェアしてもらったとき、リンクにタイトルや画像が表示されずテキストだけになってしまった経験はないでしょうか。これはOGP(Open Graph Protocol)が正しく設定されていないことが原因です。この記事では、Next.jsのApp RouterでOGPを設定する方法を、基本のMetadata APIから動的な画像生成、公開前の確認方法まで順を追って解説します。
ローンチガード編集部
個人開発アプリの法令表記・UXを自動監査するツール「ローンチガード」を運営しています。本記事は一般的な情報提供であり、法的助言ではありません。個別の判断が必要な場合は専門家にご相談ください。
この記事でわかること
Next.js OGPの基本と設定が必要な理由
OGPとは、SlackやX(旧Twitter)、LINEなどにURLを貼ったときに、タイトルや説明文、画像をカード形式で表示するための仕組みです。Next.jsではApp RouterのMetadata APIを使うことで、HTMLの<head>タグを直接書かずにOGPを設定できます。
OGPが未設定の場合に起きる表示崩れ
OGPタグが無い、または不完全なページは、SNS上でリンクだけのそっけない表示になります。クリック率はカード表示の有無で大きく変わるため、個人開発のサービスほど機会損失が大きくなりがちです。
Next.jsのMetadata APIでできること
Metadata APIでは、静的なmetadataオブジェクトのエクスポートと、動的なgenerateMetadata関数の2種類の方法で設定できます。ページの内容が固定かどうかで使い分けます。
💬 編集部コメント
多数の個人開発サイトを自動監査してきた中で、OGP自体は設定していてもog:imageのURLが相対パスのままでSNS側で読み込めていないケースを頻繁に見かけます。絶対URLになっているかどうかは公開前に必ず確認すべきポイントです。
レイアウトファイルでの基本設定
サイト全体で共通するOGPは、ルートのapp/layout.tsxにmetadataオブジェクトをエクスポートすることで設定します。個別ページで上書きしない限り、この内容がすべてのページに適用されます。
layout.tsxでの共通metadata定義
基本的なmetadataは以下のように記述します。openGraphプロパティにタイトルや説明、画像、サイト名を指定するのが基本形です。
titleページやサイトのタイトルdescription検索結果やカードに表示される説明文openGraph.imagesSNSカードに表示される画像metadataBase相対パスを絶対URLに変換するための基準URL
title.templateとdefaultの使い分け
サイト名を各ページタイトルの末尾に自動で付けたい場合は、title.templateに%s | サイト名のような形式を指定します。個別ページ側はtitleに本文の見出しだけを渡せば、共通フォーマットが自動的に適用されます。
🛡️ OGP以外の公開前チェックも忘れずに
OGPを整えても、プライバシーポリシーやセキュリティヘッダーなど公開前に見落としやすい項目は他にもあります。ローンチガードならURLを入れるだけで26項目を自動チェックできます。
無料で診断してみる →ページごとに動的なOGPを設定する方法
ブログ記事や商品ページのように、URLごとに内容が変わるページでは、静的なmetadataではなくgenerateMetadata関数を使います。データベースやAPIから取得した値をタイトルや画像に反映できます。
generateMetadata関数の実装
各ページのpage.tsxでgenerateMetadataという名前の非同期関数をエクスポートすると、Next.jsがビルド時またはリクエスト時にそれを呼び出してmetadataを生成します。関数の引数からルートパラメータを受け取れます。
動的ルートでのパラメータ活用
[slug]のような動的ルートでは、paramsから取得したスラッグをもとにデータを取得し、そのタイトルや説明をそのままopenGraphに渡すのが一般的な実装です。取得に失敗した場合のフォールバック値も用意しておくと安全です。
💬 編集部コメント
generateMetadataはデータ取得を伴うため、page.tsx本体と同じfetch処理を重複して書いてしまいがちです。Next.jsのリクエストメモ化を利用すれば、同一リクエスト内での重複フェッチは自動的にまとめられます。
og画像を設定する2つの方法
OGP画像の設定方法には、あらかじめ用意した画像ファイルを指定する静的な方法と、ページ内容に応じて画像を都度生成する動的な方法があります。サイトの規模や更新頻度に応じて選びます。
静的画像を指定する方法
あらかじめ用意した画像をpublicフォルダなどに置き、metadata.openGraph.imagesに絶対URLで指定します。全ページで同じ画像を使う場合や、トップページのように内容が固定のページに向いています。
opengraph-image.tsxで動的生成する方法
App Routerでは、opengraph-image.tsxというファイルを配置することで、ページのタイトルなどを反映したOGP画像をリクエストのたびに生成できます。内部的にはJSXをSVG経由で画像に変換する仕組みが使われており、外部の画像生成サービスを使わずに完結します。
| 方法 | 向いているケース | 運用の手間 |
|---|---|---|
| 静的画像 | トップページなど内容が固定のページ | 画像制作は必要だが実装は簡単 |
| opengraph-image.tsx | ブログ記事や商品ページなど内容が可変のページ | 画像制作は不要だが実装コストがかかる |
Twitterカード(X)も同時に設定する
og系のタグだけではXのカード表示が最適化されないことがあります。metadata.twitterを別途指定することで、X上での表示も安定させられます。
summary_large_imageの指定
画像を大きく表示したい場合はtwitter.cardにsummary_large_imageを指定します。titleとdescriptionはopenGraphと同じ値を使い回して問題ありません。表示の一貫性を保つ意味でも、あえて別の文言にしない方が無難です。
twitter.cardカードの表示形式twitter.titleカードに表示するタイトルtwitter.imagesカードに表示する画像
🛡️ 公開前のドックで法令表記もまとめて確認
OGPやセキュリティヘッダーの設定漏れは、プライバシーポリシーや特定商取引法の表記漏れと同様に見落としやすい項目です。ローンチガードはこうした項目をまとめて自動チェックします。
無料で診断してみる →公開前にOGPを確認する方法
OGPはコードを書いただけでは正しく表示されているか分かりません。各SNSが提供する確認ツールや、ブラウザの開発者ツールを使って、実際にどう表示されるかを公開前に確認します。
各種OGP確認ツールの使い方
Facebookのシェアデバッガーや、Xのカード検証ツールにURLを入力すると、実際のクロール結果をもとにカード表示をプレビューできます。デプロイのたびにキャッシュが残っていることがあるため、再クロールを促す操作を忘れずに行います。
- Facebookシェアデバッガーでキャッシュを再取得する
- ブラウザの開発者ツールでmetaタグの出力内容を直接確認する
- og:imageのURLに直接アクセスして画像が表示されるか確認する
よくあるつまずきポイント
og:imageが相対パスのまま公開されている、metadataBaseの設定漏れで意図しないドメインが使われる、画像のアスペクト比が推奨サイズと合わずカードの一部が切れる、といったトラブルが多く見られます。
💬 編集部コメント
個人開発のサイトを見ていると、開発環境のURLがmetadataBaseに残ったまま本番デプロイされているケースが少なくありません。環境変数からURLを切り替える仕組みにしておくと、この種のミスを防げます。
よくある質問
Next.jsのOGP設定でよく寄せられる質問をまとめました。実装時に迷いやすいポイントの参考にしてください。
og画像のサイズはどれくらいが最適ですか
一般的には1200×630px前後のアスペクト比が推奨されています。極端に縦長や横長の画像は、SNS側で自動トリミングされて意図した見た目にならないことがあります。
metadataBaseは必ず設定すべきですか
相対パスで画像を指定する場合は必須です。設定しないと開発環境ではlocalhostのURLがそのまま使われてしまい、本番で画像が表示されない原因になります。
| トラブル | 主な原因 | 対処 |
|---|---|---|
| 画像が表示されない | og:imageが相対パスのまま | metadataBaseを設定し絶対URLにする |
| 古いカードが表示され続ける | SNS側のクロールキャッシュ | 各種デバッガーで再クロールを実行する |
💬 編集部コメント
OGPの設定漏れそのものはSNS上の見た目の問題ですが、URLを公開直前に総点検する習慣がある開発者ほど、法令表記やセキュリティヘッダーの漏れも同時に減っている傾向があります。個別に見るより、まとめて確認する仕組みを持つことが結果的に近道です。
🛡️ リリース前にまとめて確認する
OGPを整えたら、次はプライバシーポリシーやHSTSなどのセキュリティヘッダーもあわせて確認しておくと安心です。ローンチガードならURLを入力するだけで26項目をまとめて診断できます。
無料で診断してみる →まとめ
Next.jsのOGP設定は、layout.tsxでの共通metadataから始め、ページごとの内容に応じてgenerateMetadataやopengraph-image.tsxを使い分けることで、無理なく整えられます。実装後は各種確認ツールで表示を必ずチェックし、SNS経由の流入を取りこぼさないようにしましょう。