使い方
- ページで使用中、または使用予定のog:titleとog:descriptionを入力します。
- og:imageの完全なURLを貼り付けます。画像を読み込み、実際のピクセルサイズを表示します。
- ページのURLまたはドメインを入力し、大きなカードと小さなカードのプレビューを比べて、警告があれば修正します。
仕組み
リンクが共有されると、多くのSNSやチャットアプリはページを取得し、Open Graphタグ（og:title、og:description、og:image、og:url）を読み取ってカードを作成します。横長で約1.91:1の画像は、通常、画像が上部に表示される大きなカードになります。小さい画像や正方形の画像では、テキストの横にサムネイルが表示されるコンパクトなカードになることがよくあります。
このツールでは、一般的な2種類のカードをプレビューして、テキストの長さや画像の見え方を確認できます。ブラウザーで画像を読み込んだ後、画像本来のサイズを確認します。200 × 200 px未満では画像が表示されないアプリが多く、600 × 315 px未満では小さなレイアウトになりやすく、縦横比が1.91:1から大きく外れるとトリミングされます。1200 × 630 pxは、高密度画面でも鮮明に表示できるため、広く推奨されているサイズです。
プレビューは、特定のアプリでの表示を正確に再現するものではありません。アプリによってタイトルや説明文の表示行数は異なり、説明文を無視するアプリもあります。また、ほとんどのアプリは初回共有後しばらくプレビューをキャッシュするため、タグを変更してもすぐに反映されないことがあります。多くのプラットフォームでは、キャッシュを更新するための独自のデバッグツールが用意されています。
使用例
スクリーンショットをog:imageに使用する
1440 × 900のスクリーンショットは、縦横比が1.6:1です。このツールは縦横比に関する警告を表示します。大きなカードでは上下がトリミングされます。1200 × 630に書き出せば、意図しない表示を防げます。
ロゴだけを画像に設定する
180 × 180のロゴは200 × 200 px未満のため、多くのアプリでは画像が表示されません。代わりに、ロゴを含む大きめの横長バナーを使用してください。
タイトルの長さを確認する
90文字のog:titleは、大きなカードのプレビューで3行に折り返されます。約60文字に短くすると、ほとんどのアプリで見やすく表示されます。
よくある質問
Facebook、LinkedIn、Xでリンクの表示が異なるのはなぜですか？
カードのレイアウト、トリミング、テキストの表示制限はプラットフォームごとに異なり、説明文を表示するものと表示しないものがあります。このプレビューは一般的な表示の目安であり、特定のプラットフォームのデザインを再現するものではありません。
og:imageを変更したのに古い画像が表示されるのはなぜですか？
プラットフォームはリンクのプレビューをキャッシュします。プラットフォーム独自の共有デバッガーを使ってページを再取得するか、キャッシュが期限切れになるまでお待ちください。画像ファイル名を変更する方法も有効です。
SVGやWebPの画像を使えますか？
ほとんどのプラットフォームはSVGに対応していません。WebPは多くのアプリで使えますが、すべてではありません。最も確実なのはJPGまたはPNGです。
ツールで画像を読み込めないのはなぜですか？
URLにログインが必要な場合や、画像ではなくHTMLページを指している場合、またはサーバーが外部サイトからのリクエストをブロックしている場合があります。ここでブラウザーが読み込めない画像は、SNSのクローラーも読み込めない可能性があります。
プライバシー
入力したテキストはブラウザー内に保持されます。画像を確認する際は、入力したURLからブラウザーが直接リクエストします（リファラーは送信されません）。そのため、サーバーには通常の画像リクエストとして記録されます。TIG Toolsにデータが送信されることはありません。