OGP（Open Graph Protocol）とは、WebページがSNSでシェアされたときに表示されるタイトル・説明文・画像を制御するためのメタデータ仕様です。OGPを正しく設定しないと、意図しないタイトルや画像でシェアされてしまい、クリック率が大幅に低下します。
しかし、OGPの確認作業は意外と面倒です。メタタグを書いてデプロイし、各SNSのデバッグツールで個別にチェックして、修正してまたデプロイ……。この繰り返しに時間を取られた経験はありませんか？
本記事では、Twitter（X）・Facebook・LINE・Discord・Slackの5つのSNSプレビューをリアルタイムで一括確認できる無料ツールの使い方と、OGP設定の基礎知識を実践的に解説します。
OGPプレビューツールの概要
このツールには「URL確認」と「OGP作成」の2つのモードがあり、用途に応じて切り替えて使えます。
| モード | 用途 | 主な機能 |
|---|---|---|
| URL確認 | 公開済みページのOGPをチェック | URLを入力するだけでOGPタグを取得・プレビュー表示 |
| OGP作成 | 新規ページのOGPを事前に設計 | 各項目を入力してプレビュー確認＋メタタグをコピー |
どちらのモードでも、X（Twitter）・Facebook・LINE・Discord・Slackの5プラットフォームでのシェア表示をリアルタイムでプレビューできます。
使い方①：URL確認モード
公開済みのWebページに設定されているOGPタグを確認するモードです。以下の手順で使います。
ステップ1：URLを入力する
「URL確認」タブを選択し、チェックしたいページのURLを入力します。
ステップ2：OGPタグの取得結果を確認する
ツールがページのHTMLからOGPメタタグを自動的に読み取り、設定されている値を一覧で表示します。タイトル・説明文・画像URL・サイト名・タイプなど、主要なOGPタグをまとめて確認できます。
ステップ3：SNSプレビューで表示を確認する
取得したOGP情報をもとに、各SNSでシェアしたときの表示がプレビューで表示されます。X・Facebook・LINE・Discord・Slackの5つのプラットフォームを切り替えて確認できます。
ステップ4：チェック結果を確認する
OGPタグの設定状況がチェックリスト形式で表示されます。必須タグが未設定の場合や、推奨サイズを満たしていない画像がある場合は警告が表示されるため、修正すべきポイントが一目でわかります。
使い方②：OGP作成モード
これからOGPを設定するページ向けのモードです。各項目を入力しながら、リアルタイムでプレビューを確認できます。
入力項目一覧
| 項目 | タグ名 | 必須 | 説明 |
|---|---|---|---|
| タイトル | og:title | 必須 | SNSでシェアされたときに表示されるタイトル（推奨60文字以内） |
| 説明文 | og:description | 推奨 | タイトル下に表示される説明文（推奨120文字以内） |
| 画像 | og:image | 推奨 | シェア時のサムネイル画像（推奨1200×630px） |
| URL | og:url | 任意 | ページの正規URL |
| サイト名 | og:site_name | 任意 | サイトの名称 |
| タイプ | og:type | 任意 | website / article / product / profile 等 |
| Twitterカード | twitter:card | 推奨 | summary_large_image（大）または summary（小） |
タイトルと説明文にはリアルタイムの文字数カウンターが表示されるため、推奨文字数を超えていないかすぐに確認できます。
画像のアップロード
og:image にはドラッグ＆ドロップまたはクリックでファイルを選択できます。アップロードした画像はすぐにプレビューに反映されるため、各SNSでの見え方をその場で確認できます。
メタタグのコピー
入力した情報をもとに、HTMLのメタタグが自動生成されます。ワンクリックでクリップボードにコピーできるので、そのまま自分のサイトの<head>セクションに貼り付けるだけで設定が完了します。
対応SNSプラットフォームと表示の違い
OGPの表示はSNSごとに異なります。同じメタタグでも、プラットフォームによってタイトルの文字数制限や画像のトリミング位置が違うため、複数のSNSでの見え方を事前に確認することが重要です。
| プラットフォーム | カード形式 | 画像表示 | 特徴 |
|---|---|---|---|
| X（Twitter） | summary_large_image / summary | 大きい画像 or 正方形サムネイル | twitter:card で表示形式を選択可能 |
| リンクカード | 1200×630推奨 | og:image のアスペクト比 1.91:1 を推奨 | |
| LINE | リンクプレビュー | 正方形にトリミング | タイトルが短く表示されるため簡潔さが重要 |
| Discord | Embed | サイドバー付きカード | 左側にカラーバーが表示される独自のレイアウト |
| Slack | Unfurl | 右側にサムネイル | テキスト主体のレイアウトで画像は小さめに表示 |
このように表示形式がプラットフォームごとに大きく異なるため、1つのSNSだけで確認して満足してはいけません。本ツールなら5つのプレビューをタブ切り替えで即座に確認できます。
OGPの基礎知識：必須タグと推奨タグ
OGP（Open Graph Protocol）は、Facebookが2010年に策定したメタデータ仕様で、現在ではほぼすべてのSNSがこの仕様に対応しています。HTMLの<head>内に<meta property="og:〇〇">の形式で記述します。
必須のOGPタグ
最低限、以下の4つは必ず設定してください。
<meta property="og:title" content="ページのタイトル" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://example.com/page" />
<meta property="og:image" content="https://example.com/image.png" />推奨のOGPタグ
必須タグに加えて、以下のタグを設定するとSNSでの表示がより適切になります。
<meta property="og:description" content="ページの説明文（120文字以内推奨）" />
<meta property="og:site_name" content="サイト名" />
<meta property="og:locale" content="ja_JP" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<!-- Twitter専用 -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@your_account" />OGP画像の推奨サイズと注意点
OGP画像はSNSでの視認性を大きく左右する要素です。Googleの公式ドキュメントでも、画像の幅は1200ピクセル以上が推奨されています。
| 項目 | 推奨値 |
|---|---|
| サイズ | 1200 × 630 px（アスペクト比 1.91:1） |
| 最小サイズ | 600 × 315 px |
| ファイル形式 | PNG または JPEG |
| ファイルサイズ | 5MB以下（軽いほど読み込みが速い） |
注意点として、LINEは画像を正方形にトリミングするため、重要な情報は画像の中央に配置しましょう。端に配置したテキストやロゴが切れてしまうことがあります。
よくあるOGP設定ミスと対策
OGP設定でよく見られるミスとその対策をまとめます。これらのポイントは本ツールのチェック機能でも検出できます。
1. og:imageが未設定
画像がないとSNSでのシェア時にテキストのみの地味なカードになり、クリック率が大幅に低下します。Backlinkoの調査では、画像付きのシェアはテキストのみと比較してエンゲージメントが2倍以上になるとされています。必ず専用のOGP画像を用意しましょう。
2. og:titleが長すぎる
60文字を超えるタイトルは、多くのSNSで末尾が「…」で省略されます。特にLINEはタイトルの表示領域が狭いため、30〜40文字程度で要点が伝わるように工夫しましょう。
3. twitter:cardの設定漏れ
twitter:cardを設定しないと、X（Twitter）ではデフォルトの小さいサムネイル（summary）で表示されます。記事やブログの場合はsummary_large_imageを設定して、大きい画像で表示させるのが効果的です。
4. og:urlが相対パスになっている
og:urlにはhttps://から始まる絶対URLを指定する必要があります。相対パス（/page/など）を指定すると、SNSのクローラーが正しくページを認識できません。
5. 画像がHTTPのままになっている
og:imageのURLがhttp://のままだと、FacebookやLINEなどのSNSが画像を読み込めないことがあります。必ずhttps://のURLを使用してください。
WordPressでのOGP設定方法
WordPressサイトでOGPを設定する方法は大きく3つあります。
方法1：SEOプラグインを使う（初心者向け）
All in One SEO、Yoast SEO、Rank MathなどのSEOプラグインを使えば、管理画面からタイトル・説明文・画像を入力するだけでOGPタグが自動出力されます。コードを書く必要がないため、最も手軽な方法です。
方法2：テーマのfunctions.phpに直接記述する
プラグインを増やしたくない場合は、テーマ側でOGPタグを出力する関数を作成します。wp_headアクションフックに関数を追加し、投稿タイトル・抜粋・アイキャッチ画像を取得してメタタグとして出力する方法です。
function output_ogp_tags() {
if (is_singular()) {
$title = get_the_title();
$description = get_the_excerpt();
$image = get_the_post_thumbnail_url(null, 'full');
echo '<meta property="og:title" content="' . esc_attr($title) . '" />' . "
";
echo '<meta property="og:description" content="' . esc_attr($description) . '" />' . "
";
echo '<meta property="og:image" content="' . esc_url($image) . '" />' . "
";
}
}
add_action('wp_head', 'output_ogp_tags');方法3：本ツールでメタタグを生成してコピペする
静的サイトやCMSを使わない場合は、本ツールのOGP作成モードでメタタグを生成し、HTMLファイルの<head>セクションに直接貼り付けるのが最もシンプルです。
まとめ
OGPの設定は「やったつもり」で済ませてしまいがちですが、SNSごとの表示差異を考慮しないと意図しない見え方になります。本ツールを使えば、X・Facebook・LINE・Discord・Slackの5つのプラットフォームでの表示を一括で確認でき、設定漏れや画像サイズの問題もチェック機能で検出できます。
記事やページを公開する前に、ぜひOGPプレビューツールで最終チェックをしてみてください。
よくある質問（FAQ）
Q. OGPプレビューツールは無料で使えますか？
はい、完全無料で利用できます。会員登録やログインも不要で、ブラウザからすぐに使えます。
Q. OGPを設定したのにSNSで反映されません。どうすればいいですか？
SNS側にキャッシュが残っている可能性があります。Xの場合はTwitter Card Validator、FacebookはSharing Debuggerでキャッシュをクリアしてください。それでも反映されない場合は、メタタグがHTMLの<head>内に正しく記述されているか確認しましょう。
Q. og:imageの推奨サイズは？
1200×630ピクセル（アスペクト比1.91:1）が推奨です。このサイズであれば、X・Facebook・LINE・Discord・Slackのすべてで適切に表示されます。最小サイズは600×315ピクセルです。
Q. OGPとTwitterカード（twitter:card）の違いは何ですか？
OGP（og:〇〇）はFacebookが策定した汎用仕様で、多くのSNSが共通で利用します。Twitter カード（twitter:〇〇）はX（Twitter）専用の仕様です。Xでは、twitter:〇〇 が設定されていればそちらを優先し、なければ og:〇〇 にフォールバックする仕組みです。両方設定するのがベストプラクティスです。
Q. summary_large_imageとsummaryはどちらを選ぶべきですか？
記事やブログなどコンテンツ主体のページには summary_large_image（大きい画像）がおすすめです。画像の表示面積が大きく、タイムラインで目立ちやすいためクリック率の向上が期待できます。一方、プロフィールページやトップページなど画像が主役でないページには summary（小さい画像）が適しています。
Q. WebP形式の画像はOGPに使えますか？
技術的には使用可能ですが、一部のSNSクローラーがWebPに対応していないケースがあるため、互換性を考慮するとPNGまたはJPEGを使用するのが安全です。特にLINEやSlackでは、WebP画像が正しく表示されない場合があります。
