【解決】設定しても「Twitterカード」が表示されない！対処法は？

「Twitterカード」を正しく表示させるには、head内にTwitterカードを表示させるためのタグを設定します。

WordPressテーマによっては、テーマ管理画面で簡単に設定できるようになっています。ボクが使っているAFFINGER5も簡単に設定できます。

ところが何らかの理由で、head内にTwitterカードを表示させるためのタグを設定しても、正しく表示されないことがあります。

ボクの約10個あるサイトのうち、なぜか3サイトだけがうまく表示されませんでした。他のサイトは全て正常に表示されます。

この原因についていろいろ調べて対処したら、なんとか解決できたので、同じように困っている人のために解決策を共有します。ご参考になれば幸いです。

「Twitterカード」とは？

Twitterカードが正しく表示されている例

Twitterカードとは、Twitterで自分のサイトのURLが投稿されると、記事タイトルや画像（アイキャッチ画像）などがリッチに表示される機能です。

正しく設定していれば、画像付きで目立つように表示されます。

正しく表示されない原因

画像が正しく読み込めない

※諸事情によりタイトルなどは黒く塗りつぶしています。

Twitterカードが正しく表示されない原因はいくつかあると思いますが、大きく分けて

そもそも設定が間違っている
「.htaccess」の記述が関係している

の2つ。

それ以外は知りません。プラグインなども関係しているかもしれません。

ちなみに、robots.txtでTwitterのクローラーを個別に許可する試みもしましたが、コレは効果がありませんでした。

設定が間違っている

Twitterカードを正しく表示させるには、head内にTwitterカードを表示させるためのタグを設定します。

そもそも設定がよく分かっていない、できていないかもしれない、と言う方は、「Twitterカード　設定」とかで調べて設定を確認してみてください。この記事では解説しません。

「Twitterカードとは？使い方と設定方法まとめ - サルワカ」が分かりやすく解説しているので、そちらを参考にすると良いかもしれません。

「.htaccess」の記述

ボクの場合、「.htaccess」の記述が関係していました。Twitterカードの基本設定は絶対に合っているのに、画像がうまく認識されなかったのです。

.htaccessが原因であることが判明した理由は、利用しているレンタルサーバー「mixhost」のサポートの方に教えてもらいました。

経緯は、mixhostで稼働しているサイトだけTwitterカードが表示されない＞mixhostのサポートに問い合わせる＞調査してもらって原因が判明です。

以下が、そのやり取りの一部です。

mixhostからのメール

このたびのお問い合わせにつきまして、さらに詳細を確認いたしましたところ、
お客様にて設置されている.htaccessファイルが要因でTwitterCardが表示不可で
あることが判明いたしました。

.htaccessファイルの記述は弊社サポートの対象外でございますため、ご案内
差しあげる内容以上のことは回答できかねますが、以下の記述内容に変更
いただいてTwitterCardが表示されるかお試しくださいますようお願いいたします。

対象ファイル：
/home/xxxx/public_html/xxxxxx/.htaccess

記述内容：
RewriteCond %{HTTP_REFERER} !^xxxx/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^xxxx$ [NC]

（以下省略）