X(旧Twitter)で アイキャッチ画像 が表示されない?──“透明背景”が原因かもしれない

こんにちは、阿久梨絵です!
ブログ記事をX(旧Twitter)で告知するとき、 アイキャッチ画像 が表示されるかどうかはクリック率に直結します。
私はいつも通り、400×400pxの正方形画像を使っていました。形式もPNGで、記事の内容に合わせてオリジナルで作成
それなのに、今回はなぜか画像が表示されない──違和感の正体を探ることにしました。

原因は“透明背景”だった?

調べてみると、X(旧Twitter)が画像を読み込む際に、背景が透明な画像を「空白」と誤認するケースがあることがわかりました。

透明背景が引き起こす問題

観点内容
Xの認識画像の周囲が透明だと「画像がない」と判定されることがある
表示枠との相性summary_large_imageカードは横長前提。正方形+透明だと枠に合わず省略される
視認性中央にしか要素がないと、Xが画像として認識しづらい

実体験からの補足:横幅が埋まっていればOKな場合も

別件で、横幅がフルに埋まっていて、縦の上下に透明部分がある画像を使ったところ、X(旧Twitter)では問題なく表示されました。
このことから、Xの画像認識は“横方向の充実度”を重視している可能性があります。

つまり、画像の中心や横幅にしっかりと要素があることが、表示の成否を分ける鍵になるのかもしれません。

解決策:背景を足すだけで改善する

実際に、背景色を追加した画像に差し替えたところ、X(旧Twitter)で正常に表示されるようになりました
背景は白でもグレーでもOK。重要なのは、画像全体が“埋まっている”ように見えることです。

対処法まとめ

背景色を追加(白・ブランドカラーなど)
画像形式をPNG→JPEGに変更(透過不要なら)
画像サイズを横長(例:1200×630px)に調整
Twitter Card Validatorで再読み込み → [こちら]

まとめ

いつも通りなのに、なぜか表示されない」──その違和感は、見直しのきっかけになります。
透明背景はデザイン的には美しいですが、SNSでの表示には不向きな場合もあります。
構造的に理解し、納得感のある発信に進化させることで、クリック率も信頼感も高まります。
阿久梨絵でした!

上部へスクロール
Verified by MonsterInsights