にしし ふぁくとりー(西村文宏 個人サイト)

Presented by Nishishi via Movable Type. Last Updated: 2017/11/17. 16:07:43.

HTTPS接続の場合でだけTwitter Cardが表示されない問題

うちのウェブサイト内では、多くのページにOGPとTwitter Cardの記述を含めてあります。なのでツイートにURLが含められた際には、概要文とOGP画像が表示されるはずです。
ところが、なぜか、たまにTwitter Cardが表示されない問題があって不思議に思っていました。
よくよく眺めてみると、

  • HTTP接続(=http://~でのアクセス)では、問題なくTwitter Cardは表示されるが、
  • HTTPS接続(=https://~でのアクセス)では、Twitter Cardが表示されない

……ということが分かりました。
HTTPS接続に問題があるのかというとそういうわけではなく、OGP:Imageで指定した画像は、ちゃんとHTTPSでも閲覧できます。もちろんページそのものもHTTPSでちゃんと閲覧できます。
にもかかわらず、Twitter Cardが認識されません。

以下はそれを解決した記録です。

HTTPからHTTPSへ移行させつつあり、ページ自体はどちらでもアクセス可能な状態

うちのウェブサイトでは、全体をHTTP接続からHTTPS接続に移行しつつある途中の段階です。まだHTTPSで全ページが確実に問題なく閲覧できるかどうかを確認していないので、今はHTTP接続でもHTTPS接続でもどちらでもアクセスできる状態になっています。
そのため、Twitterで言及される際にも、http://~のURLが書かれることもあれば、https://~のURLが書かれることもあります。
そして、同一ページであっても、

  • http://~のURLだと、Twitter Cardはちゃんと正しく表示されるのに、
  • https://~のURLだと、Twitter Cardは一切表示されない(画像だけでなく概要文も出ない)

……という現象がありました。

Twitter公式のCard Validatorで調べてみると……

Twitterは、Twitter Cardの表示確認ができる「Card validator」という機能を公式に用意しています。
ここで、HTTPSのURLを入力して「Preview card」ボタンを押すと、

ERROR: Fetching the page failed because other errors.

と表示されてしまって、エラーになります。
ページが読み込めないのだということは分かりますが、肝心のページが読めない原因が「other errors」としか書かれていないので、さっぱり特定できません。(-_-)
しかし、HTTPのURLを入力して「Preview card」ボタンを押すと、

INFO: Page fetched successfully
INFO: 17 metatags were found
INFO: twitter:card = summary tag found
INFO: Card loaded successfully

のように表示され、ちゃんと画像も概要文も表示されます。
なので、Twitter Cardの記述に原因があるわけではないことが分かります。

※そもそも、Twitter Cardの記述自体が認識できないのなら、「No card found (Card error)」などのように分かりやすいエラーが出てきます。

SSLの中間証明書がインストールされていないとTwitter Cardを読んでくれないっぽい?

さて、いろいろググって情報を探してみたところ、さくらインターネットのウェブサーバを使っている場合でSSL証明書を使ってHTTPS化をしているとき、中間証明書がインストールされていない場合にはTwitter Cardを読んでくれない、という情報を見つけました。

ツイッターカードが表示されない-SSLの中間証明書が原因かも?(KOHIMOTO LABO)

早速、ウェブサーバのコントロールパネルにログインして調べてみたところ、「中間証明書がインストールされていません」と表示が出ていました。
そもそも中間証明書なるモノの存在にこのとき初めて気付きました。(^_^;;;
中間証明書がなくてもブラウザ上からのHTTPS接続には何ら問題がなかったので、たぶん気にも留めていなかったのでしょう。

中間証明書がインストールされていません

で、そもそも中間証明書って何なんだ? というところから不明だったんですけども。
さくらインターネットのヘルプ「【ジオトラスト】SSLサーバ証明書のインストール手順:中間CA証明書の取得」を読むと、SSL証明書のように各サイト個別の証明書ではなく認証機関固有の証明書のようで、私が利用しているRapid SSLの場合は、GeoTrustのウェブサイトで公開されている中間証明書をそのままコピー&ペーストすれば良いようでした。

というわけで早速中間証明書をコピー&ペーストしてインストール。
すると、送信から1分も待つことなく、インストール直後から、Twitter Card Validatorで「Page fetched successfully」とテストが通るようになりました。
あっさりです。

中間証明書の文字列を貼り付けて送信

HTTPS接続でTwitter Cardが表示されないのは、SSL中間証明書がインストールされていなかったから!

というわけで、Twitter Cardが表示されないのは、中間証明書のインストール不備が原因だったと確定しました。

これまで、ウェブページの閲覧に関してはHTTPS接続でもちゃんと通信できていたことを考えると、この中間証明書がなくてもSSL証明書の有効性には問題はないってことですよね?
でも、Twitter Cardではエラーになると。
Twitterは、HTTPSでの接続時に中間証明書の存在をチェックするから、ということ?

まあ何にせよ、これでTwitter Cardが表示されない問題は解決しました。(^_^;)

コメント

コメント数: 0件

コメント投稿欄 この日記に対するコメント投稿を歓迎します。



※本文中にURLは書けません。(書くと投稿が拒否されますのでご注意下さい。)

※ご投稿頂いた内容は、掲載前に管理者が確認する設定にしている場合があります。たいていは数日以内には表示されるはずですので、気長にお待ち願います。m(_ _)m

著者紹介


にしし(西村文宏)

にししでございます。本書いたり記事書いたりしてます。あと萌えたり。著書5冊発売中です(Web製作系4冊+小説1冊)。著書や記事は「西村文宏」名義。記事は主にAll Aboutで連載。本の最新刊は2011年3月に発売されたライトノベルでございますよ。

Twitter:にしし/西村文宏
にしし/西村文宏 on facebook にしし/西村文宏 on mixi にしし/西村文宏 on Google+ フォローはお気軽に!

にしし(西村文宏)連絡先
☕ コーヒーをおごる

著書一覧と詳細

関連する記事など

※下記には、本サイト内外の関連記事などが8本くらい自動で表示されています。

にししふぁくとりー Sakura scope内限定での主要なカテゴリ

--- 当サイト内を検索 ---