Twitterカードが表示されない原因と解決策｜X（旧Twitter）でのOGP設定と反映手順
Twitterカードが表示されない原因と解決策｜X（旧Twitter）でのOGP設定と反映手順
WebサイトのURLをX（旧Twitter）でシェアした際、画像やタイトルが魅力的に表示される「Twitterカード」。このカードが正しく表示されないと、クリック率や情報の拡散力に大きな影響を及ぼします。せっかく質の高いコンテンツを公開しても、SNS上での見栄えが悪いと、ユーザーの目に留まる機会を損失してしまいます。本記事では、Web制作やシステム開発において豊富な実績を持つ株式会社ドラマの視点から、Twitterカードが表示されない主な原因とその解決策、キャッシュの更新方法までを詳しく解説します。技術的な設定ミスから見落としがちな仕様までを網羅しているため、Web担当者の方はぜひ参考にしてください。
目次
Twitterカード（OGP設定）が表示されない5つの主要な原因
Webサイトを公開した直後や、記事を更新したタイミングで「Twitterカードが表示されない」というトラブルは頻繁に起こります。多くの場合、原因はWebサイト側のHTML記述か、X（旧Twitter）側の仕様に関連しています。ここでは、トラブルの背景にある5つの主要な原因を紐解きます。
1. OGPタグの記述ミスや設定漏れ
Twitterカードを表示させるには、HTMLのhead内に「OGP（Open Graph Protocol）」と呼ばれるメタタグを記述する必要があります。特に「twitter:card」というプロパティが欠落している場合、画像が表示されません。また、カードの種類（summaryやsummary_large_image）が正しく指定されているかも確認が必要です。単純なスペルミス一つで反映が止まることもあるため、注意深く確認しましょう。
2. X（旧Twitter）側のキャッシュが残っている
一度SNSでシェアされたURLの情報は、X（旧Twitter）のサーバー側に一定期間保存されます。これをキャッシュと呼びます。Webサイト側でタグや画像を修正しても、サーバーに古いデータが残っている限り、修正内容は反映されません。更新したはずなのに表示が変わらない場合は、まずキャッシュの影響を疑うべきです。
3. 画像のサイズやファイル形式の不備
Twitterカードに使用する画像には推奨されるサイズがあります。画像ファイルが重すぎたり、縦横比が極端だったりすると、正しく読み込まれない、あるいは意図しない形で切り抜かれる原因となります。また、ファイル形式もJPGやPNG、WebP（一部環境）などが一般的ですが、特殊な形式を使用していると表示されないリスクが高まります。
4. robots.txtによるクローラーのブロック
Webサイトには、検索エンジンやSNSのロボットに対して「どのページを読み込んで良いか」を伝えるrobots.txtというファイルが存在します。設定ミスによってX（旧Twitter）のクローラー（Twitterbot）のアクセスを拒否している場合、メタ情報を取得できず、カードは生成されません。開発環境から本番環境へ移行した際に設定を戻し忘れるケースがよく見られます。
5. SSL証明書やサーバー側の制限
WebサイトがSSL化（https対応）されていない、あるいはSSL証明書の期限が切れている場合、セキュリティの観点からクローラーが情報を取得しないことがあります。また、サーバー側で特定の海外IPアドレスを制限している場合や、CDN（コンテンツデリバリネットワーク）のキャッシュが干渉している場合も、表示トラブルの一因となります。
Twitterカードを正しく表示させるための解決手順
原因を特定できたら、次は具体的な解決策を実行します。株式会社ドラマでは、Web制作の現場において以下のステップで確認と修正を行っています。正確な手順を踏むことで、迅速に表示を正常化させることが可能です。
HTMLソースコードの記述内容を確認する
まずは基本となるHTMLタグが正しく設置されているかを確認します。以下のタグが最小構成として必要です。特に、大きな画像を表示させたい場合は、twitter:cardの値を「summary_large_image」に設定してください。
- meta name=”twitter:card” content=”summary_large_image”
- meta property=”og:url” content=”ページのURL”
- meta property=”og:title” content=”ページのタイトル”
- meta property=”og:description” content=”ページの説明文”
- meta property=”og:image” content=”画像の絶対パスURL”
ここで重要なのは、画像のパスを「https://」から始まる絶対パスで記述することです。相対パスではSNS側が画像を認識できません。
Card Validator（後継ツール）で反映を確認する
設定を修正した後は、X（旧Twitter）が公式に提供している「Card Validator」を使用することが一般的でしたが、現在は機能が変更されています。最新の仕様では、投稿作成画面でURLを貼り付け、プレビューを確認する方法が確実です。それでも反映されない場合は、X（旧Twitter）の「Post Inspector」のような外部ツールや、公式の投稿画面をリロードして強制的に再読み込みを促す必要があります。これにより、サーバー側のキャッシュがクリアされ、最新の情報が取得されます。
画像の最適化とアスペクト比の調整
Twitterカードで「summary_large_image」を使用する場合、推奨される画像サイズは1200×630ピクセル（比率1.91:1）です。この比率を守ることで、タイムライン上で画像が欠けることなく表示されます。ファイルサイズは5MB以下に抑える必要がありますが、表示速度を考慮すると数百KB程度まで軽量化しておくのがベストです。高品質なデザインを維持しつつ、適切なデータ量に調整することがプロのテクニックと言えます。
Webサイト運用で意識すべきSNSマーケティングのポイント
Twitterカードが正しく表示されることは、単なる技術的なクリアではなく、SNSマーケティングのスタートラインです。ユーザーがタイムラインをスクロールする中で、指を止めるかどうかは画像の訴求力に左右されます。文字情報だけでなく、視覚的に何についてのページなのかを瞬時に理解させる工夫が求められます。
例えば、記事のアイキャッチ画像に目を引くキャッチコピーを配置したり、ブランドカラーを統一して認識性を高めたりすることが有効です。株式会社ドラマでは、こうしたWebサイトのデザインからSNSとの連携までを一貫してサポートしており、技術的な課題解決だけでなく、その先の成果を見据えた提案を行っています。
まとめ
Twitterカードが表示されない問題は、メタタグの記述ミスやキャッシュの影響、画像仕様の不適合など、複数の要因が絡み合っている場合が多いです。本記事で紹介した手順に沿って一つずつ確認を行うことで、ほとんどのケースは解決できます。SNS経由のトラフィックを最大化するためにも、OGP設定は公開前に必ずチェックする習慣をつけましょう。
もし、自社サイトの設定が複雑で解決できない、あるいはより効果的なWeb運用の相談をしたいという場合は、Web制作の専門家である株式会社ドラマへぜひご相談ください。貴社の強みを最大限に引き出すWeb戦略を共に構築いたします。