OGP: Open Graph Protocol
OGP（Open Graph Protocol）とは
Definition
OGP（Open Graph Protocol）とは、FacebookやTwitterなどのSNSでウェブページがシェアされたときに、タイトル・説明・サムネイル画像を正しく表示させるためのメタタグの規格です。
OGPを正しく設定することで、SNSシェア時に美しいカード形式で表示され、クリック率・拡散率が向上します。また、og:imageで設定した画像（1200×630px推奨）がSNSのサムネイルとして表示されます。
Key Points
知っておくべきポイント
必須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画像より動的生成の方が各ページへのクリック率向上が期待できます。
よくある質問
SNSでシェアされたとき、タイトル・画像が正しく表示されず地味なリンクになります。OGP未設定はクリック率を大幅に下げる要因になります。
1200×630pxが最もよく使われる推奨サイズです。FacebookはOGP画像を自動クロップするため中央に重要な情報を配置してください。Twitterカードではsummary_large_imageで大きく表示されます。
OGP自体はGoogleのランキング要因ではありませんが、SNSでシェアされやすくなることで被リンク獲得・流入増加につながり、間接的にSEOに好影響を与えます。ソーシャルシグナルとしての間接効果があります。
FacebookのOGPデバッガー（developers.facebook.com/tools/debug）やCardValidatorでURLを入力して確認できます。Next.jsではmetadataのopenGraph設定で自動生成されます。
ページごとに最適化したOGP画像を設定することで、SNSシェア時のクリック率が高まります。少なくともトップページ・主要サービスページ・ブログ記事ページには個別のOGP画像を設定することを推奨します。
背景色を鮮明にしてタイトル文字を大きく配置したシンプルなデザインが最も目立ちます。ロゴ・ブランドカラーを統一し、テキストは短くインパクトがあるものにしてください。画像の中央に重要情報を置き、端に重要な情報を置かないことも大切です。
Next.jsのApp Routerではlayoutやページファイルでexport const metadataのopenGraphプロパティを設定するだけで対応できます。next/og（ImageResponse）を使うとコードでOGP画像を動的に生成することも可能です。
はい、両方のメタタグを同時に設定することができます。og:〜タグ（Facebook）とtwitter:〜タグを並べて記述することで、FacebookとTwitter（X）それぞれに最適化されたカード表示が可能になります。
この用語を活用してみませんか
実際の集客施策への活用方法はお気軽にご相談ください。