OGP（Open Graph Protocol）は、WebページがSNSでシェアされた際に、タイトル・説明文・画像などの情報を正しく表示するための仕組みです。適切に設定することで、SNSからの流入を大幅に増やすことができます。本記事では、各SNSに対応したOGP設定の方法を詳しく解説します。
OGPの基本タグ4つを理解する
OGPの設定には、HTMLの<head>タグ内にmetaタグを記述します。以下の4つが必須の基本タグです。
- og:title：SNSでシェアされた際に表示されるタイトルです。ページのtitleタグとは別に設定できます
- og:description：コンテンツの概要説明です。120文字以内に収めるのが理想的です
- og:image：シェア時に表示されるサムネイル画像のURLを指定します
- og:url：ページの正規URLを指定します。canonical URLと一致させてください
og:imageの推奨サイズと注意点
アスペクト比1.91:1が各SNSで最も綺麗に表示されます。ファイルサイズは5MB以下を推奨します。
og:imageには絶対URLを指定する必要があります。相対パスでは正しく認識されないため、「https://」から始まる完全なURLを記述してください。また、画像はJPEGまたはPNG形式が推奨されます。
各SNS別の設定ポイント
Twitter/X の設定
Twitter/Xでは、OGPタグに加えて独自のTwitter Cardタグを使用します。twitter:cardで表示形式を指定でき、「summary_large_image」を設定すると大きな画像付きのカードが表示されます。twitter:titleやtwitter:descriptionが未設定の場合は、OGPの値が自動的に使用されます。
Facebook の設定
Facebookは標準的なOGPタグをそのまま読み取ります。fb:app_idを追加設定すると、Facebook Insightsでシェアのアナリティクスを確認できるようになります。画像は最低600×315ピクセル以上が必要です。
LINE の設定
LINEもOGPタグを参照しますが、画像サイズが小さいとサムネイルが正方形にトリミングされることがあります。1200×630ピクセルの画像であれば、問題なく横長表示されます。
OGP設定のデバッグ方法
OGPを設定した後は、必ず各SNSのデバッグツールで表示を確認しましょう。Facebookの「共有デバッガー」では、OGPタグの読み取り結果とプレビューを確認できます。キャッシュが残っている場合は「もう一度スクレイピング」ボタンで最新情報に更新できます。
・og:imageに相対パスを指定している
・og:urlがcanonical URLと異なっている
・画像サイズが小さすぎて正しく表示されない
・HTMLのhead内ではなくbody内にタグを記述している