X(Twitter)でシェアー時の記事画像が表示されない時のチェックリスト

ウェブ制作
はる
はる

Twitter（現X）で記事をシェアした際、画像が正しく表示されない問題に遭遇することがあります。この問題を解決するために、いくつかの確認ポイントがあります。本記事では、画像が表示されない場合に確認すべき手順を紹介します。

1. キャッシュクリアのためにCard Validatorを使用する

まず最初に試すべきことは、TwitterのCard Validatorを使って、ページのキャッシュをクリアすることです。Twitterは一度ページのデータをキャッシュしており、ページの内容を変更しても古いキャッシュが表示され続けることがあります。

  • Card Validatorを使うことで、ページのmetaタグや画像が更新され、キャッシュが最新のものにリフレッシュされます。
  • 使用方法
    1. Card Validatorのページにアクセスします。
    2. チェックしたいURLを入力して「Preview Card」をクリックします。
    3. これにより、Twitterが新しい情報をキャッシュし、更新されたmetaタグや画像が反映されるようになります。

このツールを最初に使ってキャッシュをクリアし、その後にmetaタグや画像の設定を修正して再度Validatorを使用することで、問題を確実に解決できます。

2. 指定するmetaタグが正しいかチェック

Twitterで画像が表示されない原因の一つは、指定するmetaタグの設定が正しくないことです。特にTwitterカードに関するmetaタグが正確に設定されていない場合、画像が正しく表示されません。

正しく設定するための例

<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@サイトのTwitterアカウント">
<meta name="twitter:title" content="ページのタイトル">
<meta name="twitter:description" content="ページの説明文">
<meta name="twitter:image" content="https://example.com/画像のURL.jpg">

特にtwitter:imageで指定された画像URLが有効であることを確認してください。また、summary_large_imageタグは、Twitterカードの大きな画像を表示させるためのものです。

3. 画像のファイルサイズが制限内か確認

次に、画像のファイルサイズを確認しましょう。Twitterは5MBまでの画像をサポートしていますが、推奨サイズとして1MB以下に抑えることをお勧めします。この推奨サイズは、私の経験に基づいたもので、1MB以下であれば、安定して表示されることが多いです。

  • 確認事項:
    • 画像サイズが1MB以下か？
    • JPEG、PNG、GIFなどの適切なファイル形式を使用しているか？

4. 画像の圧縮をかける

ファイルサイズが大きすぎる場合、画像を圧縮しましょう。適切なツールを使って画像の品質を保ちながら、ファイルサイズを最適化することができます。

  • おすすめのツール：
    • imageOptim（Mac用）
    • TinyPNG（オンライン）

圧縮時のポイント

  • プログレッシブJPEG形式を避け、Baseline DCT形式で保存されるので表示されることがあります。
    • おすすめツールを使えば勝手に調整されます。
  • 不要なメタデータ（Exif情報）を削除することで、表示されることがあります。

5. 再度Card Validatorで確認する

すべての手順（metaタグの確認、ファイルサイズの調整、画像の圧縮）を終えたら、再度Card Validatorでページをスキャンし、キャッシュがクリアされているかを確認しましょう。これにより、修正が反映され、Twitterで正しく表示されることが確認できます。

まとめ

Twitterでシェアした記事の画像が表示されない場合、以下の手順を確認することで問題を解決できる可能性が高まります：

  1. Card Validatorでキャッシュをクリアする。
  2. metaタグが正しく設定されているか確認する。
  3. ファイルサイズが1MB以下であることを確認する（推奨）。
  4. 画像を適切に圧縮し、不要なメタデータを削除する。

これらのステップを踏んで、Twitterでのシェア時に正しく画像が表示されることを確認しましょう。

タイトルとURLをコピーしました