「Twitterカードが表示されない」を解決!ブログのアイキャッチ画像に問題ありかも

「Twitterカードが表示されない」を解決!ブログのアイキャッチ画像に問題ありかも

Twitterカードが表示されない! という問題が発生していましたが、原因がわかったので解決方法とともにしたためておきます。

ツイッターからのブログへのアクセスは一部のブロガーさんを除いて私も含めて微々たるものかもしれません。

しかし自分のブログ記事をツイートしたり、他の方にツイートしてもらうときにTwitterカードが正しく表示されたほうが格好がつくじゃないですか。

しかもTwitterカードがあるほうがクリック率がアップするとのことなので、問題は早いうちに摘み取っておくのが得策ですから。

Twitterカードが表示されない問題

私はたまに、ブログの記事をアップしてそれをTwitterで共有するために自分の手で記事のツイートをしています。

ところが最近ちょっとした不具合に見舞われていました。

『Twitterカード』が表示されないんです。

Twitterのタイムラインを見ているとありますよね。外部リンクに付属されているこのような画像。これをTwitterカードと呼びます。

正しく表示されたTwitterカード

ブログの場合は一般的にアイキャッチ画像がTwitterカードに使われます。

でもこのTwitterカードが表示されないんですよね。なにかがおかしい。

ちなみにTwitterカードが表示されていない状態がこちら。画像の部分が見事に表示されていません。

正しく表示されないTwitterカード

原因の調査

「Twitter側の不具合? それとも自分のブログがおかしい?」

はじめはどちらに問題があるのか切り分けができていませんでした。

不具合が出始めていたのがちょうどWordPressが5.0にアップデートされた時期だったので「これが原因? 」とも思いました。

Card ValidatorでTwitterカードが正しく表示されるかチェック

そのためまずはTwitterの公式サービスであるCard Validatorでチェックしてみました。

Card ValidatorでURLを入力するとどのようにTwitterカードが表示されるのかを確認することができます。

その結果、なにかのエラーが発生しているわけではないけれどTwitterカードが表示されないということがわかりました。

ブログ記事のTwitterカード用のmetaタグが正しく記載されているかチェック

エラーが発生していない証拠に、ブログのソースコードを見てみても不具合が起こるような記述はありません。

ブログ記事のheadタグ内にこちらのTwitterカード用のmetaタグが記載されていればTwitterカードが表示されますが、ソースコードにはちゃんとmetaタグの記載がありましたから。

Twitterカード用のmetaタグ
<meta name="twitter:card" content="summary_large_image" />
WordPressテーマ『SANGO』

私が使わせてもらっているWordPressテーマのSANGOにはTwitterカード用のmetaタグなどが記載されているので自分で改めて記載する必要がないから楽ちんです。

OGP一括確認ツールでも確認

他に手がかりがないかと思ってTwitterをチェックしてみたら、Twitterカードなどの情報を一括確認できるOGP一括確認ツールというのを見つけたので、こちらを使ってみることにしました。

そうしたら「Twitterカード」の項目はmetaタグどおりで正しいのですが、気になるところを見つけました。

それは「Open Graph protocol」の「og:image」です。

こちらにはTwitterカードに使われる画像が表示されるようなのですがこれが表示されていません。

これってつまり、アイキャッチ画像になんらかの問題があるからTwitterカードが正しく表示されないのでは? と疑問を抱いたのをきっかけに原因が判明したのです。。

Twitterカードが正しく表示されない原因が判明

Twitterカードが正しく表示されない原因がようやくわかりました。

それは、ブログでは画像ファイルを相対パスで指定していたのが原因でした。

画像の指定を相対パスにするとWordPressでは次のような記載になります。

画像の相対パス
/wp-content/uploads/~

ちなみに標準の指定である絶対パスだと私のブログでは次のような記載になります。

画像の絶対パス
https://bechilog.com/wp-content/uploads/~

これってよくよく考えれてみればTwitterカードが正しく表示されなくなるのも理解できます。

だって、相対パスというのは私のブログの環境下でのみ画像ファイルを正しく参照できる形式であって、これを相対パスのままツイッターにデータ送信をしても、ツイッターからしてみたら「その画像はどこにあるの?」状態になってしまうからです。

絶対パスならばツイッターでも“画像のありか”が正しく認識できるので、Twitterカードも正しく表示されるんですね。

いやはや、相対パス指定にしてしまうなんて浅はかでした。でもなぜ相対パスに変更したのか……その理由がなんだったのか忘れてしまいました…。

理由を忘れてしまったのもなかなか原因が判明しなかった理由かもしれません。反省せねば…。

おわりに

WordPressで画像の指定を相対パスにわざわざ変更する人はあまり多くないと思います。

でもとりあえず相対パス指定を絶対パス指定に戻してあげたらTwitterカードが正しく表示されるようになったことをしたためておきました。

ツイッターのせいにしてごめんなさい。

それではまた!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください