【ITニュース解説】Link preview shows no image? 7 og:image checks for Slack, X, Discord and LinkedIn

Webサイトを開発し、そのページのURLをSlackやX（旧Twitter）、Discord、LinkedInといったSNSやメッセージングサービスに貼り付けたとき、タイトルや簡単な説明は表示されても、肝心の画像が表示されないという経験はシステムエンジニアを目指す上で一度は直面する問題である。これはクローラーと呼ばれるプログラムがあなたのWebページを読み込み、ページの概要（リンクプレビュー）を生成する際に、画像の情報がうまく伝わっていない場合に起こる。ブラウザで見たときには画像がきちんと表示されているのに、なぜこのようなことが起こるのか、その主な原因と解決策を順に解説する。

まず一つ目の原因として、タグがJavaScriptの実行後に生成されている場合がある。Webページの中には、コンテンツやメタ情報をJavaScriptによって動的に生成するものが多い。しかし、リンクプレビューを生成するクローラーのほとんどは、JavaScriptを実行しない。彼らはWebサーバーから送られてくる生のHTMLコードだけを読み取るのである。もしog:imageのような画像に関するメタタグ（OGPタグと呼ばれる）が、ReactやVueといったフレームワークを使ってクライアント側（ユーザーのブラウザ側）でJavaScriptが実行されて初めてHTMLに挿入されるような仕組み（シングルページアプリケーションなど）になっていると、クローラーはこれらのタグを認識できない。 この問題を確認するには、curl -s https://yoursite.com/page | grep -i 'og:image'というコマンドを使い、サーバーから直接返されるHTMLの中にog:imageタグが含まれているかを調べるとよい。もし何も表示されなければ、この原因が該当する可能性が高い。解決策としては、サーバーサイドレンダリング（SSR）や静的サイトジェネレーション（SSG）を用いて、あらかじめサーバー側でOGPタグを含んだHTMLを生成しておくか、使用しているWebフレームワークのメタデータAPIを活用してタグを適切に埋め込む必要がある。

二つ目の原因は、og:imageに相対URLが指定されていることである。og:imageタグのcontent属性には、画像のURLを記述する。このとき、https://yoursite.com/og/page.pngのように、Webサイトのプロトコル（https://）からドメイン名、パスまでを完全に含んだ「絶対URL」を使用しなければならない。/og/page.pngのようなドメイン名を含まない相対パスや、//cdn...のようなプロトコルを省略したURLは、クローラーによっては正しく解釈されず、画像が表示されない原因となることがある。クローラーはあなたのサイトのどのページからこのタグを読んでいるかを知っているが、画像のURLを解決するためには完全な情報が必要なのだ。

三つ目の原因は、画像URLが実際に画像を返さないことである。og:imageで指定したURLにアクセスした際に、本当に画像ファイルが返されているかを確認する必要がある。ブラウザのプライベートウィンドウで直接その画像URLを開いてみるか、curl -sI https://yoursite.com/og/page.pngというコマンドを実行してHTTPヘッダーを確認してみるとよい。成功していれば、ステータスコードが200 OKであり、Content-Typeヘッダーがimage/pngやimage/jpeg、image/webpといった画像形式を示しているはずである。よくある失敗例としては、画像URLがログインページにリダイレクトされたり、指定された画像ファイルが見つからず404エラーを返したり、ホットリンク保護機能によってブロックされたり、あるいは画像ではなくHTMLのエラーページが200 OKで返されてしまうといったケースがある。クローラーは指定されたURLが画像であると期待しているので、画像以外のものが返ってくると正しく処理できない。

四つ目の原因として、ファイアウォールがクローラーをブロックしている可能性が挙げられる。Webサイトには、ボットによる不正アクセスや過剰なリクエストから保護するためのセキュリティ設定が施されていることがある。例えば、CDN（コンテンツデリバリーネットワーク）のボット対策機能、WAF（Webアプリケーションファイアウォール）のルール、レート制限、あるいはrobots.txtファイルでクローラーのアクセスを拒否する設定などがこれに該当する。特定のクローラー（facebookexternalhit、Twitterbot、Slackbot、Discordbot、LinkedInBotなど）が、これらの設定によってサイトへのアクセスをブロックされると、リンクプレビューを生成するための情報を取得できないため、画像も表示されない。 この問題をテストするには、curl -sI -A "Twitterbot/1.0" https://yoursite.com/pageのように、クローラーのUser-Agent文字列を偽装してアクセスしてみるとよい。もしここで403 Forbiddenエラーが返されたり、認証やCAPTCHAなどのチャレンジページが表示されたりする場合、ファイアウォールが原因である可能性が高い。

五つ目の原因は、画像サイズが不適切であるか、ファイル容量が大きすぎることでである。主要なSNSプラットフォームで画像が適切にトリミングされ、きれいに表示されるための安全なデフォルトサイズは、1200 x 630ピクセル（アスペクト比約1.91:1）である。X（旧Twitter）では、twitter:cardタグをsummary_large_imageに設定しないと、小さな正方形のカードになってしまうことがあるため注意が必要だ。また、画像ファイルの容量も重要で、Xは5MBを超える画像を拒否するため、一般的にファイルサイズは小さく保つべきである。ファイル容量が小さいほど、あらゆるクローラーにとって画像の読み込みが確実になるというメリットもある。縦長のスマートフォン画面のスクリーンショットをOGP画像として設定してしまうと、多くのプラットフォームで中央が帯状にトリミングされて表示されることになるため、推奨されるアスペクト比に合わせた画像を用意することが望ましい。

六つ目の原因として、プラットフォームが古い（壊れた）プレビューをキャッシュしていることが考えられる。画像が表示されない問題を修正し、WebサイトのOGPタグを更新したにもかかわらず、まだ古いプレビューが表示される場合、それはSNSプラットフォームが以前に取得した情報をキャッシュしているためである。各プラットフォームにはキャッシュを更新する機能がある場合がある。 Facebookの場合は「Sharing Debugger」を使用し、「Scrape Again」ボタンをクリックすることでキャッシュを強制的に更新できる。LinkedInの場合は「Post Inspector」でURLを再取得できる。しかし、X、Slack、Discord、WhatsAppなどには公開されているキャッシュリフレッシュボタンがない。このような場合は、og:imageタグで指定する画像ファイルのファイル名を変更するか、og.png?v=2のようにURLにクエリ文字列（?以降の任意の値）を追加することで、プラットフォームに新しいURLとして認識させ、再取得を促す必要がある。

最後に、七つ目の原因として、基本的なOGPタグセットが不足していることが挙げられる。リンクプレビューを正しく表示させるためには、最低限以下のOGPタグとTwitterカードタグを設定することが推奨される。 具体的には、ページのタイトルを定義する<meta property="og:title" content="Page title">、短い説明文を定義する<meta property="og:description" content="One sentence.">、ページのURLを定義する<meta property="og:url" content="https://yoursite.com/page">、そして画像のURLを定義する<meta property="og:image" content="https://yoursite.com/og/page.png">は必須である。加えて、<meta property="og:image:width" content="1200">と<meta property="og:image:height" content="630">という画像サイズの情報を明示することで、一部のクローラーは画像をダウンロードする前にカードのレイアウトを正確にレンダリングできるようになる。また、Xでの表示を最適化するために<meta name="twitter:card" content="summary_large_image">も設定すると良い。

これらのポイントを一つずつ確認し、適切に設定することで、あなたのWebページのリンクプレビューがSNS上で魅力的に表示されるようになるだろう。もしデザイナーがおらず、OGP画像の作成に困る場合は、「ogkit」のような無料のインブラウザカード作成ツールも存在する。これは1200 x 630ピクセルのPNG画像をエクスポートし、上記のタグブロックも提供してくれるため、非常に便利である。システムエンジニアとして、Webサイトの表示品質を高めることは非常に重要であり、これらの知識は実務で役立つだろう。