👁️ OGP画像プレビュー

OGPメタタグの内容を入力して、Twitter・Facebook・LINE・Slack・LinkedIn・Discordでリンクがどのように表示されるかをプレビューできます。

OGP情報を入力

🖼️ OGP画像をドラッグ&ドロップ

またはクリックしてファイルを選択

𝕏 Twitter / X プレビュー

f Facebook プレビュー

LINE プレビュー

画像未設定
タイトルがここに表示されます
説明文がここに表示されます
example.com

Slack プレビュー

example.com
タイトルがここに表示されます
説明文がここに表示されます
画像未設定

in LinkedIn プレビュー

画像未設定
タイトルがここに表示されます
example.com

Discord プレビュー

example.com
タイトルがここに表示されます
説明文がここに表示されます
画像
未設定

使い方・活用例

  • ブログ記事公開前にSNSでの表示イメージを事前確認
  • OGP画像のサイズや表示位置が適切かプレビューで検証
  • Twitter/Facebook/LINE/LinkedIn/Discordでのシェア表示をまとめてチェック
  • 他サイトのOGP設定を参考にして自サイトの設定を改善

OGP プレビューツールとは

OGP(Open Graph Protocol)タグはSNS上での表示を制御する重要なメタデータです。このツールは、Twitter・Facebook・LINE・Slack・LinkedIn・Discordなど主要なプラットフォームで、あなたのコンテンツがどのように表示されるかをリアルタイムでプレビューできます。SNSシェア前に見栄えを確認し、クリック率向上につながります。

使い方ガイド

・ツールのテキストボックスにOGP MetaタグまたはURLを入力します
・自動的に複数のプラットフォーム別プレビューが下に表示されます
・各プラットフォームで画像のトリミング、テキストの折返しがどのように表示されるか確認できます
・不都合があれば、HTMLのOGPタグを修正して再度プレビューします
・最終的な表示が満足できたら、サイトに実装します

活用シーン

・ブログ記事公開時:Twitter・Facebookでシェアした際の見栄えを事前確認し、クリック誘導を最大化
・マーケティング資料作成:複数のOGP画像パターンをテストして、最もエンゲージメント率が高いバージョンを選定
・企業サイトリニューアル時:各ページのOGP設定を一括確認し、ブランドイメージの統一性をチェック
・SNS広告配信前:Instagram・LinkedInなどで実際にどう見えるか確認してから広告費を投下

知っておきたいポイント

OGP画像はプラットフォームごとに異なるサイズと比率で表示されるため、すべてのプラットフォームで最適な見え方を確保するのは困難です。一般的には1200×630ピクセルの画像が推奨されていますが、縦長・横長などで異なります。このツールで複数プラットフォームの実装結果を見比べ、バランスの良い設定を心がけましょう。

よくある質問

OGPプレビューの使い方は?

URLを入力するか、OGPタグを直接入力すると、Twitter、Facebook、LINE、Slack、LinkedIn、Discordでのシェア時の見え方をプレビューできます。

実際のSNSの表示と同じですか?

主要SNSのカードレイアウトを再現していますが、各プラットフォームの仕様変更により若干の差異が生じる場合があります。

OGP画像の推奨サイズは?

1200x630ピクセルが推奨です。この比率(約1.91:1)でFacebook、Twitter、LINE、LinkedIn、Discordなど主要なSNSで最適に表示されます。

OGPが正しく設定されているか確認するには?

本ツールにURLを入力するだけで、og:title、og:description、og:imageの設定内容をプレビューできます。

LinkedInでのOGP表示の特徴は?

LinkedInではog:imageが上部に大きく表示され、その下にog:titleが太字で、ドメイン名がグレーで表示されます。ビジネス向けSNSのため、プロフェッショナルな印象を与える画像とタイトルが重要です。

DiscordでのOGP表示の特徴は?

Discordではリンクが埋め込み(embed)形式で表示されます。左側に色付きのボーダー、サイト名・タイトル・説明文が左に、サムネイル画像が右側に小さく表示されるのが特徴です。

DiscordのOGPプレビューを確認できますか?

はい、URLを入力するとDiscord・Twitter・Facebook・LINEなど各SNSでの表示を確認できます。Discord特有の埋め込み表示(タイトル・説明・画像・サイト名)のプレビューにも対応しています。

複数のOGPタグが設定されている場合、どのタグが優先されますか?

一般的には、og:(Open Graph)タグが最優先で、次にTwitterカード、その他のメタタグの順で優先されます。例えば、og:imageとtwitter:imageの両方がある場合、各SNSが推奨するタグを用いるため、Twitterではtwitter:imageが、FacebookではOGタグが優先されます。

og:descriptionはどのくらいの長さが理想的ですか?

55~160文字が推奨され、SNS表示時の切り詰めを考慮して100~120文字以内に収めるのが最適です。Facebookは85文字程度で、Twitterは110文字程度で切り詰められるため、最も重要な情報を前半に配置しましょう。

日本語を含むOGPタグの表示に問題がありますか?

当ツールは日本語を正しく処理できます。ただしHTMLの文字エンコーディングが「charset=UTF-8」に設定されていることを確認してください。設定されていないと、SNS側でテキストが文字化けする可能性があります。

OGP画像がSNSに反映されない場合の対処法は?

1)og:imageのURLが正しいか確認、2)画像ファイルが1200x630px以上あるか確認、3)SNS側のキャッシュをクリアするため24時間待つか、各SNSのシェアデバッガーで強制再取得してください。特にFacebookは24時間キャッシュするため、修正後の確認に時間がかかります。

複数のSNSプラットフォーム向けに異なるOGP設定を用意すべきですか?

基本的にはog:(OpenGraph)タグで統一し、必要に応じてTwitterカードを追加するのが推奨です。ただしLinkedInは会社・求人情報向けなので、og:typeを「article」に設定すると、より良いプレビューが表示されます。

LinkedInでは他のSNSと異なるメタデータが必要ですか?

LinkedInは基本的にOGタグを使用しますが、より詳しい表示のため「article:published_time」や「article:author」メタタグがあると、投稿がより見栄えよく表示されます。企業ページでの共有を想定する場合は、og:imageの比率を1.91:1に合わせるとより効果的です。