atelier:mitsuba

i love UI/UX, Blend, XAML, Behavior, P5, oF, Web, Tangible Bits and Physical computing. なにかあればお気軽にご連絡ください。atelier@c-mitsuba.com

Cloudflareを使っていて、なぜかXとかTwitterとかいうSNSでだけ、自作サイトのOGPが表示されないときの話

うちのnamelessがしばらくOGPでてないなーって思いつつ、忙しいを言い訳にして調査する気が一切沸かずにほったらかしにしてたんだけど、諸般の事情(まだ未公開なんですが登壇依頼をいただいてnamelessの話をすることになった)でいい加減直すかってなって原因がわかったのでメモ。

年明けにサムネをjpgからwebpに完全移行してパフォーマンスチューニングしたのだけど、おそらくその時のせいか?もしかしてWebP非対応なんか?とかいろいろ実験したり調査した結果、

httpstatus.ioでStatusチェックしてたら、なんかしらんけど503が返ってくる。ブラウザでは普通に見れるのに。
httpstatus.io

で、更にいろいろ試した結果、ボットからのアクセス?はCloudflareのブラウザ整合性チェックがONになっていると503になるらしい。

で、これでいけるのではって思って次は XのCard Validatorでやってみたら、なぜかFetch Errorは変わらず。
https://cards-dev.x.com/validator

で、更に更にいろいろ試した結果、XとかTwitterとかいうやつはTLS1.2までしか対応してなくて、Cloudflare側で1.3を要求するとコケるっぽい。


この辺に気づくのにめっちゃ時間かかった、バックエンドからフロントから全部疑ったけど最終的にはCloudflareの設定だった。
せっかく裏側Azure WebAppsなんだから、WebAppsのURLで叩いてみてちゃんと動作するか確認すれば切り分け瞬殺だったのに、余計なコードめっちゃ書いてしまった。。。。

とりあえずメモとして残しとくはそうだけど、いや、イーロンTLS1.3対応しろや!の感想しかないわ(濁り目