OG Preview

使い方

1. メタタグの実際の内容どおりに og:title と og:description を入力します。
2. og:image URL とドメインを貼り付けます。表示はテキストとカードのブランディングとしてのみです。
3. 入力すると 2 枚の模擬カードがリアルタイム更新：Facebook 風と Twitter (X) 風です。
4. タイトルや説明を短くしていき、切れなくなる長さを見つけたら、ページ上の実際のメタタグを調整します。

よくある用途

• 公開前チェック —— ランディングページがシェアされたときの見出しを事前に確認。
• メタタグの調整 —— カードで切れ始める長さの限界点を探り、それに合わせて文章を書く。
• コンテンツ監査 —— SNS を開かずに、サイト内の複数ページのカードを並べて比較。
• SEO の入門教材 —— 各 og: フィールドがカードのどこを制御するかを実演。

よくある質問

Q: 画像エリアが絵ではなくラベルなのは？ A: 画像を読み込むとブラウザからリクエストが飛ぶため、このツールはそれをしない設計です。URL のファイル名を表示して参照先の確認はできるようにしていますし、レイアウトから画像の占有面積も読み取れます。

Q: 模擬カードは各 SNS とピクセル単位で一致しますか？ A: 一致しません。Facebook と Twitter はカードデザインを頻繁に変えるため、これは比率とテキスト切り詰めの近似です。公式のレンダラーではなく、長さと文言の簡易確認にお使いください。

Q: ここでは切れないのに実サイトでは切れるのはなぜ？ A: 実際の SNS はキャッシュ済みデータや別フォントを使ったり、別のタグを優先したりします。メタタグを直した後は、各プラットフォーム独自のインスペクター（シェアデバッガーなど）でキャッシュを更新して最終確認してください。