[勝手に解答] Q. Twitterのogpが表示されない事象

2020年9月11日

テクノロジー 勝手に解答

玄人エンジニアの、ユゲタです。 初心者用の質問サイトは、どんな玄人でも解答しずらいという質問が数多くあります。 中には、サイト運営事務職から、「該当するソースコード」「自分で試した内容」「質問内容の画面キャプチャ」などを記述するようなモノもありますが、質問する人の気持はわかるけど、超能力者でないと答えられないという内容は、少なく有りません。 今回、そんなサイトで有名なTeratailを見ていた時に、少し気になる質問があったので、そのサイトではなく、自分のブログで考察してみたいと思います。

質問内容

「OGPを設定しているがツイート上にカードが表示されない」 ※内容は、そのまま転機することがサイト規約に反するので、リンクに言って御覧ください。 要約すると、twitterのツィートに自分の作っているサイトのurlを貼り付けても画像つきのsummary-cardが表示されないという事らしいです。 確かに、内容を見てみると、OGP指定はキチンとされているように見えるし、不思議な点としては、twitter-card確認サイトというのがあり、こちらでURLを入力したら、card表示の確認ができるチェッカーツールですが、 同じURLをここに入れてみると表示がされて、twitter本番では、表示されないという事象なのだそうです。 ちなみに、herokuサイトにサイトをアップしてみると、正常に表示されるとのことで、確かに不思議・・・

考察

この質問には、実際のOGP記述のソースコードが書かれていますが、実際の内容は伏せ字になっています。 少なくても、ここでは、ダミーデータを作ってでも、再現性が確認できる必要があると思うんですが、仕事で使っている場合は会社の情報漏えいにつながるというリスクもあるのだが、なにぶん再現確認ができない時点で、憶測でしか解答ができないというリスクがある。 そこで、僕なりに憶測で推測してみたいと思います。

# 憶測その1

別のサイト(ドメイン)では正常に動作して、対象のサイト(ドメイン)だけNGになる場合、twitter本番におけるドメインかURLのブラックリストに入っているパターン。 cardチェッカーは、簡易チェックとしてこうしたブラックリスト連携がされておらず、本番のみのセキュリティにしているという事は考えられないだろうか? でも、この憶測は、twitterのブラックリストなどの存在可否も含めて、重複憶測になっているので、「そうだよね」とは言いづらい・・・

# 憶測その2

リダイレクトが発生するサイトになっていて、twitterチェッカーと本番において、リダイレクトエラーなどが起きて、差分が発生してしまっている。 サーバーリダイレクトなのか、htmlやphpなどによるリダイレクトなのかは分からないけど、リダイレクトがアクセス毎にムラのある結果表示になっているのであれば、チェッカーを数回試してみると、表示されない事象も確認できるのではないか?

# 憶測その3

サーバーの反応速度が極端に遅くなっていて、ページの表示速度にムラがでているため、たまたま認識できないタイムアウトになる、表示速度だった。 これもチェッカーで数回試せば、認識できないパターンも確認できるので、是非試してもらいたい。

# 憶測その4

質問内容に、ソースの一部を切り出してherokuサイトで確認したと書かれていて、切り出していない他の箇所のソースでエラーが発生しているという事は考えられないだろうか?

# 憶測その5

また問題のサイトはIPアドレスアクセスとのことで、せめてテストのサブドメインぐらいは用意してほしいと考えたのだが、非SSLかつIPアドレスで、その点は、こちらで確認したところ、問題なくチェッカーでは表示されました。 もしかしたら、ogpでの記述と、実際に表示されているurlが違っているため、不正URLと判断されているのでは?

# 憶測その6

チェッカーは、データキャッシュされているようなので、一度正常に通ったデータを手放さなくなります。 チェッカーで過去に一度でも正常に通った場合、その後問題があっても、正常表示され続けている可能性もありますね。 その場合、今回の事象に合致しますね。 こんな場合は、URLを変更して確認する以外に方法がないかも。

もっとこんな情報があったら良かったのに

憶測ばかり書き綴っても、ここでは結論は導き出せないので、再現確認ができる状態にしてくれると、こちらであらゆる検証をやって、「これでどうだ!」的な解答を提示できるのだが、それができない状況の場合は、せめてできないケースのtwitterでの画面キャプチャとか(公開したくない箇所はマスクをかけて)、 エラーが出る際の、サーバー側のアクセスログ、 エラーが出ているページのブラウザのデバッグコンソールで何かしらのJSエラーが出ていれば、その内容を記載。 使用していたWEBブラウザの種類とバージョン。 自分がこの人の立場だったら、そういう箇所を元に調査をするのにな〜と考えてしまった。 あと、確認してもらいたいことは、 twitter本番にアップする時の文字はちゃんと半角英数字になっていたかどうか? 前後に不要なスペースなどが含まれていないか?(エクセルなどのセルからコピーすると、ゴミ文字が入ってしまう) url事態がコピーする際にエスケープ処理されていて、正規の文字列になっていないなど・・・

自分なりの結論

こういう事象というのは、おそらくどこかのポイントでの凡ミスが原因であることがほとんどだ。 本人は、チェッカーとtwitter本番で送信しているURLが同じと思っていても、実際は本番では、http://が抜けていたなどの凡ミスなどは、よくある話だ。 個人的には、そうした凡ミス系の事象であると考えられるので、誰も答えられずに回答数がゼロ件になっても仕方がないのかもしれない。 このサイトで初心者マークはついてはいないが、頑張れ!質問者君!