Open Graph イメージプレビュー

Twitter、Facebook、LinkedInで共有した時のページ表示をプレビューします。OGメタタグを入力してライブプレビューを確認。

Twitter / X大きな画像付きサマリー

FastDevKit
FastDevKit - Free Developer Tools
Free online developer tools. Fast, private, no signup required.

Facebookリンクプレビュー

FastDevKit
FastDevKit - Free Developer Tools
Free online developer tools. Fast, private, no signup required.

LinkedInリンクプレビュー

FastDevKit - Free Developer Tools
FastDevKit

推奨OGメタタグ

<meta property="og:title" content="FastDevKit - Free Developer Tools" />
<meta property="og:description" content="Free online developer tools. Fast, private, no signup required." />
<meta property="og:image" content="https://example.com/og.png" />
<meta property="og:url" content="https://fastdevkit.com" />
<meta property="og:site_name" content="FastDevKit" />
<meta property="og:type" content="website" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="FastDevKit - Free Developer Tools" />
<meta name="twitter:description" content="Free online developer tools. Fast, private, no signup required." />
<meta name="twitter:image" content="https://example.com/og.png" />

OGイメージプレビューの使い方

  1. 1.手動入力モードを選択し、OGタグフィールド（タイトル、説明、画像URL）を入力します。
  2. 2.Twitter、Facebook、LinkedInでのページ表示をライブプレビューで確認します。
  3. 3.すべてのプラットフォームでのプレビューに満足するまで値を調整します。
  4. 4.下部セクションからメタタグスニペットをコピーしてHTML に貼り付けます。

よくある質問

Open Graphとは？

Open GraphはFacebookが作成したプロトコルで、ソーシャルメディアで共有された時のWebページの表示方法を制御できます。HTML <head>のメタタグを使用してタイトル、説明、画像を定義します。

OG画像の推奨サイズは？

すべてのプラットフォームで最良の結果を得るには1200x630ピクセルを使用してください。Twitterは1200x600もサポートしています。ユニバーサルな互換性には1.91:1のアスペクト比を使用してください。

プレビューに画像が表示されないのはなぜ？

画像URLはパブリックにアクセス可能である必要があります（localhostは不可）。CORSの制限も確認してください。一部のCDNは画像の埋め込みを許可するために特定のヘッダーが必要です。

og:imageとtwitter:imageの違いは？

og:imageはFacebook、LinkedInなどが使用する標準のOpen Graphタグです。twitter:imageはTwitter専用です。twitter:imageが設定されていない場合、Twitterはog:imageにフォールバックします。