リンクプレビュー確認(OGP)
Link Preview Debugger
URLからOpen GraphとTwitterカードのタグを読み、共有したときの見え方をそのまま描きます。
カカオトーク・Slack・Facebook・Xが読むのと同じやり方でページのog:とtwitter:のタグを読み、それらが描くカードを描き、画像を実際に取得して開けるかどうかを確かめます。壊れたプレビューの多くは、タグはあるのに画像に届かない場合で、それは取得してみないと分かりません。
このリクエストは、こちらのサーバーが代わりに送ります。サーバーに渡るのは入力した URLだけで、ブラウザの Cookie やログイン状態は一緒に送られません。サーバーは公開アドレスにしか接続せず、プライベートアドレスや内部アドレスへの接続は拒否します。
使い方
これから共有するページのURLを入れます
クエリによって内容が変わるページなら、クエリまで含めた正確なURLを入れてください。リダイレクトは追いかけ、読むタグは行き着いた先のものです。
出てきたカードが意図どおりか見比べます
カードは各プラットフォームと同じ順で代替します。og:タグ、次にtwitter:タグ、次に<title>とmeta description。タイトルが代替経路から来ているなら、og:タグは間違っているのではなく無いということです。
画像の行を確かめます
画像を取得して、状態・種類・大きさを報告します。相対URL、ログインの先にある画像、httpsのページからhttpで配られる画像は、メッセンジャーでそうなるのとまったく同じようにここでも失敗します。
よくある質問
タグを直したのにカカオトークは古いカードのままです
どのプラットフォームもカードをキャッシュしていて、どれも長いあいだ自分から読み直しません。Kakao DevelopersのOGキャッシュ初期化、FacebookのSharing Debugger、Xのカードバリデータで消してください。このページはいまのタグを読むので、メッセンジャーと答えが食い違います。
ブラウザでは表示できる画像が、ここでは失敗します
それは公開の状態では取得できない画像だということで、メッセンジャーも同じように取得できません。よくある原因はログイン、Refererを見る直リンク防止、そしてページの文脈でしか解決しない相対URLのog:imageです。
画像の大きさはどれくらいがよいですか
1200×630が無難な答えです。1.91:1で、どのプラットフォームにも十分な大きさです。カカオトークは最低800×400、Facebookは最低200×200ないと、そもそも何も表示しません。
JavaScriptで描くページも見られますか
見ませんし、メッセンジャーも見ません。サーバーが送ったHTMLだけを、しかも先頭1 MBだけを解析します。クライアント側のスクリプトが後から差し込むタグは、これらのカードを描くどのクローラーにも見えません。
ここから渡せます
URL解析・クエリ編集
URL Parser & Query Editor
URLを構成要素に分け、クエリパラメータを編集できる表として見せ、書き換えた結果を組み立て直します。
短縮URLの追跡
Redirect Chain Tracer
短縮URLや計測リンクのリダイレクトをすべてたどり、最終的な行き先を示します。
robots.txt・サイトマップ点検
robots.txt & Sitemap Checker
robots.txtとサイトマップを取得して、あるURLがクロールされるかを試し、サイトマップの書式も検証します。
OGP画像作成
Social Card Generator
タイトル・サブタイトル・ブランド名とロゴをテンプレートに載せて1200×630の共有画像を作り、一緒に入れるメタタグも書き出します。
次の一手
このツールが出したものをそのまま受け取れる道具です。
HTTPヘッダー確認
HTTP Header Inspector
URLを取得して、レスポンスヘッダーの全文・リダイレクトの連鎖・所要時間・使われた圧縮方式を表示します。
OGP画像作成
Social Card Generator
タイトル・サブタイトル・ブランド名とロゴをテンプレートに載せて1200×630の共有画像を作り、一緒に入れるメタタグも書き出します。
robots.txt・サイトマップ点検
robots.txt & Sitemap Checker
robots.txtとサイトマップを取得して、あるURLがクロールされるかを試し、サイトマップの書式も検証します。
URL解析・クエリ編集
URL Parser & Query Editor
URLを構成要素に分け、クエリパラメータを編集できる表として見せ、書き換えた結果を組み立て直します。
HTTPリクエスト作成
HTTP Request Builder
GET/POST/PUT/PATCH/DELETE/HEADをヘッダーと本文まで指定して送り、ステータス・ヘッダー・本文・所要時間を表示します(CookieとAuthorizationは転送しません)。
QR・バーコード読み取り
QR & Barcode Reader
アップロードした画像・スクリーンショット・カメラからQRコードと主要なバーコードを読み取ります。