OGP（Open Graph Protocol）とは

必須OGPタグ

og:title（タイトル）・og:description（説明）・og:image（画像URL）・og:url（ページURL）・og:type（websiteまたはarticle）が基本的なOGPタグです。

Twitter/X用メタタグ

TwitterはOGPとは別に、twitter:card・twitter:titleなどの専用メタタグが必要です。twitter:cardは「summary_large_image」が大きなサムネイルを表示させる設定です。

OGP画像のデザインのベストプラクティス

OGP画像（1200×630px）はブランドカラーを背景にタイトルや価値訴求を大きなテキストで配置するシンプルなデザインが効果的です。テキストは端から100px以上の余白をとり中央に配置することで、SNSでのトリミングによる切れを防げます。ロゴを右下に配置するとブランド認知にも貢献します。

OGPとSNS拡散・被リンク獲得の関係

OGPが正しく設定されSNSシェア時に美しいカードが表示されると、クリック率と拡散率が向上します。SNSでバイラルしたコンテンツは外部サイトからの被リンク獲得につながりSEO評価にも好影響を与えます。OGP最適化はSNSマーケティングとSEOを同時に強化する施策です。

Next.jsでのOGP動的生成

Next.jsのApp RouterではImageResponseを使うことで、ページのタイトルや内容に合わせたOGP画像を動的に生成できます。ブログ記事・サービスページごとに異なるOGP画像を自動生成することで、全ページのSNS拡散効果を高められます。静的なOGP画像より動的生成の方が各ページへのクリック率向上が期待できます。