ソーシャルシェアカードプレビュー

ソーシャルシェアカードとは？

URL を Twitter、Facebook、LinkedIn に貼り付けると、各プラットフォームのクローラーがそのページにアクセスしてメタタグを読み取り、ページのタイトル・説明・画像を表示したリッチなプレビューカードをレンダリングします。こうしたカードは、クリック率や、あなたのコンテンツがどう受け止められるかに大きく影響します。

これを制御するのは 2 つの標準です。Open Graph（Facebook、LinkedIn をはじめ、ほとんどのプラットフォームで使われています）と Twitter Cards（Twitter 独自の拡張）です。このツールは両方をチェックし、各プラットフォームが表示するカードをシミュレートします。

設定しておきたい主要なメタタグ

• og:title —— カードに表示されるタイトル（60〜70 文字以内に収めましょう）
• og:description —— 短い説明文（200 文字以内に収めましょう）
• og:image —— プレビュー画像の URL（推奨：1200×630px、8MB 未満）
• og:url —— ページの正規（canonical）URL
• twitter:card —— summary_large_image に設定すると大きなバナー画像になります

このツールの使い方

1. 公開されている任意の URL を貼り付け、チェック をクリックします。
2. Twitter/X、Facebook、LinkedIn のタブを切り替えて、各プラットフォームのカードを確認します。
3. メタタグの生データ を展開すると、抽出されたすべての Open Graph と Twitter Card の値を確認できます。
4. チェック後、ページの URL に ?url= が付与されるため、結果をそのまま共有したりブックマークしたりできます。

よくある質問

ソーシャルシェアカードとは何ですか？

Twitter/X、Facebook、LinkedIn などのソーシャルメディアで URL をシェアすると、プラットフォームがそのページのメタタグを取得し、画像・タイトル・説明を表示したプレビューカードをレンダリングします。このツールは各プラットフォーム向けにそのカードをシミュレートするので、投稿する前にリンクがどう表示されるかを正確に確認できます。

Open Graph プロトコルとは何ですか？

Open Graph（og:）は、ページがシェアされたときの見え方を制御するために Facebook が作成した一連のメタタグです。og:title、og:description、og:image、og:site_name などのタグは、Facebook、LinkedIn をはじめとするほとんどのプラットフォームに読み取られ、シェアカードの生成に使われます。

Twitter Card のメタタグとは何ですか？

Twitter Card タグ（twitter:card、twitter:title、twitter:image など）は、ツイート内でリンクがどう表示されるかを制御する Twitter 専用のメタタグです。Twitter Card タグが存在すればそれが使われ、なければ Open Graph タグにフォールバックします。twitter:card の値がカードのレイアウトを決定し、「summary」は小さなサムネイル、「summary_large_image」は大きなバナー画像を表示します。

Facebook では画像が表示されるのに、Twitter では表示されないのはなぜですか？

Twitter と Facebook では画像の要件が異なる場合があります。Twitter は、画像が公開アクセス可能で、5MB 未満、かつ最低でも 144×144px（summary）または 300×157px（summary_large_image）であることを要求します。また、サーバーが Twitter ボットのユーザーエージェントをブロックしていないかも確認してください。Twitter の開発者ポータルにある Twitter Card Validator で検証できます。

入力した URL は第三者に送信されますか？

いいえ。URL は本サイト自身の Cloudflare Worker サーバーがメタタグを読み取るために取得します。Twitter、Facebook、LinkedIn をはじめ、いかなる第三者にも共有されません。