📱 SNSカードプレビュー

OGPメタタグを入力して、各SNSプラットフォームでの表示をリアルタイムでプレビューできます。メタタグHTMLの自動生成・コピーも可能です。

OGP情報を入力

SNSでシェアされた際に表示されるタイトル
シェア時に表示される説明文(70〜120文字推奨)
推奨サイズ: 1200×630px(アスペクト比 1.91:1)

プレビュー

🖼

生成されたメタタグ

使い方・活用例

  • OGPタイトル・説明文・画像URLなどを入力すると、各SNSでの表示をリアルタイムプレビュー
  • Twitter/X・Facebook・LINE・Discordの4プラットフォームに対応
  • 生成されたメタタグHTMLをワンクリックでコピーしてサイトに貼り付け
  • ブログ記事やランディングページ公開前のOGP確認に活用

SNSカードプレビューとは

FacebookやTwitter、LINE、Discordなどに投稿したURLがどう表示されるか、事前にプレビュー確認できるツール。OGP(Open Graph Protocol)メタタグを設定しても、実際のSNS上での見栄えを確認しないまま公開するのはリスク。このツールを使えば、修正前に「本当にこの表示でいいのか」を確認でき、不適切な画像やテキストミスを事前に発見できます。

使い方ガイド

ページのOGPメタタグ(og:title、og:description、og:imageなど)をHTML形式で入力するか、URLを直接貼り付け。するとTwitter/X、Facebook、LINE、Discordそれぞれでのカード表示プレビューが一覧で表示されます。各SNSで異なるレイアウト(画像の大きさ、テキストの行数制限など)が考慮されるため、どのプラットフォームで最適に見えるかを一目で判断可能。メタタグの自動生成機能を使って、HTMLコードをコピーできます。

活用シーン

・ブログ記事やプレスリリースを複数SNSで共有する前に、すべてのプラットフォームでの見栄えを一括チェック
・新商品のランディングページをTwitterやFacebookで宣伝する際、OGP設定の有効性を検証
・ウェブサイトのリニューアルでメタタグを変更したとき、SNS上での表示が意図通りか確認
・マーケティング部門が複数リンク共有のOGPを一元管理・監視するための検証ツール

知っておきたいポイント

SNSごとに異なるメタタグ仕様があります。TwitterはTwitter Cardタグ(twitter:title等)、Facebookはog:タグ、LINEは独自の仕様があります。このツールはこれらの差異を自動で吸収し、各プラットフォームでの表示を正確にシミュレート。事前検証により、シェア数を伸ばすための第一印象を最適化できます。

よくある質問

OGPとは何ですか?

OGP(Open Graph Protocol)は、WebページがSNSでシェアされた際に表示されるタイトル・説明文・画像などを指定するためのメタタグ仕様です。Facebookが策定し、現在はTwitter/X、LINE、Discordなど多くのプラットフォームで利用されています。

各SNSで表示が異なるのはなぜですか?

各SNSプラットフォームはOGPタグの解釈方法やカードのデザイン・アスペクト比が異なります。例えばTwitter/Xは1.91:1の横長画像、LINEはスクエアに近い表示をします。このツールでは各プラットフォーム固有のスタイルでプレビューできます。

og:imageの推奨サイズは?

一般的に1200×630ピクセル(アスペクト比1.91:1)が推奨されます。このサイズはTwitter/Xのsummary_large_imageやFacebookのシェア画像に最適で、ほとんどのプラットフォームできれいに表示されます。

生成されたメタタグはどこに貼りますか?

生成されたメタタグはHTMLファイルの<head>タグ内に貼り付けます。既存のOGPタグがある場合は置き換えてください。WordPressなどのCMSをお使いの場合は、SEOプラグインの設定画面から入力できます。

画像URLを入力してもプレビューに表示されません

画像が表示されない場合、画像URLが正しいか、画像がHTTPSで配信されているか、CORSの制限がないかを確認してください。このツールでは画像URLをそのままimgタグで読み込むため、外部サーバーの設定によっては表示できない場合があります。

Twitter CardとOGPの違いは?

OGPはFacebookが策定した汎用的なメタタグ仕様で、Twitter CardはTwitter/X独自のメタタグです。Twitter/Xはtwitter:card、twitter:titleなどの専用タグを優先しますが、未設定の場合はOGPタグにフォールバックします。このツールでは両方のタグを生成します。

og:videoタグを設定することはできますか?

はい、og:videoタグに対応しており、動画URLを指定できます。og:videoのメタタグも自動生成され、YouTube動画やMP4ファイルのプレビューが可能です。

og:typeにはどのような値を指定できますか?

og:typeは「website」「article」「video」「music」などが一般的で、コンテンツの種類に応じて設定します。デフォルトは「website」ですが、ブログ記事なら「article」、動画なら「video」を指定することで、SNSでの表示がより適切になります。

og:descriptionとmeta descriptionの使い分けは?

og:descriptionはSNS共有時に表示され、meta descriptionは検索結果に表示されます。内容は似ていますが、SNS向けと検索エンジン向けで独立して設定することをお勧めします。

SNSにキャッシュされたカード情報を強制更新する方法はありますか?

各SNS提供の公式キャッシュクリアツールを使用します。Facebook Sharing Debugger、Twitter Card Validatorなどで該当URLを入力し、キャッシュを更新してください。

og:localeで複数言語を指定できますか?

はい、og:locale で複数言語を指定できます。例えば og:locale:alternate で日本語と英語の両方を列挙することで、SNS側が言語に応じて表示を切り替えることが可能です。

og:urlとcanonicalタグの違いと使い分けは?

og:urlはSNS共有時に使われるURLで、canonicalタグは検索エンジン重複排除用です。og:urlを明示的に指定するとSNS共有時のURL統一が可能で、特にURL短縮サービスを使う場合に有効です。