本文へスキップ

リンクプレビュー確認(OGP)

Link Preview Debugger

URLからOpen GraphとTwitterカードのタグを読み、共有したときの見え方をそのまま描きます。

カカオトーク・Slack・Facebook・Xが読むのと同じやり方でページのog:とtwitter:のタグを読み、それらが描くカードを描き、画像を実際に取得して開けるかどうかを確かめます。壊れたプレビューの多くは、タグはあるのに画像に届かない場合で、それは取得してみないと分かりません。

☁️ サーバーを使いますogpreviewsocialseo

このリクエストは、こちらのサーバーが代わりに送ります。サーバーに渡るのは入力した URLだけで、ブラウザの Cookie やログイン状態は一緒に送られません。サーバーは公開アドレスにしか接続せず、プライベートアドレスや内部アドレスへの接続は拒否します。

KakaoTalk・Slack・Facebook・X が読むのと同じやり方でページの og・twitter タグを読み、画像が実際に開けるかどうかも確かめます。

使い方

  1. これから共有するページのURLを入れます

    クエリによって内容が変わるページなら、クエリまで含めた正確なURLを入れてください。リダイレクトは追いかけ、読むタグは行き着いた先のものです。

  2. 出てきたカードが意図どおりか見比べます

    カードは各プラットフォームと同じ順で代替します。og:タグ、次にtwitter:タグ、次に<title>とmeta description。タイトルが代替経路から来ているなら、og:タグは間違っているのではなく無いということです。

  3. 画像の行を確かめます

    画像を取得して、状態・種類・大きさを報告します。相対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だけを解析します。クライアント側のスクリプトが後から差し込むタグは、これらのカードを描くどのクローラーにも見えません。

ここから渡せます

次の一手

このツールが出したものをそのまま受け取れる道具です。

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コードと主要なバーコードを読み取ります。

ブラウザの中だけで動きます