新しいページを共有したら、プレビューに古いタイトルや切れたロゴ、灰色の枠が表示された。人はクリックする前にそのカードでリンクを判断するので、プレビューが崩れていると、共有されるたびにアクセスを逃していることになります。
プレビューは、いくつかの単純なルールに従っています。アプリが探している情報をページが渡せるようになれば、たいていはその後も問題なく表示されます。
プレビューはどこから来るのか
誰かがリンクを貼ると、アプリのクローラーがページを取得し、HTML の head にあるいくつかのタグを読みます。中心となる規格はOpen Graph プロトコルで、og:title、og:type、og:image、og:url を定めています。多くのアプリは og:description も読みます。X は独自の twitter:card タグを読み、それ以外は Open Graph で補います。
クローラーは、人のようにスクロールしたり、クリックしたり、待ったりはしません。サーバーが最初に返す内容を読むだけです。後から JavaScript で追加されたものは、見えないことがよくあります。
うまく表示されない原因
タグがないため、アプリが見つけた文章や画像から推測している。
タグがページの読み込み後に JavaScript で追加されるため、クローラーが一度も目にしない。
og:image が完全な https の URL ではなく、相対パスや http のアドレスになっている。
画像が大きすぎる、小さすぎる、縦横比が合わない、またはファイアウォール、ボット対策、ログインによってブロックされている。
どのページも同じ汎用のタイトルと画像を使っているため、どのリンクも同じに見える。
アプリが古いページの内容をキャッシュしていて、それを表示し続けている。
どこでも使える画像
1200 × 630 ピクセルの横長の画像を、JPEG か PNG で、ほどよいファイルサイズにして使いましょう。正方形や細長い形に切り抜くアプリもあるので、重要な文字やロゴは端から離して配置します。ログインなしで誰でも開ける、完全な https の URL で配信してください。
og:image:width、og:image:height、og:image:alt もあわせて指定しましょう。画像の読み込み前にカードの配置を決めやすくなり、スクリーンリーダーの利用者にも画像の内容が伝わります。
キャッシュされたプレビューを更新する
アプリはプレビューを、ときには数日間保存します。タグを直したら、ページを読み直すよう頼む必要があるかもしれません。Facebook の Sharing Debugger と LinkedIn の Post Inspector には、URL を再取得するボタンがあります。ほかのアプリでは、?v=2 のような影響のないパラメータを付けて共有すると、新しいプレビューが作られます。
共有する前に試す
私が無料で提供しているリンクプレビュー確認は、プレビュー用のクローラーと同じ方法でページを取得し、Open Graph と X のカード用タグを読み、画像を実際にダウンロードして読み込めるかを確認し、サイズと容量を測ります。そのうえで、X、LinkedIn、Facebook、WhatsApp、Slack、Discord でカードがどう見えそうかを、修正点の一覧とともに表示します。
アプリごとにルールがあり、ときどき変わります。プレビューは、ピクセル単位で同じものではなく、かなり近い目安として見てください。
自動化する
ページの多いサイトでは、プレビューは内容そのものから作られるべきです。商品名、記事のタイトル、イベントの日付と、ページごとに生成または選んだ画像です。Next.js などのフレームワークなら、こうしたタグと画像をサーバー側で作れます。どのページも同じ汎用のカードになっているなら、サイトについて教えてください。新しいページを追加するたびに、手間をかけずにきちんとしたプレビューが付くように設定します。