Webパーツ工房|OGP診断・SNSカード確認

かどみえ

シェアする前に、見え方を確認。

シェア画像が出ない、タイトルが見切れる。URLやHTMLからOGPを解析し、SNSカード・画像の安全領域・互換性を確認できます。記事公開前やキャンペーン告知前のチェックに。

  • 無料
  • 登録不要
  • ブラウザで利用
かどみえを開く

SNSカードは近似表示です。公開URLと画像の取得には通信を使います。

OGP画像の安全領域と、X・Facebook・Blueskyの近似カードを見比べる例
サンプルページの解析結果。SNSカードは近似表示です。

この画面で操作できます

ここで実際に試せます

URL・HTML貼り付け・HTMLファイルから解析できます。カード表示は近似です。操作画面の中はスクロールできます。

同じOGPでも、カードの見え方は違う

SNSごとの画像比率やタイトルの省略を並べて確認できます。掲載先の実際の表示と、あわせて確認してください。

表示例:SNSの近似カード

投稿前に、OGPと見切れを確認

公開URLやHTMLから、シェア用の情報を確認できます。

OGPを確認する

画像の見切れと改善ポイント

OGP画像にLINEのモバイル表示の安全領域を重ねた実際の解析画面
安全領域はクロップ傾向を示す目安です。実際の表示を保証するものではありません。

改善ポイントを把握

互換性スコア・可読性・文字数制限・フォールバック経路を一覧表示。AIアドバイスでは改善ヒントをすぐ確認でき、任意で Chrome 138 以降の端末内AIによる文章案も利用できます(Chrome 以外のブラウザではヒントのみ)。

画像解析と安全領域

OGP画像のサイズ・比率・ファイル重量をチェック。SNSごとのクロップ傾向をオーバーレイ表示し、端の文字やロゴの見切れリスクを視覚的に確認できます。

URL・HTMLから、公開前の見え方へ

URLまたはHTMLを入力

公開URLの解析に加え、HTMLの貼り付けやローカル .html ファイルにも対応。OGPタグを取り込み、比較用スロット A/B で2ページを並べて確認できます。

SNSカードを確認

X、Facebook、Bluesky、Discord など10種のカード表示を HTML/CSS で近似再現。タイトル省略や画像比率の違いを並べて、シェア前の見え方を把握できます。

通信と、履歴の保存を分けて確認

HTML貼り付けやHTMLファイルの解析はブラウザ内で行います。公開URLの解析では、そのURLを当サイトの取得用プロキシへ送信してページを取得します。

OGP画像の表示・解析にも、画像取得用プロキシや画像の取得先への通信が発生します。HTML貼り付けでも画像URLがあれば、画像取得の通信があります。

保存した診断履歴はブラウザのlocalStorageに保存されます。診断レポートを当サイトのサーバーに保存する機能はありません。

PCブラウザ推奨。各SNSのカードは近似表示で、実際の表示はSNSの仕様や設定により変わります。

HOW TO USE

使い方

  1. URLまたはHTMLを入力

    公開URLの解析、HTMLの貼り付け、ローカル .html ファイルの選択から始めます。

  2. SNSカードを確認

    X・Facebook・Bluesky など複数のカード表示を並べて、シェア前の見え方を比較します。

  3. 改善ポイントを把握

    互換性スコア・文字数制限・画像の安全領域を確認し、必要なら改善ヒントを表示します。

FAQ

よくある質問

リンクをシェアしても画像が出ない・プレビューがおかしいとき、確認できますか?

A: はい。URLやHTMLからOGP(シェア用のタイトル・説明・画像)を読み取り、XやFacebookなどでどう見えるかをブラウザ内でシミュレーションできます。画像が出ない原因の切り分けに使えます。

シェア画像の文字やロゴが見切れるか、事前に確認できますか?

A1: はい。OGP画像の安全領域オーバーレイで、SNSごとのクロップ傾向と見切れリスクを視覚的に確認できます。公開前のチェックに便利です。

各SNSの表示と100%同じになりますか?

A2: いいえ。かどみえのカードは HTML/CSS による近似再現です。プラットフォームの更新やアカウント設定により実際の見え方は異なる場合があります。最終判断は本家のシェアプレビューや実機確認もあわせて行ってください。

URLの内容はサーバーに保存されますか?

A3: 診断結果の履歴はブラウザ内(localStorage)のみです。公開 URL を解析するときは、HTML 取得のため当サイトのプロキシ(fetch.php)を経由しますが、診断レポートを当サイトのサーバーへ保存する機能はありません。

まだ公開していないページでも試せますか?

A4: HTML の head 部分を貼り付けるか、ローカルの .html ファイルを選べます。og:image が /images/og.png のような相対パスのときは、ベースURLに公開予定のページURL(例: https://example.com/)を入れると画像を正しく解決できます。すべて絶対URLなら空欄で構いません。

画像の安全領域はどの程度信頼できますか?

A5: OGP 画像の実寸と、各 SNS の表示比率からクロップ傾向を計算した参考表示です。公式仕様の保証ではなく、見切れリスクの目安としてご利用ください。

Facebook Sharing Debugger との違いは?

A6: Facebook 向けの公式デバッガに加え、かどみえは X・Bluesky・Discord など複数 SNS を横並びで比較し、互換性・可読性・安全領域・フォールバック経路もまとめて確認できます。OGP を直したあとのキャッシュ更新は、ツール内「画像解析」タブの「OGP・画像キャッシュの更新」から Sharing Debugger 等へ進めます。

og:image を変えたのに SNS で古い画像のままです

A7: 各プラットフォームは OGP をキャッシュします。Facebook では Sharing Debugger の「Scrape Again」など、画像解析タブにまとめた公式ツールで再取得してください。X には同等の公開ツールがなく、og:image の URL を ?v=2 のように変える方法が現実的です。Bluesky などは時間経過や再投稿での確認になります。

AIアドバイスの「Chrome内AI」が使えません

A8: Chrome 内 AI(Gemini Nano / Prompt API)は Google Chrome 138 以降のみ対応です。Microsoft Edge・Firefox・Safari ではボタンは無効になりますが、ステップ1の「改善ヒントを表示」はどのブラウザでも利用できます。Chrome を最新版に更新し、設定で端末内 AI が有効かも確認してください。

X の Card Validator は使えますか?

A9: cards-dev.twitter.com の Card Validator は、一般向けには提供終了に近い状態です。キャッシュ更新の公式ツールはなく、画像 URL の変更(クエリ付与)や新規ポストでの確認が中心になります。タグ仕様は X の開発者ドキュメントを参照し、かどみえの画像解析タブにも X 向けの注意を記載しています。

スマートフォンでも使えますか?

A10: PC ブラウザ(Chrome / Edge 推奨)向けです。カード一覧や比較表示は画面が狭いと操作しづらい場合があります。Chrome 内 AI はデスクトップ版 Chrome 138 以降を想定しています。

シェアする前の、ひと確認

画像・タイトル・説明をまとめて確認できます。

無料でかどみえを使う