Open Graph・ソーシャルカードプレビュー

Open Graph・ソーシャルカードプレビューとは？

これは Open Graph（OG）・ソーシャルカードを視覚的にプレビューするツールです。Open Graph や Twitter カードのメタタグは、誰かがリンクを共有したときにどのタイトル・概要・画像を表示するかをプラットフォームに伝えます。本ツールはそのリンクカードを再現し、公開前に確認できるようにします。マーケター、コンテンツ制作者、開発者が、ブログ記事・ランディングページ・商品ページを公開する際に、見出しが途切れていないか、画像が枠を満たしているか、ドメインが正しく読めるかを確認するために使います。セグメントコントロールでプラットフォームを選ぶと、その固有のレイアウトが表示されます。X・Facebook・LinkedIn は上部に大きな画像、その下にタイトルと説明を配したカードを描き、Slack・Discord はアクセントバー・ドメイン・小さなサムネイル付きのコンパクトなカードを表示します。ドメイン行はページ URL から自動的に導かれます。入力した値からカードをモックするだけで、公開中のページをクロールしたり既存のメタタグを読み取ったりはしません。

Open Graph・ソーシャルカードプレビューの使い方

1. カードの見出しとして表示するページタイトルを入力します。
2. 説明（タイトルの下に表示される概要行）を書きます。
3. プレビュー画像を読み込むために、絶対 URL の画像（理想は 1200×630）を貼り付けます。
4. ページ URL を入力します。カードに表示されるドメインはここから導かれます。
5. X・LinkedIn・Slack・Discord・Facebook を切り替えて各プラットフォームのレイアウトを比較します。
6. 何も途切れず、カードが整って見えるまでタイトルと説明を調整します。

使用例

よくある質問

どのプラットフォームをプレビューできますか？

5 つです：X（Twitter）・LinkedIn・Slack・Discord・Facebook。X・Facebook・LinkedIn は大きな画像のバナーカードとして、Slack・Discord はアクセントバーと小さなサムネイル付きのコンパクトな展開スタイルとして描画されます。プラットフォーム切り替えで瞬時に切り替えられます。

公開中のページから Open Graph タグを読み取りますか？

いいえ。ページをクロールしたり取得したり、既存のメタタグを解析したりはしません。入力したタイトル・説明・画像 URL・ページ URL だけからカードを作るので、公開済みページの検証ツールではなく「こう見える」を試すプレビューです。

プレビュー画像はどこから来ますか？

画像は、入力した画像 URL からブラウザが直接読み込みます。画像自身のホストからブラウザへ直接届き、当社のサーバーは経由しません。画像が表示されない場合は、URL が絶対 URL（https:// で始まる）で公開アクセス可能かを確認してください。

タイトルや説明がカードで途切れるのはなぜですか？

ソーシャルプラットフォームは長いタイトルや説明を切り詰めます。プレビューも行数を制限してそれを再現します。ここで途切れる場合は共有時も途切れる可能性が高いので、収まるまで短くしてください。

私のデータはサーバーに送信されますか？

いいえ。入力したタイトル・説明・URL はブラウザ内にとどまり、当社がアップロード・記録・保存することはありません。唯一の外部リクエストは、指定した URL からプレビュー画像をブラウザが取得することで、これは通常のブラウザ動作です。