WEB製作Blog記事をLINEで共有するとヒドイ画像を引用されてしまうので、どうやってLINEがWEB画像を収集しているのか調べてみた前回の記事。テストページにアクセス元解析phpコードを書き加え、LINEのクローラー(WEB情報収集ロボット)がアクセスしに来るのを待ち構えていたら、まさかのfacebookを名乗るクローラーが網にかかってビックリ仰天!!というのがココまでのあらすじです。protocolという規格に沿って、ロボット向けのお手紙を書く実験をしてみたいと思います。protocol上記サイトが、OGPと呼ばれるロボット向けのお手紙の書き方の説明ページのようです。「例えばロック音楽のWEBサイトなら、こんな風にロボットにWEB内容を知らせてね!」とサンプルコードが記載されています。要約すると、WEBページのHTMLヘッダー内に下記の手順でページの概略を追記してやればいいみたいです。content="ページの種類。/>テストページを作ってみる早速上記の要領でテストページその2を作ってみました。↑見た目は前回と全く同じ画像が3つ並んだページですが、ヘッダー部分にOGPに沿ってロボット向けのお手紙が書いてあります。</body></html>前回、LINEクローラーはページ内で一番最初の画像を選んで引用していました。そこで今回はog:imageタグで2つ目の画像を引用するよう指定してみます。これで2つ目の画像が引用されれば、LINEクローラーはOGPを読んでくれるということになります。(OGPの画像URLは絶対パスで記載しなければならないようです。)同様に、WEBページに実際に書かれている記事の内容と、og:descriptionタグに書かれている内容を違うものにして、LINEクローラーが本文とOGPのどちらを読んで引用しているのかも合わせて確認してみることにします。OGPをLINEクローラーに読み込ませてみるポチっとな。おお!!ちゃんとOGPで指定した通りに2番目の画像を拾っています!そして実際のWEBページに書かれた本文を無視して、OGPで書いた文章を引用しています。実験結果のまとめWEBページに下記の3つを記載しておけば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のドメインが全て自動で書き換えられるのです。メディアライブラリ外から画像を読み込んでいたサイドバーを除いて・・・!!遂に解明!LINEクローラー謎挙動の原因そう、つまりLINEクローラーは画像URLのドメインを確認していたのです。サイドバー以外(つまりメディアライブラリ内)の画像URLが、Photonによって分散サーバのドメインに書き換えられてしまったため引用から除外してしまったようです。それで、たまたまサイドバー内の一番最初にあった画像、つまりロゴ画像を拾って表示してしまっていたのです。本物のfacebookクローラーは賢いので、画像URLが分散サーバー上であろうがきちんと記事中の画像を拾って読み込んでくれます。ここがLINEクローラーとfacebookクローラーの挙動が違う原因でした。得られた教訓をさっそく活かしてみるという訳で、当Blogも頑張ってテーマファイルを改造してみました。記事に設定されたアイキャッチ画像のURLを取り出して、OGPでクローラーにお知らせするphpコードをヘッダーに埋め込みました。その際、以下のサイトの情報がとっても参考になりました。og:descriptionタグを生成する箇所以外はほぼそのままサンプルコードを使わせて頂いています。