ソーシャルシェアプレビュー: Open Graph タグを確認

使い方

example.com/blog/launch のようにページのアドレスを入力し、確認を押します。手元にページがない場合は、例を試してください。
X、Facebook、LinkedIn、Slack、Discord、WhatsApp、iMessage の各アプリが作成するカードを確認します。緑の点はカードに問題がないことを示し、黄色または赤の点はカードの下に問題が表示されます。
修正とタグを表示 を開くと、すべてのタグを 1 つずつ確認できます。不足しているタグは <head> に貼り付けられる形で用意されています。コピーして値を入力し、変更を公開して、もう一度確認してください。

確認のアドレスはブラウザのアドレスバーに表示されるので、ページの管理者に送れます。

リンクプレビューの仕組み

投稿やチャットにリンクを貼り付けると、アプリのクローラーがページを 1 回取得し、<head> のタグを読み取ります。JavaScript の実行、ログイン、Cookie バナーの承諾は行わないため、ページの読み込み後にスクリプトが追加したタグは見えません。確認ツールも同じ方法でページを取得します。1 回のリクエストで、JavaScript は実行せず、クローラーと同じようにリダイレクトをたどります。

各アプリは同じいくつかのタグを読み取り、それぞれ独自の代替手段があります。

Open Graph（og:title、og:description、og:image、og:url、og:site_name）は、Facebook、LinkedIn、Slack、Discord、WhatsApp、iMessage が読み取ります。
X は twitter:card、twitter:title、twitter:description、twitter:image を最初に読み取り、なければ Open Graph タグを使います。twitter:card がないと、画像があっても小さな要約カードが表示されます。
og:title がない場合、多くのアプリは <title> を使います。og:description がない場合、メタディスクリプションを使うアプリもあれば、テキストを表示しないアプリもあります。
Discord は theme-color でカードの側面に色を付けます。

ここのプレビューはこれらのルールに従っています。各アプリはデザインをときどき変更するため、厳密ではなく近いものとしてご覧ください。

プレビュー画像

1 つの画像でどこでも機能します: 1200 × 630 ピクセル（1.91:1）、PNG または JPEG、完全な https:// アドレス。

幅が 600 ピクセル未満だと、Facebook と LinkedIn では大きなカードではなく小さなサムネイルになります。200 × 200 未満だと、Facebook には画像が表示されません。
X は 5 MB まで、Facebook は 8 MB までの画像を受け付けます。WhatsApp は約 600 KB を超える画像を表示しないことが多いため、よく圧縮した JPEG が安全です。
SVG は主要なアプリのどれにも対応していません。
/og.png のような相対アドレスは、すべてのクローラーで機能するわけではありません。完全な URL を記述してください。
正方形への切り抜きはよくあるので（WhatsApp、小さなリンクの iMessage）、画像の重要な部分は中央付近に置いてください。

確認ツールは画像も取得し、ファイルヘッダーからサイズを測定して、プレビューに表示します。

プレビューが古いままの理由

アプリは取得した内容を数分から約 1 週間キャッシュします。タグを修正すると確認ツールにはすぐ新しいバージョンが表示されますが、すでに共有されたリンクは、アプリが再取得するまで古いプレビューのままです。Facebook のシェアデバッガーと LinkedIn の Post Inspector は、リクエストに応じてページを再取得します。Slack では、しばらくしてからリンクを再投稿すると新しいプレビューになります。?v=2 のようなクエリ文字列を追加すると、どのアプリでも新しいリンクとして扱われます。

よくある質問

プレビューに画像がないのはなぜですか？

よくある原因は順に、og:image タグがない、画像のアドレスが相対アドレスかエラーを返す、画像が小さすぎるか大きすぎる、ページの読み込み後に JavaScript でタグが追加される、です。各カードの下の行に該当する原因が示されます。

最低限必要なタグは何ですか？

og:title、og:description、1200 × 630 の画像を指定した og:image、og:url、そして summary_large_image を指定した twitter:card です。メタタグジェネレーターで作成できます。

ログインが必要なページを確認できますか？

いいえ。クローラーはログインしないため、ログインが必要なページにはどこにもプレビューが表示されません。確認ツールはクローラーと同じものを見て、公開アドレスのみを取得します。プライベートネットワークや内部ネットワークは拒否します。

確認ツールは取得したページを保存しますか？

いいえ。確認を押すとページと画像を取得し、見つかった内容を返します。結果は 2 分間保持されるため同じアドレスの 2 回目の確認はすぐに終わり、その後破棄されます。読み取るのは HTML 2 MB までと画像あたり 8 MB までで、8 秒で打ち切ります。

ブラウザでは問題なく開くのに 403 と表示されるのはなぜですか？

一部のサイトやファイアウォールは、ブラウザ以外や、既知の大手クローラー以外からのリクエストをブロックします。確認ツールが 403 を受け取る場合、Facebook や LinkedIn も受け取る可能性があります。ファイアウォールのボット設定を確認してください。

制限はありますか？

1 つのアドレスから 1 分あたり 20 回の確認までです。また、確認ツール全体で各サイトの取得は 1 分あたり最大 60 回なので、サイトへの大量アクセスには使えません。結果は 2 分間保持されるため、同じアドレスをすぐに再確認すると即座に返ります。表示中のページで確認をもう一度押すと、常に新しく取得します。