Twitterカードが表示されない！と焦った私の備忘録

日記的な何か

Twitterカードが表示されない！ちゃんと設定しているのになんでだよ！

と色々と試行錯誤を繰り返した1ヶ月、先日解決したので備忘録として記事にしておきます。

 

画像が表示されないというのはあれども、Card Validatorでは正常なのにいざ投稿すると設定通りになっていないというのは見つからなかったので苦労しました。

そもそもTwitterカードってなんぞやという方向けに、例として下は私のツイート。

 

URLをツイートしたときに、そのページがTwitterカード情報の設定がしてあると、上記のようにアイキャッチ画像＋設定した情報で表示される機能。

単につぶやくよりも、リンク先の情報がわかって便利だと思っています。

 

スポンサーリンク

まずはCard Validatorでチェック

ブログの設定自体がおかしい場合は、そりゃ表示されないということでこちらでチェック

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

おかしい場合は赤い文字のログが出るのですが、そもそも一度も見たことがないのですよね。

ちなみにこのCard Validatorでは、一度設定したTwitterカードの再設定（更新）もできるので、かなり何度も使っています。

投稿する前のチェックにもいいですね！

反映されるのにラグがあるようなのですが、先にこちらでチェックしてしまえばすぐに反映されます。

 

わかったのは設定は間違っていないということでしょうか。

しかし、この時点では設定というか、触ってすらいなかったサムネイルのサイズ（種類）が初期設定と違うのが気になっていました。

 

原因を探る

ずーっと、ずーっとこうだったのですよ！

 

引用するとわかり辛いですが、『ツイートに画像を添付してURL載せているだけ』という投稿になっていて、どうしてだろう、おかしいな？と思っていたのですが原因がわかりませんでした。

ちなみに私が使っているテンプレートはこちらです。

https://wp-simplicity.com/

 

スッキリしていて使いやすい、しかも日本語でヘルプフォーラムもしっかりしているのが好印象。

前述のCard Validatorで確認をしながら色々とやっていたのですが、ネット上で問題となっているほとんどの場合が『画像が表示されません』という問題。

そもそもTwitterカードが表示されないという点ではなかったのです。

 

ワードプレスを使ったブログの場合、不具合というとテンプレートとプラグインの干渉という可能性もあるので、テンプレートの公式で推奨されている中には無いプラグインを切ってみました。

私の場合ですが『All in One SEO Pack』と『Jetpack』です。

改めてCard Validatorで確認したところ、前述した『サムネイルが設定したサイズと違う』点が解消されていました。

 

結局なんだったのか

Simplicity自体がSEOを考慮したテンプレートなので、『All in One SEO Pack』は別に要らないかな！と思っていたのですが『Jetpack』はアクセスを見るのに使っていて削除するのは困ります。

色々といじくり、調べていた結果『Jetpack』の方でした　orz

SNS連携機能があり、その部分がSimplicityと干渉していました。

 

しかも連携機能だとTwitterカードで投稿されるのではなく、URLとアイキャッチに設定した画像で投稿されていました。

こういうのですね

なので、Simplicityでやっていることはそのままお任せして、できないところを『jetpack』にやって貰うという方針に。

プラグインの設定

 

SNSとの連携などは全部テンプレートがやってくれるので、プラグインの機能は切りました。

よくよく考えると『Jetpack』の機能は、ほぼアクセス解析しか使っていないという。

 

確認すべきだったあれこれ

結果的に不要なプラグインもなくなったりと、ブログ全体としては解決前と比べてよい方向にまとまりました。

やはり不具合があるときはプラグインを停止して調べるのが基本なのですね、先人の知恵は本当に助かります。

 

そもそも私自身が「こういう機能があるんだ！私も使いたい！」という見た目だけ気にして、どういう仕様なのかわからずに始めたのも時間がかかった要因ですね。

どういう風にツイートすればTwitterカードが表示されるのか？ということすら理解せずに、プラグインがやってくれると勝手に思い込んでいたのが一番の原因でしょう。

  • 対象のページのURLをツイートして、表示されるか確認する
  • Card Validatorでエラーがでない
  • 上記で表示された結果が設定の通りである

結局こうやって確認するのが一番早かった、という個人的な戒め。

 

投稿した時に、連携してSNSにも投稿する機能をOFFにしたので、自分でやる手間は増えました。

とはいえ自分でタイミングをコントロールできるので、そこまでの欠点ではありませんね。

今回のことは良い経験＆勉強をさせて貰いました。