開発
OGP・SNSプレビュー診断
5つのSNSの表示を比較。採用タグ・画像の実寸を確認し、編集前後をシミュレーション。
URLをこのサイトのサーバーへ送り、公開ページと参照画像を取得します。編集シミュレーションはブラウザ内で処理し、入力・結果を自動保存しません。
文言・画像を編集して比較
変更はこのブラウザ内だけに反映されます。サイトのタグやSNSのキャッシュは変更しません。取得時にOGPがない項目はHTMLタイトル等で補完して編集を始めます。
X専用の設定
PNG・JPEG・GIF・WebP、5MiBまで。OGP画像の枠へ仮適用します。X専用画像URLを別に指定した場合はそちらを優先します。画像はアップロードせず、公開URLの取得可否も変更しません。
5つのSNSで見え方を比較
各SNSの近似プレビューです。実際の投稿・共有画面やキャッシュの確認結果ではありません。各カードの「採用タグと表示ルール」で、値の出どころと補完の順序を確認できます。
自動診断・改善のヒント
編集前後の比較・設定用HTML
編集内容から生成します。既存のOGP・twitterタグを整理してhead内へ設定してください。追記による重複を避け、画像の公開URLを確認します。HTMLタイトル・canonicalはこのコードに含みません。
| タグ | 取得時(先頭値) | 編集後 |
|---|
取得したHTMLのタグ・画像・通信履歴
ここは取得した原本の情報です。編集内容や手元の画像では上書きしません。画像はOGP・X用の各先頭候補を最大2件取得します。
画像の実寸・形式
取得履歴
解析したmetaタグ(HTML内の順序)
| 順序 | 属性・キー | 値 |
|---|
使い方・診断できる範囲
URLを取得すると、HTMLのhead内からOGP・X Card・タイトルなどを解析します。SNSカードごとの採用タグを見ながら、画像の切り抜きや文言を確認してください。「編集シミュレーション」では未公開の内容も試せ、変更箇所の比較と設定用HTMLのコピーができます。
このツールはSNSのクローラーを装って取得せず、robots.txt・各SNSのキャッシュ・oEmbed・アプリ独自のカード・認証・JavaScript実行後のHTMLを再現しません。SNSごとのタグ優先順位が非公開の箇所は、カード内にこのツールの補完ルールを明記します。文字数や画像幅の指摘は制作上の目安で、共通の合格基準や審査ではありません。
HTTPは80番、HTTPSは443番の公開URLに対応し、内部ネットワーク・認証情報付きURLへは接続しません。最大5回の転送、HTML 2MiB・画像1件3MiB、画像は最大2件に制限します。12百万画素または一辺10,000pxを超える取得画像は実寸のみを返し、表示を抑制します。SVG等はプレビューしません。取得処理は原則28秒を目安に中断しますが、名前解決の待ち時間はサーバーの設定にも依存します。文字コードを判定・変換できない場合は解析結果に注意点を表示します。
入力URLは取得のためxtoolsのサーバーへ送信し、対象ページと指定画像のサーバーへ通信します。URLや取得内容をアプリの診断履歴として保存しませんが、接続先にはアクセスが記録される場合があります。機密情報・トークンを含むURLは使用しないでください。編集内容と手元の画像はブラウザ内だけで処理します。レポート保存を選ぶとURL・メタ情報を含むファイルを端末へ保存します。
基本仕様:Open Graph protocol。各SNSの資料はプレビューカードから参照できます。公開後にSNS側の共有確認ツールや実際の投稿でも見え方を確認してください。
OGP・SNSプレビュー診断の使い方
- 確認する公開ページのURLを入力し、OGP・SNS情報を取得します。
- 5つのSNSの近似プレビュー、採用タグ、画像の実寸と改善点を確認します。
- タイトル・説明・画像等を編集して変更前後を比較し、設定用HTMLをコピーします。