TwitterやFacebookでURLをシェアしたとき、タイトルや画像が意図せず崩れて表示された経験はないでしょうか。これはOGP(Open Graph Protocol)というタグの設定が不十分なことが原因です。この記事では、OGPの仕組みから具体的な設定方法、設定後の確認ツールまでを順を追って解説します。
OGPとは何か
OGP(Open Graph Protocol)とは、WebページがSNS上でシェアされたときに、タイトル・説明文・画像などをどう表示するかを指定するための仕組みです。もともとFacebookが提唱した規格ですが、現在はX(旧Twitter)やLINE、Slackなど多くのサービスがこの規格を参照して表示を生成しています。
OGPを設定していないページでも、SNS側が本文やタイトルタグから自動で表示内容を推測してくれる場合があります。しかし推測に頼ると、意図しない画像や本文の一部が切り取られて表示されることがあり、クリック率やブランドイメージに影響します。
- og:title:シェア時に表示されるタイトル
- og:description:シェア時に表示される説明文
- og:image:シェア時に表示される画像のURL
- og:url:正規のページURL(重複ページ対策にもなる)
- og:type:ページの種類(記事なら article、通常ページなら website など)
なぜOGP設定が重要なのか
OGPは検索順位に直接影響する要素ではありませんが、SNS経由の流入数やクリック率に大きく関わります。特にLPやブログ記事は、SNSでのシェアが初期の流入源になることが多いため、見え方が整っているかどうかは軽視できません。
| 状態 | SNSでの見え方 | 起こりやすい問題 |
|---|---|---|
| OGP未設定 | SNS側が自動推測 | 無関係な画像や不自然な文章が表示される |
| OGP設定済み(画像なし) | タイトルと説明文のみ | 視覚的な訴求力が弱くクリックされにくい |
| OGP設定済み(画像あり) | 意図した画像・文言で表示 | ブランドイメージを保ちやすい |
基本的なOGPタグの書き方
OGPタグはHTMLの<head>内に記述します。CMSを利用している場合はプラグインや管理画面の項目から設定できることが多いですが、静的なHTMLサイトの場合は直接コードを追加します。
| タグ | 役割 | 記述例 |
|---|---|---|
| og:title | シェア時のタイトル | <meta property="og:title" content="ページタイトル"> |
| og:description | シェア時の説明文 | <meta property="og:description" content="120字程度の要約"> |
| og:image | シェア時の画像URL | <meta property="og:image" content="https://example.com/ogp.png"> |
| og:url | 正規のページURL | <meta property="og:url" content="https://example.com/page"> |
| og:type | ページ種別 | <meta property="og:type" content="website"> |
OGP画像の設定ポイント
OGP画像はシェア時の見た目を大きく左右する要素です。サイズや内容によっては表示が崩れたり、意図した部分がトリミングされたりするため、以下の点に注意して作成します。
- 推奨サイズは1200×630px前後(横長のアスペクト比)
- ファイル形式はJPGまたはPNGが安定して表示されやすい
- ファイルサイズは数百KB程度に抑え、読み込み速度に配慮する
- 画像の四隅は表示先によってトリミングされる場合があるため、重要な文字や要素は中央付近に配置する
- テキストを大きく入れすぎると小さいサムネイル表示で読みにくくなるため簡潔にする
設定後に使える確認ツール
OGPタグを記述しただけでは正しく表示されているか分かりません。公開前後で必ず確認ツールを使い、実際のプレビューをチェックしましょう。SNS側にはキャッシュが残ることがあるため、修正後は再取得(リフレッシュ)の操作も忘れずに行います。
- Facebookシェアデバッガー:og:タグの内容とプレビューを確認でき、キャッシュの再取得もできる
- Xのカード検証(Card Validator相当の確認手段):タイムライン上の見え方を事前確認できる
- LINEのシェアプレビュー確認:実際にLINEでURLを送信して見た目を確認する方法が簡便
- ブラウザの検証ツール(開発者ツール):head内のmetaタグが正しく出力されているかHTMLレベルで確認できる
OGP設定チェックリスト
最後に、OGP設定を見直す際にそのまま使えるチェックリストをまとめます。公開前・公開後の両方で確認する習慣をつけると、シェア時の表示崩れを防ぎやすくなります。
- og:title・og:description・og:image・og:urlの4項目が設定されている
- og:imageのURLが絶対パス(https://から始まる形式)になっている
- OGP画像のサイズが1200×630px前後で作成されている
- 画像内の重要な文字・要素が中央付近に配置されている
- 確認ツール(シェアデバッガーなど)でプレビューを実際に確認した
- 内容を修正した際はキャッシュの再取得を行った