SNS

【解決!】Twitterカード表示されない問題

Twitterカード 表示されない

https://aokibosai.jp

お悩みタマスケ
お悩みタマスケ
急にTwitterカードが表示されなくなった!…なんで!?物凄く困る!!(泣)
SNSに強みのあるブロガーにとってTwitterカードが表示されないのは死活問題ですから、全力で解決策を探しますよね。
管理人
泣きタマスケ
泣きタマスケ
悠長なこと言ってないで、その解決策を教えてくれよ‥。
はい、結論から言うと「エックスサーバーに問い合わせた」ことで無事に解決しました。そこまで紆余曲折あり膨大な時間を浪費しましたので、
管理人
こぼしタマスケ
こぼしタマスケ
わっ!何やそれ‥めっちゃ簡単そうやん。
ただ、そこまで紆余曲折あり膨大な時間を浪費した為、同様の症状に悩まされている方に以下の経験を共有したいのです!
管理人

 

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

 

◎ Twitterカードが出ない!?

Twitterカードとは、ツイートにURLを入力した際に表示される画像付きの概要を指します。

Twitterカード

カッパ
カッパ
コレ表示されんとURLだけになったら『ブログ見よっと♪』って人の数もガタ落ちするよね…。
この興味を惹き付ける画像って “アイキャッチ” っていうんですけど、ページを見てもらう為に物凄く大事な要素なんです。
管理人

 

◎ ググった解決法3つ

Card validator

Twitter側のキャッシュを削除する為のツール「Card validator」を使うと、以下の様な表示に‥。

Twitter Card validator

絶望タマスケ
絶望タマスケ
もう『この画面‥何回みんねん!(泣)』って感じでしたよね…。
何らかの原因で設定が変わったのかと疑って、初めてバックアップデータから復元するとかやったけど‥改善されなかったよね(※所要時間およそ半日)。
管理人

 

テーマ側の設定を見直す

当ブログはAFFINGERという有名テーマを使っているので、そのTwitter設定について確認しました。

AFFINGER5 Twitter設定

AFFINGER5 管理 ☞ SNS ☞ Twitter設定‥と進んで確認しましたが、何の問題もありませんでした。

Ctrl+UでHTMLソースを表示して、Ctrl+Fで「Twitter」と検索してみてもTwitterカードの設定が入っていました。

HTMLソース Twitterカード

 

中間証明書の確認‥!?

ググると「中間証明書が原因で‥」という記事が幾つも出てきます。

SSL証明書 Twitterカード

タコスケ
タコスケ
コレについては正味わけわかめ&意味プーさんやったので、特に『ふ~ん』位の感じでした。
ただ一つ「証明書‥怪しいんじゃね!?」という発想には近づいたのかも知れません。
管理人

 

◎ Facebookのデベロッパーツールを確認

右往左往していると、Facebookについては以前まで表示されていたOGPも真っ黒に変わっていたのを発見しました。

OGPとは「Open Graph Protcol」の略で、FacebookやTwitterなどのSNSでシェアした際に、設定したWEBページのタイトルやイメージ画像、詳細などを正しく伝えるためのhtml要素です。

Facebookデベロッパー自体に登録していなかったので、アカウント接続してシェアデバッカーを確認した結果‥。

Facebook デベロッパーツール

実況タマスケ
実況タマスケ
おーっと!SSL認証に問題があるみたいだぁーっ!!
確信しましたね、これを解決せにゃならんと。
管理人

念の為、SSLチェッカーで証明書の状況を確認すると‥。

SSLチェッカー

審判タマスケ
審判タマスケ
ハイ、こいつ犯人です!!
さて、問題はコレどうやって直せばいいんだって事です。
管理人

 

◎ つよつよプログラマーな親友に相談

以上の経緯を、中学からの親友にLINEしてみた結果‥。

聖くん LINE

歌いタマスケ
歌いタマスケ
夜中に、いきなりさ♪‥SSLについてLINEん♪
ついでやから親友の聖くんの吹き出しアイコン作って喋らせてみますか。
管理人
聖くん
聖くん
はろー
よし、次行きますか。(笑)
管理人

 

◎ エックスサーバーに問合せ

エックスサーバーのサーバーパネル上ではSSL認証の設定は行っていた為、問合せに直行しました。

エックスサーバー 問い合わせ

その後、すぐにエックスサーバーの担当者さんから以下の様なメールが返ってきました。

お問い合わせいただき、誠にありがとうございます。

この度は、お客様へご不便をお掛けしており申し訳ございません。

お客様よりのご連絡をうけまして、対象コモンネームの

SSL証明書について補正を実施いたしました。

お手数ではございますがエラーが解消されているかについて、お客様側でもご確認くださいますようお願いいたします。

Card validatorで確認すると‥未だ表示されない!(泣)

‥ってことで再度お問い合わせ。

そして数日後、以下の様なメールが返ってきました。

お待たせいたしました。

改めて、弊社担当部署にてSSL証明書の補正が完了していることを確認いたしました。

お手数ですがTwitterカードのご状況など、再度ご確認くださいますでしょうか。

お手数ではございますが、上記ご確認の程よろしくお願いいたします。

再びCard validatorで確認すると‥無事に表示されるようになったのです!

Card validator

卒業タマスケ
卒業タマスケ
これでやっとTwitter上で【ブログ更新】の投稿ができる‥!
長らく自分で試行錯誤したけども、結局のところ自分では解決できない類いのトラブルだったってワケです。
管理人

つよつよプログラマーの聖くんにLINEしたら、以下の返答が‥。

聖くんLINEパート2

電話タマスケ
電話タマスケ
ちょっと頑張ってムリだったら、いくら時間かけても無駄ってパターンあるので早めにサーバー側に問い合わせた方がいい事例ですな。
まぁ今回メチャクチャ試行錯誤したのでバックアップから復元する方法とか知れたし、コードがどうなっているとか学べたけど‥と時間かけて遠回りした感が凄いッ!(泣)
管理人
聖くん
聖くん
そんじゃーねー

 

◎ まとめ

  • SNSに強みのあるブロガーにとって死活問題であるTwitterカードが表示されない現象は、「エックスサーバーに問い合わせた」ことで無事に解決していた。
  • Twitterカード表示されない問題の解決まで紆余曲折あり膨大な時間を浪費した為、同様の症状に悩まされている方に自身の経験を共有した。
  • ちょっと頑張ってムリだったら、いくら時間かけても無駄ってパターンあるので早めにサーバー側に問い合わせた方がいい事例であった。
  • この記事を書いた人

管理人

【経歴】鈴鹿高専材料工学科 ⇒ 静岡大学工学部(3年次編入学) ⇒ 院 ⇒ 鈴与㈱ ⇒ 青木防災㈱
【保有資格】消防設備士全類・危険物取扱者全類・第二種電気工事士・工事担任者(AI・DD総合種)・第三種電気主任技術者
【主な活動】月刊誌「電気と工事(オーム社)」コラム執筆・ブログ(月間40万PV)・Twitter企業アカウント(フォロワー数3.7万人)の運営

-SNS