OGP テキストの最適化｜SNS シェア時の表示を改善する方法

約 9 分で読めます

OGP (Open Graph Protocol) は、Web ページが SNS でシェアされた際の表示内容を制御するための仕組みです。2010 年に Facebook が提唱し、RDFa の語彙として設計されたこのプロトコルは、現在ではほぼすべての SNS とメッセージングアプリが対応しています。適切に設定されていないと、タイトルが途中で切れたり、意図しない説明文が表示されたりして、クリック率が大幅に低下します。この記事では、OGP テキストの最適化方法とプラットフォーム別の表示仕様を解説します。SNS マーケティングの関連書籍でも OGP 設定の重要性は繰り返し強調されています。

Open Graph Protocol の仕様と歴史

OGP は Facebook が 2010 年の F8 カンファレンスで発表したメタデータ規格です。HTML の <head> 内に <meta property="og:..."> タグを記述することで、ページの構造化情報をクローラーに伝えます。仕様は ogp.me で公開されており、基本プロパティとして og:title、og:type、og:image、og:url の 4 つが必須と定義されています。

OGP が登場する以前、SNS はページの <title> タグや <meta name="description"> を読み取ってプレビューを生成していました。しかし、これらは検索エンジン向けに最適化されたテキストであり、SNS のフィード上で表示するには冗長だったり文脈が合わなかったりする問題がありました。OGP はこの課題を解決するために、SNS 表示専用のメタデータ層を提供しています。

プラットフォーム別の OGP 表示仕様

SNS ごとに OGP テキストの表示領域は異なります。各プラットフォームの仕様を把握し、重要な情報が確実に表示されるよう文字数を調整することが重要です。以下の表は、各プラットフォームのモバイルアプリにおける実測値です。デスクトップ版ではやや多くの文字が表示される傾向があります。

プラットフォームog:title 表示文字数og:description 表示文字数画像推奨サイズ
X (Twitter)約 70 文字 (モバイル約 55 文字)約 120 文字 (カード形式で非表示の場合あり)1200×628px
Facebook約 60 文字 (モバイル約 45 文字)約 80 文字 (モバイル約 65 文字)1200×630px
LINE約 50 文字約 70 文字1200×628px
はてなブックマーク約 80 文字約 120 文字1200×630px
Slack約 70 文字約 150 文字1200×630px

最も制限が厳しいのは Facebook のモバイル表示で、og:title は約 45 文字、og:description は約 65 文字で切れます。全プラットフォームで確実に表示するには、og:title を 40〜45 文字以内に収めるのが安全です。

og:title の文字数と CTR の関係

og:title の文字数はクリック率 (CTR) に直接影響します。一般的な傾向として、30〜50 文字の og:title が最も高い CTR を記録します。短すぎると情報量が不足し、長すぎると途中で切れて意味が伝わらなくなるためです。

特に効果が高いのは、数字を含む具体的なタイトルです。「5 つの方法」「2025 年版」のような表現は、抽象的なタイトルと比較して CTR が 20〜30% 向上するとされています。疑問形のタイトル (「〇〇していませんか？」) も好奇心を刺激し、クリックを促す効果があります。

og:title の最適化

og:title はシェア時に最も目立つ要素であり、クリック率を左右する最重要項目です。ページの title タグとは別に設定できるため、SNS 向けに最適化した表現を使うことが可能です。

効果的な og:title を書くためのポイントは以下の通りです。

og:title と HTML title の不一致時の挙動

og:title と HTML の <title> タグは独立した要素であり、異なる値を設定できます。各プラットフォームのクローラーは og:title を優先的に読み取りますが、og:title が未設定の場合は <title> タグの値にフォールバックします。

ただし、両者の内容が大きく異なる場合は注意が必要です。Google は検索結果のタイトルに og:title を採用することがあり、SEO 用に最適化した title タグの内容が検索結果に反映されないケースが報告されています。og:title と title タグの使い分けは、SEO 用の title タグにはキーワードを含め、og:title は SNS でのクリック率を意識して感情に訴える表現にするのが効果的ですが、両者の主題は一致させておくのが安全です。

og:description の書き方

og:description はタイトルの下に表示される補足テキストです。タイトルだけでは伝えきれない情報を補い、クリックの後押しをする役割を担います。

og:description は 70〜100 文字が適切です。冒頭の 40 文字に最も重要な情報を配置し、途中で切れても意味が通じるようにします。meta description と同じ内容でも構いませんが、SNS のユーザー層を意識してカジュアルな表現にすることも有効です。

og:description 未設定時のフォールバック

og:description を設定しなかった場合、各プラットフォームは独自のロジックでフォールバックテキストを生成します。Facebook は <meta name="description"> の値を使用し、それも未設定の場合はページ本文の冒頭テキストを自動抽出します。X (Twitter) は twitter:description → og:description → meta description の順に参照し、いずれも未設定の場合はページ本文から抽出します。

自動抽出されたテキストは、ナビゲーションメニューやサイドバーの文字列が混入することがあり、意図しない表示になるリスクが高いです。og:description は必ず明示的に設定しましょう。文字数カウントスで og:title と og:description の文字数を確認し、各プラットフォームの表示制限内に収まっているかチェックできます。

OGP 画像 (og:image) の設計

OGP 画像はシェア時の視覚的なインパクトを決定する要素です。テキストだけのシェアと比較して、画像付きのシェアはクリック率が 2〜3 倍になるというデータもあります。

OGP 画像に含めるテキストは 20〜40 文字が適切です。画像内のテキストは小さなスマートフォン画面でも読める大きさにする必要があるため、文字数を絞り込むことが重要です。記事のタイトルをそのまま画像に入れるのではなく、核心部分だけを抽出して配置します。

プラットフォーム最小サイズ推奨サイズアスペクト比
Facebook200×200px1200×630px1.91:1
X (Twitter)144×144px (summary) / 300×157px (large)1200×628px1.91:1
LINE200×200px1200×628px1.91:1
Slack250×250px1200×630px1.91:1

各プラットフォームのクローラーの挙動

OGP 情報を取得するクローラーは、プラットフォームごとに異なる挙動を示します。Facebook のクローラー (facebookexternalhit) は User-Agent ヘッダーで識別でき、JavaScript を実行しません。そのため、クライアントサイドレンダリング (CSR) で OGP タグを動的に生成しているサイトでは、OGP 情報が正しく取得されない問題が発生します。

X (Twitter) の Twitterbot も同様に JavaScript を実行しません。LINE の crawler (Line) も静的 HTML のみを解析します。Slack の Slackbot はやや特殊で、リダイレクトを最大 5 回まで追跡しますが、JavaScript の実行は行いません。

React や Vue.js などの SPA フレームワークを使用している場合、OGP タグはサーバーサイドレンダリング (SSR) または静的サイト生成 (SSG) で出力する必要があります。Next.js の generateMetadata や Nuxt の useHead を活用すると、フレームワークの仕組みの中で OGP タグを適切に出力できます。Web フロントエンド開発の書籍では SSR/SSG での OGP 実装パターンが詳しく解説されています。

OGP キャッシュの仕組みと更新方法

各プラットフォームは OGP 情報をキャッシュしており、ページの OGP タグを更新しても即座には反映されません。キャッシュの有効期間はプラットフォームによって異なります。

OGP を更新した際は、Facebook シェアデバッガーと X Card Validator で再スクレイピングを実行し、意図通りの表示になっていることを確認する習慣をつけましょう。

OGP デバッグツールの使い方

OGP を設定したら、各プラットフォームのデバッグツールで表示を確認することが不可欠です。設定ミスに気づかないまま公開すると、シェアされるたびに意図しない表示が拡散されてしまいます。

主要なデバッグツールとその確認手順は以下の通りです。

OGP タグの設定漏れを防ぐために、文字数カウントスで og:title と og:description の文字数を事前にチェックし、各プラットフォームの表示制限を超えていないか確認する習慣をつけましょう。

CMS 別の OGP 設定方法

主要な CMS やフレームワークでは、OGP タグの設定方法がそれぞれ異なります。

動的 OGP 生成の注意点

ユーザーの入力やデータベースの値に基づいて OGP タグを動的に生成する場合、いくつかの注意点があります。

まず、HTML エスケープの徹底が必要です。og:title や og:description にユーザー入力を含める場合、<、>、&、" を適切にエスケープしないと、HTML インジェクションの脆弱性が生じます。

次に、og:image を動的に生成する場合 (例: Vercel OG Image Generation や Cloudinary の動的変換)、画像の生成に時間がかかるとクローラーがタイムアウトする可能性があります。Facebook のクローラーは約 4 秒でタイムアウトするため、画像の生成は事前にキャッシュしておくか、CDN 経由で配信するのが安全です。

また、URL にクエリパラメータやフラグメントが含まれる場合、og:url には正規化された URL (クエリパラメータなし) を設定するのが推奨されます。これにより、同一コンテンツの異なる URL でシェア数が分散するのを防げます。

OGP の歴史と仕様変更

Facebook は 2013 年に OGP の仕様を大幅に変更し、og:image の最小推奨サイズを 600×315px に引き上げました。この変更により、多くのサイトで OGP 画像が正しく表示されなくなる事態が発生しました。2018 年にはさらに推奨サイズが 1200×630px に引き上げられ、高解像度ディスプレイへの対応が求められるようになりました。

X (旧 Twitter) は独自の Twitter Card メタタグ (twitter:card、twitter:title など) を持っていますが、Twitter Card タグが未設定の場合は OGP タグにフォールバックします。そのため、OGP タグを適切に設定しておけば、Twitter Card タグを省略しても基本的な表示は確保できます。ただし、twitter:card タグだけは OGP に対応するプロパティがないため、明示的に設定する必要があります。

よくある失敗パターン

プロのテクニック

まとめ

OGP テキストの最適化は、SNS からの流入を増やすための基本施策です。og:title は 40〜45 文字、og:description は 70〜100 文字を目安に、各プラットフォームの表示仕様に合わせて調整しましょう。OGP タグは HTML の title タグや meta description とは独立して設定できるため、SNS 向けに最適化した表現を使い分けることが重要です。設定後は必ず Facebook シェアデバッガーや X Card Validator で表示を確認し、意図通りに表示されることを検証してください。文字数カウントスで文字数を事前にチェックする習慣をつけると、文字数超過による表示崩れを未然に防げます。