調べても同様の事例が出なかったということは誰もそんなヘマしないということなのだろうか。

LINEのOGPカード

LINEには、一部のデバイス¹においてトーク内のリンクのOGPタグを取得し、トーク内にプレビューを表示する機能があります。

例えば、このブログならこんな感じに。

対応デバイスではogpがきちんと設定できていればLINEでも同様に表示されるはず、なのですが、今回「OGPは正しく設定されてるはずなのにLINEだけ画像が表示されない」という問題が発生しました。

LINEでのみ画像が表示されない

文字の通り、LINEでのみ発生。FacebookやTwitter等では正しく表示できてい、FBのデバッガーにおいてもそれらしきエラーが出てるわけでもなく、LINEでもタイトルや概要は正しく表示されているのに、サムネイル画像のみ表示されません。
以下がそのスクリーンショット。(もちろん他のデバイスも同様に)

ogpタグに問題はなく、画像の大きさも当り障りのないサイズ。

「画像が表示されない」解決策のヒントとして示されているような項目は大体共通のもので、何れも当てはまらい。

違いは……S3にあること

同一サービス内でも、画像をアプリと同サーバーから配信していたページについてはLINE内でも画像は正しく表示できていました。それを知らされ見比べた結果がまず、「画像の配信元が違う」こと。しかし、大抵のサイトがこの手をとっていて画像をCDNで配信しているのは当たり前のことですよね。ところで、問題の画像はタイトルにもある通り、S3に置いていました。

ところで実は以前から気になってたことだったのですが、その画像を直接ブラウザで開こうとするとプレビューにならずにDLが始まります。なんでや！
……と思っていると、実はまさにこれが原因だったわけです。

試しにとある画像(jpeg)のヘッダーを見てみると、Content-Type: binary/octet-streamの値が。

S3にputする際に正しくMIMEを指定しなければbinary/octet-streamになってしまうんですね。色んな所に書いていました。

結果、ブラウザには画像として認識されずにDLされ、LINEには画像として認識されずに埋め込まれずに、などの結果を招いていたのでは。

といった仮説が出来上がりました。

仮説は出来た、試してみよう。

該当画像ファイルのMIMEがおかしいのが原因なのであれば、それを正すのみですよね。試しに1枚、以下の記事を参考にawscliを叩いてみました。

AWS CLIでS3オブジェクトのContentTypeを設定する

head-objectで変更を確認し、そして、当該ページをLINEに送ってみたところ、見事macやiOS、ChromeのLINEアプリにてサムネイルが表示できるようになっていることが確認できました。

どうやら原因はこれだったようですね。

もちろんMIMEが正しく指定されているので、ブラウザで開くといきなりDLされてしまうなんてことも起こりません。

あとは、既存のファイルのMIMEを一気に振り直し、以降のPutに際してはMIMEをきちんと指定してやるようにすることによってこの問題はひとまず解決しました。
誰だよあの実装書いたの……

まとめ

• mime(Content-Type)が不正な画像はLINEで埋め込めない
• LINE以外では一見問題ないので気付きにくい
• S3にファイルをputする際はContentTypeをきちんと指定しよう
• オブジェクトストレージはメタを別に持つ、とはこういうこと