OGP画像プレビュー
og:title、og:description、og:image、og:url を入力して、Facebook、X、LINE 風の OGP カード表示を見比べられます。タイトルと説明文の長さも同時に確認できます。
入力
title 長
0
description 長
0
URL 長
0
カードプレビュー
このツールについて
OGP画像プレビューツールは、SNS シェア時の見え方を事前に確認するためのページです。タイトル、説明文、URL、画像 URL を変えながら、Facebook、X、LINE でのカード表示の違いを横断して比較できます。
タイトルと説明文の文字数も同時に出すため、長すぎて切れそうな文言を見つけやすくなります。既定ではローカルのサンプル画像を使うので、外部画像がなくてもモック確認を始められます。
このページはクライアントサイドだけで動き、入力内容を外部へ送信しません。外部の og:image URL は本番環境での取得可否や CORS 条件に左右されるため、ここでは安全側のモック表示を優先しています。
使い方
- まず「og:description」を入力または選択し、「og:image URL」や「og:url」も目的に合わせて調整します。
- 次に「ローカル画像へ戻す」を実行して、「カードプレビュー」を更新します。
- 最後に表示された「カードプレビュー」やプレビューを確認し、必要に応じて値を微調整します。
生成結果やプレビューはその場で確認し、実装先へ貼り付ける前に値の整合性を見直すと安心です。ブラウザ内で完結するため、下書きや検証の往復を短くできます。
OGP画像プレビューとは？
og:title、og:description、og:image、og:url を入力して、Facebook、X、LINE 風の OGP カード表示を見比べられます。タイトルと説明文の長さも同時に確認できます。 OGP画像プレビューツールは、SNS シェア時の見え方を事前に確認するためのページです。タイトル、説明文、URL、画像 URL を変えながら、Facebook、X、LINE でのカード表示の違いを横断して比較できます。 タイトルと説明文の文字数も同時に出すため、長すぎて切れそうな文言を見つけやすくなります。既定ではローカルのサンプル画像を使うので、外部画像がなくてもモック確認を始められます。 このページはクライアントサイドだけで動き、入力内容を外部へ送信しません。外部の og:image URL は本番環境での取得可否や CORS 条件に左右されるため、ここでは安全側のモック表示を優先しています。
よくある質問
Q: このツールは無料ですか？
はい、完全無料で登録不要です。すべての処理はブラウザ内で行われ、データが外部に送信されることはありません。
Q: 「og:description」と「og:image URL」はどう使い分けますか？
基本は「og:description」から設定し、必要に応じて「og:image URL」や「og:url」で細かく調整します。「ローカル画像へ戻す」を実行すると「カードプレビュー」へ反映されるので、条件差を見比べながら調整できます。
Q: 「ローカル画像へ戻す」を押すたびに結果は更新されますか？
はい。入力や設定を変えたあとに再度「ローカル画像へ戻す」を実行すると、最新条件で「カードプレビュー」が更新されます。比較したい場合は値を少しずつ変えながら順番に確認すると分かりやすくなります。
Q: スマートフォンでも使えますか？
はい、レスポンシブデザインに対応しており、スマートフォン・タブレットでもご利用いただけます。