【ブログ】twitterでアイキャッチを正しく表示する方法 ~cardvalidatorではわからない ~


こんにちは、temuです。

いままで、僕のtwitterをみてくれてた人ならわかると思うんですが、twitterに表示されるブログ記事のアイキャッチ画像がいつも同じになっていました。

あれこれ検索して原因がずっとわかっていなかったのですが、やっとその原因がわかりました。

そこで、今回僕が陥ったtwitter cardの設定の失敗とその解決策について書いていこうとおもいます。

twitter card 失敗の原因

今回の失敗が起きた原因はパーマリンクの設定にありました。

僕が使っているのはwordpressですので、今回はwordpressで進めていきます。

パーマリンクは簡単に言うと、上記のようにブログの記事の各ページに飛ぶことができるように設定するURLです。

僕の場合だと記事ごとにパーマリンクを毎回設定するのが面倒くさいと思っていたので、自分のブログのURLのあとに記事の題名が続いたものが自動でパーマリンクになるように設定していました。

これが、今回の失敗の一番の原因でした。

そのようにすると、日本の大学生向けに記事を作っているわけですから題名は日本語になります。

これによって、パーマリンクは日本語になるのでURLが日本語が入ったものになってしまいました。

そうするとツイッターでは以下のように表示されました。

これをツイッターにのせたとき、自分のブログまではとぶのですが、直接記事までは飛ばないという現象がおきました。

上記の写真を見てもらえばわかるのですが、リンクがhttps://temutemu.comまでしかつながっていないので各記事まで飛ばないのは当たり前でした。

twitter card 設定の解決策

解決策は簡単でした。

いままで、日本語混じりであったパーマリンクを全て英語の表記にしてあげればよかったのです。

こうしてあげることによって↓

ツイッターカードできれいに表示されました↓

原因がわからなかった理由

発見が遅れた原因についてもすこし書いていきます。

今回の失敗がなかなか解決しなかったのには、twitter card validatorの仕様に理由がありました。

twitter card validatorとは、そのサイトにURLを打ち込むことで実際にtwitterに表示される形式を事前に画面に表示してくれるサイトです。

ツイッターにアイキャッチ画像がきれいに表示されない場合の多くの原因が、ブログの方でツイッター設定を上手くしていないなどです。

そこで多くの記事であげられている解決策としてtwitter card validatorを用いる方法があるとありました。

(twitter card validatorは以下のリンクから見ることができます)

https://cards-dev.twitter.com/validator

実際そのような失敗を起こしている場合だと下記のようにエラー表示が出てすぐにわかります。

しかし、今回の場合ではツイッターカードバリテーターではそのようなエラー表記はありませんでした。

つまり、設定の問題ではなかったということです。

実際に、横のプレビューでもしっかりと反映されてました。

このようなtwitter card validatorではしっかりと表示されているのに実際のtwitterではそれが反映されないという現象によって、問題の解決が遅れました。

最後に

最後まで読んでくださりありがとうございました。twitter card の設定方法について詳しく書いている記事は多くありましたがアイキャッチ画像がきちんと表示されない原因について書いているのは少なかったので、今回の記事が参考になってくれたらうれしいです。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です