【初心者向け】 WordPress でTwitterカードに画像を確実に表示させる方法

こんにちは、阿久梨絵です!
WordPress でブログ記事をX(Twitter)にシェアしたとき、アイキャッチ画像が表示されないことがあります。これは特定のテーマ(Astraなど)に限らず、OGP設定や画像サイズ、X(Twitter)の仕様によるものです。今回はその原因と対処法を解説します。

Twitterカードに画像が出ない主な理由

1. OGP設定が不完全

X(Twitter)はtwitter:imageタグを読み取って画像を表示します。
WordPressテーマによってはOGPタグを自動出力しないため、SEOプラグインで補完が必要です。
代表的なプラグイン:All in One SEO, Yoast SEO, Rank Math

2. 画像サイズが小さい

Twitterカード(特に「Summary with Large Image」)では、最低300×300px以上が必要。
・実際には400×400px以上で安定表示されるケースが多いです。

3. キャッシュの問題

X(Twitter)はURLごとにカード情報をキャッシュします。
アイキャッチ画像を変更しても、古い情報が表示されることがある。
対処法:X(Twitter)の[Card Validator]でキャッシュを更新

4. 画像のトリミング

X(Twitter)は画像を中央トリミングするため、端に重要情報があると切れてしまう。
正方形に近い画像、中心に要素を配置するのが安全。

よくある「うまくいかない」特徴

状況原因対処法
アイキャッチ画像が表示されないOGPタグがない / サイズ不足SEOプラグインでOGP設定+画像サイズ確認
画像を変更したのに反映されないTwitterのキャッシュCard Validatorで再読み込み
一部の記事だけ表示されない投稿URLが未登録 / 画像の形式投稿URLをValidatorに登録、JPEG/PNG推奨
表示されるが画像が切れているトリミング位置の問題正方形画像+中心配置を意識

Astraテーマ利用者向け補足

AstraはOGPタグを自動出力しないため、SEOプラグインの導入がほぼ必須

 OGP(Open Graph Protocol)タグは、SNSなどでページがシェアされた際に、タイトル・説明・画像などの情報を正しく表示するために必要です。Astraテーマは軽量設計を重視しているため、OGPタグを標準では出力しません。そのため、Yoast SEOやAll in One SEO PackなどのSEOプラグインを導入して、OGPタグを補完するのが一般的です。これにより、SNSでの視認性やクリック率の向上が期待できます。

アイキャッチ画像のサイズと配置に注意すれば、Astraでも問題なく表示可能

 Astraはデザインの自由度が高い一方で、テーマ側でアイキャッチ画像の表示スタイルが固定されていない場合があります。特にOGP画像として使用される場合、推奨サイズ(例:1200×630px)を守ることで、SNS上でも美しく表示されます。また、画像の中央に重要な要素が配置されていると、トリミングされても視認性が保たれます。Astraでも適切なサイズと構図を意識すれば、OGP画像として十分に機能します。

なぜアイキャッチ画像が表示されないのか?

Twitterカード(ブログリンクのプレビュー)に画像が表示されない原因は複数あります。

twitter:imageタグがHTMLに含まれていない

→ Twitterはこのタグをもとに画像を取得するため、タグがないと画像が表示されません

WordPressテーマがOGP設定に対応していない

→ Astraなど一部テーマではOGPタグが自動生成されないことがあります。SEO系プラグインで補完可能です。

画像のキャッシュが古い

→ Twitter側が古いキャッシュを保持していると、画像を変更しても反映されません。

画像サイズや形式が不適切

推奨サイズ(1200×628px)や形式(JPG, PNG)でないと表示されないことがあります。

まとめ

WordPress でブログをX(Twitter)にシェアする際、アイキャッチ画像が表示されない原因は複数ありますが、基本的な対策を押さえれば安定して表示させることが可能です。

原因と対策のポイント

原因対策補足
OGPタグがないSEOプラグインでOGP設定を追加twitter:imageタグが必須
画像サイズが小さい400×400px以上を推奨SNS用には1200×630pxが理想
TwitterのキャッシュCard Validatorで更新反映されるまで時間がかかることも
画像の構図が不適切中央に重要要素を配置トリミング対策として有効
Astraテーマ使用SEOプラグイン導入が必須軽量設計のためOGP非対応

実践ステップチェックリスト

1. WordPress投稿にアイキャッチ画像を設定

メディアライブラリから再設定すると反映されやすい

2. SEOプラグインでOGPタグを確認・設定

twitter:imageタグが出力されているか確認
・All in One SEO / Yoast SEO / Rank Math などが有効

3. Twitter Card ValidatorでURLを検証

・「Card loaded successfully」が表示されればOK
・表示されない場合は数回試す

4. 画像の再アップロード(キャッシュ対策)

ファイル名を変更して再アップロードすると効果的
・例:image79.jpg → image80.jpg

5. 画像サイズと構図の最適化

推奨サイズ:1200×630px(横長)
中央に重要な要素を配置してトリミング対策

応用ヒント

複数のSNSに対応するなら:OGPタグだけでなく、TwitterカードとFacebook用の設定も併用すると効果的。
JetpackのPublicize機能:Twitter連携を自動化できるので、投稿時の手間が減ります。
画像の視認性を高めたいなら:テキスト入りのサムネイル画像を作成し、中央にタイトルを配置するのがおすすめ。

OGP設定と画像サイズ・構図をしっかり整えれば、Astraのような軽量テーマでもTwitterカードで美しく表示されます。SEOプラグインの力を借りて、SNSでの視認性とクリック率を最大化しましょう!
阿久梨絵でした!

上部へスクロール
Verified by MonsterInsights