このツールについて
Twitter/XのカードプレビューはWeb版の検証機能が無くなり、FacebookのシェアデバッガーもFacebookへのログインが必要なため、OGPやTwitterカードの設定が正しいかをさっと確認する手段が意外とありません。このツールは対象ページのHTMLをそのまま貼り付けるだけで、ログイン不要でカードのプレビューと問題点を確認できます。
対象ページのHTMLは、ブラウザの「ページのソースを表示」（view-source）で開いたものをそのままコピーして貼り付けられます。フルドキュメントでも、<head>だけを抜き出した断片でも同じように解析します。
貼り付けたHTMLの解析はブラウザ標準のDOMParserで完全にブラウザ内で行われ、外部サーバーに送信されることはありません。「画像を読み込む」を有効にした場合のみ、指定された画像URLへ直接アクセスして実際のサイズを確認します。
使い方
- 対象ページを開き、右クリックなどから「ページのソースを表示」でHTMLを表示します。
- 表示されたHTMLをすべてコピーし、テキストエリアに貼り付けます。
- 右側にTwitter/XとFacebook・LINE向けのカードプレビュー、および検出された問題点が表示されます。
- 画像の実サイズも確認したい場合は「画像を読み込む」を有効にします。
特徴
ログイン不要
Facebookのシェアデバッガーのようなログインは不要です。HTMLを貼り付けるだけで確認できます。
2種類のプレビューを同時に確認
Twitter/X向けのカードと、Facebook・LINEなど一般的なOGP向けのカードを並べて確認できます。
不足・文字数オーバーを自動検出
必須のタグが欠けている場合や、タイトル・説明文が長すぎる場合、タグが重複している場合などを自動で検出します。
画像URLの実サイズ確認（オプション）
「画像を読み込む」を有効にすると、指定された画像URLを実際に読み込み、実サイズを表示します。既定では無効です。
よくある質問
URLを入力するだけでチェックできませんか？
このサイトは静的サイトとして配信されており、サーバー側で任意のURLを取得する仕組みを持たないため、ブラウザから直接URLを取得するとほとんどのサイトでCORSにより失敗します。そのため、対象ページのHTMLをご自身で貼り付ける方式にしています。
「画像を読み込む」は常に有効にしても問題ありませんか？
問題ありません。ただし画像URLへ直接アクセスするため、既定では無効にしています。有効にすると、指定された画像URLへブラウザから直接アクセスして実サイズを表示します。
LINEやSlackでの見え方も正確に再現されますか？
「Facebook・LINEなどでのプレビュー」は、OGPを利用する主要サービスに共通する一般的なレイアウトの近似表示です。サービスごとの正確な再現ではない点にご注意ください。
貼り付けたHTMLはどこかに送信されますか？
いいえ。解析はブラウザ標準のDOMParserで完全にブラウザ内で行われます。「画像を読み込む」を有効にした場合のみ、画像URLへのアクセスが発生します。