OGP テキストの最適化｜SNS シェア時の表示を改善する方法
OGP (Open Graph Protocol) は、Web ページが SNS でシェアされた際の表示内容を制御するための仕組みです。適切に設定されていないと、タイトルが途中で切れたり、意図しない説明文が表示されたりして、クリック率が大幅に低下します。この記事では、OGP テキストの最適化方法とプラットフォーム別の表示仕様を解説します。
プラットフォーム別の OGP 表示仕様
SNS ごとに OGP テキストの表示領域は異なります。各プラットフォームの仕様を把握し、重要な情報が確実に表示されるよう文字数を調整することが重要です。
| プラットフォーム | og:title 表示文字数 | og:description 表示文字数 | 画像推奨サイズ |
|---|---|---|---|
| X (Twitter) | 約 70 文字 | 約 120 文字 | 1200×628px |
| 約 60 文字 | 約 80 文字 | 1200×630px | |
| LINE | 約 50 文字 | 約 70 文字 | 1200×628px |
| はてなブックマーク | 約 80 文字 | 約 120 文字 | 1200×630px |
| Slack | 約 70 文字 | 約 150 文字 | 1200×630px |
最も制限が厳しい Facebook の og:title (約 60 文字) を基準にタイトルを設計すると、どのプラットフォームでも適切に表示されます。
og:title の最適化
og:title はシェア時に最も目立つ要素であり、クリック率を左右する最重要項目です。ページの title タグとは別に設定できるため、SNS 向けに最適化した表現を使うことが可能です。
効果的な og:title を書くためのポイントは以下の通りです。
- 40〜60 文字に収める: 全プラットフォームで途切れずに表示される
- サイト名を省略する: SNS では文脈が異なるため、記事の内容に文字数を割く
- 数字や具体性を含める: 「5 つの方法」「2025 年版」のような表現はクリック率を高める
- 疑問形や呼びかけを活用する: 「〇〇していませんか？」のような表現は目を引く
og:title と title タグを同一にする必要はありません。title タグは SEO を意識してキーワードを含め、og:title は SNS でのクリック率を意識して感情に訴える表現にするという使い分けが効果的です。
og:description の書き方
og:description はタイトルの下に表示される補足テキストです。タイトルだけでは伝えきれない情報を補い、クリックの後押しをする役割を担います。
og:description は 70〜120 文字が適切です。冒頭の 40 文字に最も重要な情報を配置し、途中で切れても意味が通じるようにします。meta description と同じ内容でも構いませんが、SNS のユーザー層を意識してカジュアルな表現にすることも有効です。
文字数カウントスで og:title と og:description の文字数を確認し、各プラットフォームの表示制限内に収まっているかチェックしましょう。
OGP 画像 (og:image) の設計
OGP 画像はシェア時の視覚的なインパクトを決定する要素です。テキストだけのシェアと比較して、画像付きのシェアはクリック率が 2〜3 倍になるというデータもあります。
OGP 画像に含めるテキストは 20〜40 文字が適切です。画像内のテキストは小さなスマートフォン画面でも読める大きさにする必要があるため、文字数を絞り込むことが重要です。記事のタイトルをそのまま画像に入れるのではなく、核心部分だけを抽出して配置します。
- 画像サイズ: 1200×630px (横長) を基本とする
- テキスト配置: 画像の中央〜上部に配置し、下部はプラットフォームの UI と重なる可能性がある
- フォントサイズ: 最低 40px 以上を確保する
- 背景色: テキストとのコントラストを十分に確保する
OGP デバッグと検証方法
OGP を設定したら、各プラットフォームのデバッグツールで表示を確認することが不可欠です。設定ミスに気づかないまま公開すると、シェアされるたびに意図しない表示が拡散されてしまいます。
主要なデバッグツールは以下の通りです。Facebook シェアデバッガー、X Card Validator、LINE の URL プレビュー機能を使って、実際の表示を事前に確認しましょう。キャッシュが残っている場合は、デバッグツールで再スクレイピングを実行することで最新の OGP 情報を反映できます。
OGP タグの設定漏れを防ぐために、文字数カウントスで og:title と og:description の文字数を事前にチェックし、各プラットフォームの表示制限を超えていないか確認する習慣をつけましょう。
💡 意外と知らないトリビア
Facebook は 2013 年に OGP の仕様を大幅に変更し、og:image の最小推奨サイズを 600×315px に引き上げたとされています。この変更により、多くのサイトで OGP 画像が正しく表示されなくなる事態が発生しました。現在でも古い仕様のまま放置されているサイトは少なくありません。
⚠️ よくある失敗パターン
- og:title と title タグを完全に同一にしてしまい、SNS 向けの訴求力を活かせていない。SEO 用の title タグにはキーワードを含め、og:title はクリック率を意識した感情に訴える表現にするのが効果的です。
- og:image を設定せずにシェアされ、プラットフォームが自動選択した無関係な画像が表示されてしまう。特にロゴ画像やアイコンが選ばれるケースが多く、クリック率が大幅に低下します。
🎯 プロのテクニック
- og:title の冒頭 20 文字に最も重要なメッセージを配置する。SNS のタイムラインではスクロール速度が速いため、冒頭で目を引く表現が不可欠です。
- OGP 画像にテキストを入れる場合、画像面積の 20% 以内に収める。Facebook の旧広告ポリシーではテキスト面積 20% 超の画像はリーチが制限されていたとされ、この基準は OGP 画像でも参考になります。
まとめ
OGP テキストの最適化は、SNS からの流入を増やすための基本施策です。og:title は 40〜60 文字、og:description は 70〜120 文字を目安に、各プラットフォームの表示仕様に合わせて調整しましょう。設定後は必ずデバッグツールで表示を確認し、意図通りに表示されることを検証してください。