Twitterカード用の設定は正しいのに画像が表示されない件が解決した

ソースコードの修正だとか WordPress
この記事は約3分で読めます。
スポンサーリンク

WordPressでブログを公開し始めてそれなりの月日は流れているのだけど、OGP設定が正しいにも関わらずTwitterでエントリのリンクを張ると、Twitterカードは機能しているにも関わらず画像だけが表示されないという問題があって、それをずっと後回しにして放置していました。

今回はやっとそこに脳内領域を当てることができるようになったので、解決方法を探したという感じ。Twitterカードがどのように表示されるかは『Card Validator | Twitter Developers』でチェックできるのだけど、そこで確認したところでは「あんたのサーバのrobots.txtでうちのボットが許可されてないから画像取得できんのよ」とのこと。

そういうわけでサーバにあるrobots.txtに以下の記述を追加する。

User-agent: Twitterbot
Allow: /wp-content/uploads/

wp-contentの場所は人それぞれだろうから、そこは適宜パスを修正のこと。ここでTwitterが親切じゃないなぁと思ったのは、robots.txtに記述するクローラー名を書いてくれていないこと。仕方ないからいろいろ検索して見つけたのが『Cクローラ(ロボット)のユーザーエージェント(UA)一覧』なのだけど、他にもいろいろクローラー名称を書いてくれているので助かりました。

そうして更新してみるのだけど、まだ画像を取得してくれない。さらに調べたのだけど、.htaccessでもTwitterのクローラを、みたいなことを『facebookに投稿する際のog:imageや、twitter cardが表示されない時にしたこと – Qiita』で知る。だもんで.htaccessにも以下を記載する。

# Twitter のクローラを許可
SetEnvIf User-Agent "^Twitterbot.*$" tw_crawler
Allow from env=tw_crawler

さて、ここからがまだあって上記の設定をしてもまだ自身のTwitterのTLで画像が確認できない。ここまで来ると本当に訳がわからないのだけど、以下を読んで把握。

Twitter側の設定に原因がある場合もあります。
Twitterの設定⇒『プライバシーとセキュリティ』⇒『安全性』の欄の『ツイートする画像/動画を不適切な内容を含むものとして設定する』にチェックが入っていると、画像が表示されない場合があります。

Twitterカードの画像が表示されない!確認すべき4つの原因は? | 自給人.COM | アフィリエイトで稼ぐ新時代の自給自足

さらにさらに、トップページだけが画像を拾ってくれないという事象に遭遇。これはトップページにdescriptionを設定していなかったことが原因であることが判明。これを解決するために、トップページにはサイト紹介の文章を書いて更新。

各作業の終了後、『Card Validator | Twitter Developers』で画像が表示されていなかった自身のツイートをチェックして画像が表示されることを確認。その後ブラウザでキャッシュを捨ててからアクセスしたら無事画像も表示された。

なんだこの面倒くささわ。

できることは全部やって対応した感があるのだけど、自前のサーバでブログ等を運営していて、Twitterカードがうまく表示されないとお悩みの方がおられましたら参考まで。

タイトルとURLをコピーしました