ASTERISK WORKS

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

2016年4月28日
 
785 views

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

 

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

 

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

 

OGP(Open Graph protocol)って何?

スクリーンショット 2016-04-27 16.00.22

The Open Graph protocol

 

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

 

 

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

 

 

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

 

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

スクリーンショット 2016-04-27 14.38.13

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

 

 

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

 

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

 

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

 

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

 

IMG_7351

ポチっとな。

 

IMG_7352

 

おお!!

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

 

 

実験結果のまとめ

 

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

 

IMG_7353 のコピー

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

 

 

IMG_7353 のコピー2

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

 

 

IMG_7353 のコピー3

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

 

 

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

 

 

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

 

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

 

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

 

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

 

スクリーンショット 2016-04-27 23.36.30

 

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

 

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

 

 

遂に解明!LINEクローラー謎挙動の原因

 

そう、つまりLINEクローラーは画像URLのドメインを確認していたのです。

 

サイドバー以外の画像URLが、Photonによって分散サーバのドメインに書き換えられてしまったため引用から除外してしまったようです。それで、たまたまサイドバー内の一番最初にあった画像、つまりロゴ画像を拾って表示してしまっていたのです。

 

一方本物のfacebookクローラーは賢いので、画像URLが分散サーバー上であろうがきちんと記事中の画像を拾って読み込んでくれます。ここがLINEクローラーとfacebookクローラーの挙動が違う原因でした。

 

 

得られた教訓をさっそく活かしてみる

 

という訳で、当Blogも頑張ってテーマファイルを改造してみました。

 

スクリーンショット 2016-04-21 14.14.17

 

 

記事に設定されたアイキャッチ画像のURLを取り出して、OGPでクローラーにお知らせするphpコードをヘッダーに埋め込みました。

 

 

その際、以下のサイトの情報がとっても参考になりました。つーか、og:descriptionタグを生成する箇所以外はほぼそのままサンプルコードを使わせて頂いています。多謝!

 

■ 【WordPress】Facebook OGPプラグインの使用を止めて自前で設定したら意図通りの画像で正しくシェアされるようになった

 

 

ちょっとお馬鹿なLINEクローラーですが、OGPさえきちんと記載してあげれば、例え画像ファイルが分散サーバー上にあろうとも拾いに行ってくれるようになります!

 

 

関連記事:

 

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

 

広告                   
カテゴリー:WEB製作
タグ   :