ソーシャルシェアプレビュー
Open Graph + Twitter Cardタグを、Facebook/Twitter風ライブプレビューカード付きで生成
4プラットフォームで映る、シェアカードの実態
Facebook・X・LinkedIn・WhatsAppはOGタグをそれぞれ異なる形で描画します。4つのモックを並べて確認し、公開前に一番弱いものを直しましょう。
1つのフォームで2種類のタグ
Facebook、LinkedIn、Slack向けのOpen GraphタグとX向けのTwitter Cardタグを、1つのタイトル・説明・画像・URLからまとめて生成します。
共有前にカードを確認
プレビューカードが1.91:1の画像をドメイン・タイトル・説明とともに描画。リンク共有時にユーザーが見るレイアウトを、公開前に正確に確認できます。
2つのカード形式
全幅画像のsummary_large_imageかコンパクトなsummaryカードを選択すると、対応するtwitter:cardの値とタグを生成します。
よくある質問
なぜOpen GraphとTwitter Cardのタグを一緒に生成するのですか？
twitter:*専用タグが設定されていない場合、Twitter/Xは自動的にOpen Graphタグにフォールバックします。つまり実際のシェアカードは同じフィールドの組み合わせから作られるため、別々に入力すると同じtitle/description/imageを二重に入力することになるだけです。
画像はどのくらいのサイズにすべきですか？
1200×630px（約1.91:1の比率）が、Facebook、Twitter/X、LinkedIn、Slackの「summary_large_image」カードで安全に使える推奨サイズです。これより小さい画像や不自然な比率の画像は、プラットフォームごとに予測しにくいトリミングをされる可能性があります。
入力した内容はどこかにアップロードされますか？
いいえ。すべて純粋なJavaScriptでブラウザ内で処理されます。入力内容がサーバーに送信されることはありません。
各プラットフォームの参照元
| プラットフォーム | 主な参照元 | 画像比率 |
|---|---|---|
| Facebook / LinkedIn | og:title、og:description、og:image | 1.91:1(最小200×200) |
| X / Twitter | twitter:card、なければOGへフォールバック | largeは2:1、summaryは1:1 |
| og:title/image(descriptionは非表示のことが多い) | ほぼ正方形にクロップ |
サイズ不足の画像、寸法タグの欠落(再スクレイプの原因になります)、各ネットワークの切り詰め地点を超えるタイトルをフラグでお知らせします。
関連ツール
ソーシャルシェアプレビューとは？
リンクをFacebook、X、LinkedIn、Slackなどでシェアすると、各プラットフォームはメタタグ——ほとんどのSNSはOpen Graph、XはTwitter Card——を読み取り、画像・タイトル・説明文のカードを作ります。このタグがないと、カードが崩れたりURLだけが表示されたりして、クリック率が大きく下がります。このツールは1つのフォームから両方のタグセットを生成し、プレビューカードをリアルタイムで描画するので、どこでシェアする前にリンクがどう見えるかを正確に確認できます。マーケター、コンテンツチーム、サイト運営者はローンチのたびに使っています。
生成されるもの
- 🖼️ 1つの入力欄からOpen GraphとTwitter Cardの両タグを生成
- 📱 入力と同時に更新されるFacebook/Twitter風のプレビューカード
- 🗂️ X用にsummaryと大画像カードを選択可能
- 🔗 og:urlとog:site_nameに対応
- 📋 両対応の、そのまま貼れるタグ一式
シェア前に確認したい場面
- 広くシェアされる製品ページやランディングページを公開する時
- キャンペーン公開前に記事リンクの見え方を確認する時
- 選んだ画像が1.91:1の比率でうまく切り取られるか確認する時
- シェアカードが数ヶ月壊れたままのサイトを監査する時
すべてブラウザ内で生成され、コンテンツはアップロードされません。知っておきたい仕様がひとつ：SNSはURLのメタデータをキャッシュするため、タグを追加した後は各プラットフォームのデバッグツールでキャッシュを更新しないと、新しいカードが表示されないことがあります。
最終更新 · 2026-09-01