OGPタグの設定方法とSNSシェア最適化の完全ガイド
OGPタグの基本から実装方法、SNSプレビューの最適化まで詳しく解説。X・Facebook・LINEで美しくシェアされるWebページを作りましょう。
Webページを誰かにシェアしたとき、URL・タイトル・説明文・画像が美しくカード表示されるサイトと、素っけないURLだけが表示されるサイトがあります。この違いを生んでいるのがOGP（Open Graph Protocol）タグです。本記事では、OGPタグの仕組みから実装方法、各SNSの最適化まで詳しく解説します。
OGPとは何か
OGP（Open Graph Protocol）は、FacebookがWebページのメタ情報を構造化するために2010年に策定したプロトコルです。現在はX（旧Twitter）・LINE・Slack・Discordなど多くのプラットフォームがOGP情報を読み取り、リンクプレビュー（リッチカード）表示に活用しています。
OGPが設定されていないとどうなるか
OGP未設定のページがシェアされると、URLのみが表示されるか、HTMLのtitleタグやdescriptionから情報が自動取得されます。ビジュアルが弱く、クリック率が大幅に低下します。
OGP画像シミュレーターURLや画像からSNS（X, Facebook, LINE）シェア時の表示をプレビュー基本OGPタグの実装
HTMLの<head>内に以下のmetaタグを記述します。
必須の4タグ
og:title（タイトル）、og:type（コンテンツの種類）、og:url（正規URL）、og:image（サムネイル画像URL）の4つが基本です。
og:title：SNSカードに表示されるタイトル。70文字以内が推奨。og:type：通常のWebページはwebsite、ブログ記事はarticleを使います。og:url：ページの正規URLを指定。og:image：サムネイル画像のURL（絶対パスで指定）。
推奨タグ
og:description：説明文。120〜200文字が適切。og:site_name：サイト名。og:locale：言語設定（日本語はja_JP）。
Xカード（Twitter Card）の設定
XはOGPに加えて独自の「Twitter Card」タグも読み取ります。
主要なTwitter Cardタグ
twitter:card：カードの種類。summary（小画像）かsummary_large_image（大画像）を指定します。視認性の観点からsummary_large_imageが推奨。twitter:title：Xカード用タイトル（og:titleと同一でも可）。twitter:description：説明文。twitter:image：画像URL。
Twitter CardタグがなければOGPタグにフォールバックするため、最低限OGPを設定していれば問題ありません。
OGP画像シミュレーターURLや画像からSNS（X, Facebook, LINE）シェア時の表示をプレビューOGP画像の最適サイズ
各プラットフォームの推奨サイズ
- Facebook・OGP標準：1200 × 630px（アスペクト比 1.91:1）
- X（summary_large_image）：1200 × 628px
- LINE：1200 × 628px
- Slack・Discord：1200 × 630px
画像は1200 × 630pxを基準に作成すれば、ほぼすべてのプラットフォームで適切に表示されます。容量はWebP/JPEGで1MB以下が推奨です。
画像作成の注意点
- テキストは画像面積の20%以下に抑える
- 重要なコンテンツは画像中央寄りに配置（端はトリミングされる可能性あり）
- ブランドカラーを一貫して使用する
キャッシュクリアの方法
OGPタグを更新しても、SNS側にキャッシュされた古い情報が表示され続けることがあります。
各プラットフォームのキャッシュクリア方法
- Facebook：「シェアデバッガー」（developers.facebook.com/tools/debug）にURLを入力して「デバッグ」→「もう一度スクレイピング」。
- X：Card Validator（developer.twitter.com/en/docs/twitter-for-websites/cards/guides/troubleshooting-cards）を使用。
- LINE：「LINE OGP キャッシュ削除」ツール（poker.line.naver.jp）を利用。
よくある質問
Q: OGPタグはSEOに影響しますか？ A: 直接的なSEO効果はありませんが、SNSシェア時のクリック率が向上することで間接的にトラフィックが増加します。また、構造化データとの相乗効果も期待できます。
Q: og:imageに相対パスを使えますか？
A: 使えません。https://example.com/images/og.png のような絶対URLで指定する必要があります。
Q: Next.jsでOGPを設定する方法は？
A: Next.jsのApp RouterではMetadata APIを使います。generateMetadata 関数の openGraph フィールドに必要な情報を設定するだけで、自動的にmetaタグが生成されます。
まとめ
OGPタグの設定はWebサイトの「SNSでの見た目」を大きく左右します。基本4タグ＋Twitterカードタグを正しく実装し、1200 × 630pxの画像を用意するだけで、シェアされるたびにブランドの印象が高まります。OGPプレビューツールで実装後の見え方を必ず確認しましょう。
