X

Webパーツ工房|OGP診断・SNSカード確認
シェアする前に、見え方を確認。
シェア画像が出ない、タイトルが見切れる。URLやHTMLからOGPを解析し、SNSカード・画像の安全領域・互換性を確認できます。記事公開前やキャンペーン告知前のチェックに。
SNSカードは近似表示です。公開URLと画像の取得には通信を使います。
この画面で操作できます
URL・HTML貼り付け・HTMLファイルから解析できます。カード表示は近似です。操作画面の中はスクロールできます。
SNSごとの画像比率やタイトルの省略を並べて確認できます。掲載先の実際の表示と、あわせて確認してください。
表示例:SNSの近似カード



投稿前に、OGPと見切れを確認
公開URLやHTMLから、シェア用の情報を確認できます。
OGPを確認する
互換性スコア・可読性・文字数制限・フォールバック経路を一覧表示。AIアドバイスでは改善ヒントをすぐ確認でき、任意で Chrome 138 以降の端末内AIによる文章案も利用できます(Chrome 以外のブラウザではヒントのみ)。
OGP画像のサイズ・比率・ファイル重量をチェック。SNSごとのクロップ傾向をオーバーレイ表示し、端の文字やロゴの見切れリスクを視覚的に確認できます。
公開URLの解析に加え、HTMLの貼り付けやローカル .html ファイルにも対応。OGPタグを取り込み、比較用スロット A/B で2ページを並べて確認できます。
X、Facebook、Bluesky、Discord など10種のカード表示を HTML/CSS で近似再現。タイトル省略や画像比率の違いを並べて、シェア前の見え方を把握できます。
HTML貼り付けやHTMLファイルの解析はブラウザ内で行います。公開URLの解析では、そのURLを当サイトの取得用プロキシへ送信してページを取得します。
OGP画像の表示・解析にも、画像取得用プロキシや画像の取得先への通信が発生します。HTML貼り付けでも画像URLがあれば、画像取得の通信があります。
保存した診断履歴はブラウザのlocalStorageに保存されます。診断レポートを当サイトのサーバーに保存する機能はありません。
PCブラウザ推奨。各SNSのカードは近似表示で、実際の表示はSNSの仕様や設定により変わります。
HOW TO USE
公開URLの解析、HTMLの貼り付け、ローカル .html ファイルの選択から始めます。
X・Facebook・Bluesky など複数のカード表示を並べて、シェア前の見え方を比較します。
互換性スコア・文字数制限・画像の安全領域を確認し、必要なら改善ヒントを表示します。
FAQ
A: はい。URLやHTMLからOGP(シェア用のタイトル・説明・画像)を読み取り、XやFacebookなどでどう見えるかをブラウザ内でシミュレーションできます。画像が出ない原因の切り分けに使えます。
A1: はい。OGP画像の安全領域オーバーレイで、SNSごとのクロップ傾向と見切れリスクを視覚的に確認できます。公開前のチェックに便利です。
A2: いいえ。かどみえのカードは HTML/CSS による近似再現です。プラットフォームの更新やアカウント設定により実際の見え方は異なる場合があります。最終判断は本家のシェアプレビューや実機確認もあわせて行ってください。
A3: 診断結果の履歴はブラウザ内(localStorage)のみです。公開 URL を解析するときは、HTML 取得のため当サイトのプロキシ(fetch.php)を経由しますが、診断レポートを当サイトのサーバーへ保存する機能はありません。
A4: HTML の head 部分を貼り付けるか、ローカルの .html ファイルを選べます。og:image が /images/og.png のような相対パスのときは、ベースURLに公開予定のページURL(例: https://example.com/)を入れると画像を正しく解決できます。すべて絶対URLなら空欄で構いません。
A5: OGP 画像の実寸と、各 SNS の表示比率からクロップ傾向を計算した参考表示です。公式仕様の保証ではなく、見切れリスクの目安としてご利用ください。
A6: Facebook 向けの公式デバッガに加え、かどみえは X・Bluesky・Discord など複数 SNS を横並びで比較し、互換性・可読性・安全領域・フォールバック経路もまとめて確認できます。OGP を直したあとのキャッシュ更新は、ツール内「画像解析」タブの「OGP・画像キャッシュの更新」から Sharing Debugger 等へ進めます。
A7: 各プラットフォームは OGP をキャッシュします。Facebook では Sharing Debugger の「Scrape Again」など、画像解析タブにまとめた公式ツールで再取得してください。X には同等の公開ツールがなく、og:image の URL を ?v=2 のように変える方法が現実的です。Bluesky などは時間経過や再投稿での確認になります。
A8: Chrome 内 AI(Gemini Nano / Prompt API)は Google Chrome 138 以降のみ対応です。Microsoft Edge・Firefox・Safari ではボタンは無効になりますが、ステップ1の「改善ヒントを表示」はどのブラウザでも利用できます。Chrome を最新版に更新し、設定で端末内 AI が有効かも確認してください。
A9: cards-dev.twitter.com の Card Validator は、一般向けには提供終了に近い状態です。キャッシュ更新の公式ツールはなく、画像 URL の変更(クエリ付与)や新規ポストでの確認が中心になります。タグ仕様は X の開発者ドキュメントを参照し、かどみえの画像解析タブにも X 向けの注意を記載しています。
A10: PC ブラウザ(Chrome / Edge 推奨)向けです。カード一覧や比較表示は画面が狭いと操作しづらい場合があります。Chrome 内 AI はデスクトップ版 Chrome 138 以降を想定しています。
シェアする前の、ひと確認
画像・タイトル・説明をまとめて確認できます。
無料でかどみえを使う