OG画像プレビューツール

SNSシェア用のOGP画像を、Facebook・Twitter・LINEでの実際の表示形式でプレビューできます。リアルタイムで確認しながら最適な設定を見つけましょう。

プレビュー設定

確認したいページのURLを入力してください

Facebook

Twitter (X)

LINE

画像URLを入力してください
素晴らしい記事のタイトル
この記事では、OGP画像の最適化について詳しく解説します。

OG画像プレビューツールの使い方

URLから確認する場合

  1. 「URLから確認」タブを選択します
  2. 確認したいページのURLを入力します
  3. 「OGP情報を取得」ボタンを押すと、自動的にOGP情報を取得してプレビューします

手動入力する場合

  1. 「手動入力」タブを選択します
  2. OG画像のURLまたはアップロード、タイトル、説明文、サイトURLを入力します
  3. テキストはリアルタイムでプレビューに反映されます
  4. 「プレビュー更新」ボタンで画像を反映できます

OG画像プレビューツールの特徴

  • URLから自動取得: ページURLを入力するだけで、OGP情報を自動的に取得してプレビューします
  • 2つのモード: URLから確認する方法と、手動で入力する方法の両方に対応しています
  • 3つのSNS対応: Facebook、Twitter (X)、LINEでの表示を同時に確認できます
  • リアルタイムプレビュー: テキスト入力が即座に反映され、編集しながら確認できます
  • 画像サイズチェック: 画像の実際のサイズと推奨サイズを自動で比較します
  • カードタイプ切替: Twitter・LINEの大小カードタイプや、PC・スマホ表示を切り替えられます
  • 画像アップロード: ローカル画像をドラッグ&ドロップで直接プレビューできます
  • レスポンシブ対応: スマホ・タブレットでも快適に操作できます
  • 完全無料: 登録不要で今すぐ使えます

OGP画像について

OGP（Open Graph Protocol）画像は、SNSでURLがシェアされた際にカード表示される画像です。推奨サイズは1200×630px（アスペクト比1.91:1）です。

各SNSの推奨サイズ:

  • Facebook: 1200×630px（最小: 600×315px）
  • Twitter (X): 1200×628px（summary_large_image）
  • LINE: 1200×630px

OGP画像作成のポイント

  • テキストは大きく: 小さい画面でも読めるように、テキストは大きめに配置します
  • 重要な要素は中央に: SNSによって切り取られる部分が異なるため、重要な要素は中央に配置します
  • 高コントラスト: 背景と文字のコントラストを高くし、可読性を確保します
  • ブランドカラーを活用: 企業やサイトのブランドカラーを使用して、統一感を出します
  • シンプルに: 情報を詰め込みすぎず、シンプルで分かりやすいデザインにします

注意点

  • URLから確認する場合、一部のサイトではCORS制限により取得できない場合があります
  • 手動入力の場合、画像URLは公開されている必要があります（ローカルファイルは使用できません）
  • 手動入力のデータはブラウザ上でのみ処理され、サーバーには保存されません
  • 実際のSNSでの表示は、プラットフォームの仕様変更により若干異なる場合があります