LINEのクローラーロボットを捕まえてみた　その２

2016年4月28日 5,105 views WEB製作

Blog記事をLINEで共有するとヒドイ画像を引用されてしまうので、どうやってLINEがWEB画像を収集しているのか調べてみた前回の記事。

テストページにアクセス元解析phpコードを書き加え、LINEのクローラー（WEB情報収集ロボット）がアクセスしに来るのを待ち構えていたら、まさかのfacebookを名乗るクローラーが網にかかってビックリ仰天！！というのがココまでのあらすじです。

そこで今回は、facebookが提唱しているOpen Graph protocolという規格に沿って、ロボット向けのお手紙を書く実験をしてみたいと思います。果たしてLINEのクローラーは、facebookクローラーを名乗るにふさわしくOGPの記載通りに動いてくれるのでしょうか？

OGP（Open Graph protocol）って何？

■ The Open Graph protocol

上記サイトが、OGPと呼ばれるロボット向けのお手紙の書き方の説明ページのようです。「例えばロック音楽のWEBサイトなら、こんな風にロボットにWEB内容を知らせてね！」とサンプルコードが記載されています。

要約すると、WEBページのHTMLヘッダー内に下記の手順でページの概略を追記してやればいいみたいです。

<meta property="og:image" content="引用する画像のURL" />
<meta property="og:title" content="ページのタイトル" />
<meta property="og:url" content="ページのURL" />
<meta property="og:description" content="ページの内容">
<meta property="og:type" content="ページの種類。ここでは「article」" />

テストページを作ってみる

早速上記の要領でテストページその２を作ってみました。

↑見た目は前回と全く同じ画像が３つ並んだページですが、ヘッダー部分にOGPに沿ってロボット向けのお手紙が書いてあります。↓

<html prefix="og: http://ogp.me/ns#">
  <head>
    <title>テスト2</title>
    <meta property="og:title" content="LINE表示テスト" />
    <meta property="og:type" content="article" />
    <meta property="og:image" content="http://・・・絶対パス・・・/test2.png" />
    <meta property="og:description" content="LINEのクローラー挙動テストその２">
  </head>
  <body>
    <h1>テスト2</h1>
    <img src="test1.png"><br>
    LINEのサムネイル表示テスト<br>
    <img src="test2.png"><br>
    <br>
    <img src="test3.png"><br>
  </body>
</html>

前回、LINEクローラーはページ内で一番最初の画像を選んで引用していました。

そこで今回はog:imageタグで２つ目の画像を引用するよう指定してみます。これで２つ目の画像が引用されれば、LINEクローラーはOGPを読んでくれるということになります。（OGPの画像URLは絶対パスで記載しなければならないようです。）

同様に、WEBページに実際に書かれている記事の内容と、og:descriptionタグに書かれている内容を違うものにして、LINEクローラーが本文とOGPのどちらを読んで引用しているのかも合わせて確認してみることにします。

OGPをLINEクローラーに読み込ませてみる

ポチっとな。

おお！！

ちゃんとOGPで指定した通りに２番目の画像を拾っています！
そして実際のWEBページに書かれた本文を無視して、OGPで書いた文章を引用しています。

実験結果のまとめ

WEBページに下記の３つを記載しておけばLINEでプレビューされる内容をきちんとコントロールできるようです。

LINEに引用される画像を指定するには「og:image」タグを記載。
※注意：URLは絶対パスで記載！！

LINEに引用されるタイトルを指定するには「og:title」タグを記載。

LINEに引用される本文を指定するには「og:description」タグを記載。

という訳でLINEのクローラーはfacebookクローラーを名乗るだけあって、ちゃんとOGPを読んでそのとおりにWEBページを引用してくれるという事が分かりました。

未だ残るLINEクローラーの謎・・・

しかし当BlogのようにOGPが記載されていないWEBページとなると、LINEクローラーとfacebookクローラーの挙動は異なります。

前々回の記事をLINE共有した際は、最初に出てくるヘッダー画像でもアイキャッチ画像でもなく、何故かサイドバーのロゴ画像がチョイスされてしまいました。

これが何故なのかを考えながらwordpressの設定をいじっていると。。。

jetpackプラグインの中の、WEB表示を高速化する「Photon」という機能をOFFにした途端にLINEクローラーがヘッダー画像を拾いに行くようになりました！

このPhoton、ブログ内の画像ファイルを「CDN」と呼ばれる分散サーバーを介して配信することでWEBの読み込みを速くするという機能なのですが、ヨソのサーバーから画像を読み込むため画像URLのドメインが全て自動で書き換えられるのです。メディアライブラリ外から画像を読み込んでいたサイドバーを除いて・・・！！