LINEのメッセージにURLを貼り付けて送った際にイメージやタイトルを表示する方法

AngularJSで作ったSPAサイトでページ毎にタイトルを変えているようなサイトを公開している場合、外部のサイトやサービスから呼び出された際にイメージやタイトルが表示されるようスナップショットHTMLを作成していると思います。

私もGooglebotやTwitter用にスナップショットを返すようにApacheの設定を行っていましたが、先日、LINEのメッセージを送った際にイメージやタイトルが表示されていなかったので、対応することにしました。

対応していない場合、以下のような感じで表示されます。

以下、表示するための設定や確認方法についてです。

まずはLINEからのアクセスを特定するためにユーザーエージェントを調べます。

LINEアクセス時に出力されていたログは以下の通り。

203.104.145.28 - - [09/Jul/2017:22:38:49 +0900] "GET /baiken/under400/search/list/ HTTP/1.1" 206 11448 "-" "facebookexternalhit/1.1;line-poker/1.0"

ユーザーエージェントは一番最後の情報になるので、この場合、

facebookexternalhit/1.1;line-poker/1.0

となります。

「line-poker」は分かりますが、なぜ「facebookexternalhit」とフェイスブックの名称が使われているのかと思いましたが、フェイスブック対応済みのサイトならLINE用に設定を追加しなくても表示されることを狙ったものっぽいです。

上記で確認したユーザーエージェント（facebookexternalhitやline-poker）を使って、Apacheの設定を行います。

「.htaccess」ファイルを開いて、スナップショットHTMLを返したいページ用に以下の設定を追加します。

RewriteCond %{QUERY_STRING} ^_escaped_fragment_=$ [OR]
RewriteCond %{HTTP_USER_AGENT} (Twitterbot|facebookexternalhit|line-poker)
RewriteCond %{REQUEST_URI} ^/baiken/under400/search/list/$
RewriteRule ^(.*)$ baiken/search_list_under400.html [L]

「_escaped_fragment_」や「Twitterbot」は元々設定していた項目になります。詳しくはAngularJSを利用する場合のSEO対策、ツイッターカードの対応を参照してください。

設定後の確認ですが、Twitterのようなチェック用のサイトがなく、誰かにLINEでメッセージを送らないといけないのかと思いましたが、自分一人のグループを作ればメモ代わりに自分だけが見れるメッセージを送信できるようです。（LINEでメモ代わりに自分宛にメッセージを送る方法 | NEZU.log）

グループ作成後に確認してみたら、以下のように表示されました。

確認時の注意点として、対応前と後の確認URLが同じ場合、キャッシュを見に行ってしまっているのか何度やってもちゃんと表示されず、別のURLで試してみたら問題なく表示されるといったことがありました。