こんにちは、阿久梨絵です!
ブログ記事を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での表示には不向きな場合もあります。
構造的に理解し、納得感のある発信に進化させることで、クリック率も信頼感も高まります。
阿久梨絵でした!
