アイキャッチ画像関連で。
この手のサムネイル生成スクリプトは基本的に記事内の最初の画像を拾ってサムネイル化します。ですから、記事の最初にデコイとしてアイキャッチ画像を入れることでこの問題を回避できる。そう思っていたんです。でも、なぜか挙動が安定しないわけです。
どうすれば回避できるんですかねこれ。
はてなブックマークが怖い - 情報の海の漂流者
はてなブックマークのホッテントリ記事一覧を見ていると、「関係のない画像」が表示されている事がよくあります。(New)はてなブログは常にペンのロゴ画像が表示されていて、「なるほど、これも一種の宣伝方法だな」と思ったりもします。
アイキャッチ画像としてのバナー広告 でちらっとだけ書きましたが、個人的には、執筆側にしろまとめ側にしろ「記事の内容に関係のある画像が特にない場合は、無理してアイキャッチ画像を挿入しないで欲しい」と思っています。ただ、昨今のアイキャッチ画像の導入状況を見ると、恐らくは、何でもいいから画像を入れておくとアクセス数、もしくはユーザの滞在時間が増えるのだろうと推測されます（なので、関係性が薄くてもいいからとにかく画像を入れると言う流れは続くだろうと思います）。
まとめ側としてのアイキャッチ画像の選別方法
実際のところ、SoGap - ソーシャルサービス内で尖っている話題を探す でも「字が多い印象があるので、画像等を入れた方が良い」と言うアドバイスを頂いた事があって、各記事のアイキャッチ画像の選択方法は検討している課題の一つです。現状では、以下の方法で画像を選択していますが、個人的にはまぁこれ位に抑えるのがいいかなぁといった実感です。
- meta タグの og:image に指定されている画像を使用する。
- oEmbed の thumbnail_url に指定されている画像を使用する。
- URL からサムネイル画像が求められる Web サービスの場合、その画像を使用する。
以下、各項目に関してのメモ。
meta タグの og:image に指定されている画像を使用する
Facebook が流行している関係で、meta タグの og:image に記事のアイキャッチ画像を指定している Web サイトもかなり増えています。以前に調査した 人気サイト月間ランキング（2012 年 2 月）における Top100 サイトの対応状況を見ると、meta タグの og:image に記事のアイキャッチ画像を指定している Web サイトは約 30 サイトのようです（3 分の 1 は対応している）。
調査結果では、出現記事数的には上位 100 サイトで全体の 50% 強を占めていたので、単純計算では、これらの Web サイトに対応するだけで 6、7 記事に 1 記事は正確な（執筆者の望んだ）アイキャッチ画像を取得する事ができます。その他にも、ライブドアブログやはてなダイアリー等のブログサービスは OGP に対応している事が多いので、meta タグの og:image に指定されている画像を使用すると言うのは有効な手段の一つだろうと思います。
og:image に指定されている画像を使用する上で注意する点としては、このプロパティに「自サイトのロゴ画像（プロフィール画像）」が指定されている場合も多い事が挙げられます。そのため、無条件に og:image の画像を使用するといつも同じ画像が表示されてしまう可能性があります。
SoGap では、この状態になるのを防ぐ目的で（現状では）ホワイトリスト方式を取っていますが、それ以外の方法としては例えば、該当 Web サイトのトップページにアクセスして og:image を取得し、各記事の og:image と一致するかどうか（一致したらロゴ画像の可能性が高いので表示しない）で判定しても良いかもしれません。
oEmbed の thumbnail_url に指定されている画像を使用する
画像や動画を扱うような Web サイトでは、oEmbed と呼ばれる機能に対応している事が多いので、oEmbed の thumbnail_url に指定されている画像を使用する事も選択肢の一つとなります。Embedly と言う Web サービスは、多くの Web サービスの oEmbed のプロキシ的な機能を提供してくれるので、メディア系の Web サイトの場合は個々にアクセスするよりもこちら (Embedly) にアクセスした方が良い場合もあります。
oEmbed の問題点としては、http://oembed.com/ で決められているフォーマットに従ってない場合が結構多いと言うものがあります。特に、thumbnail_url はオプションと言う扱いな事もあり、設定されていないケースや thumbnail など間違った名前で設定されているケースも散見されます。
尚、Embedly は、単なるプロキシではなくこういった辺りも修正してくれるようです。例えば、Flickr に投稿された画像に対してオリジナル (Flickr) の oEmbed のレスポンスは以下になります。
{
"version":"1.0",
"type":"photo",
"width":"500",
"height":"333",
"title":"\u00a1Vamos a tomar el sol!",
"url":"http:\/\/farm8.staticflickr.com\/7056\/6958943197_1cdb44f949.jpg",
"author_name":"Yavanna Warman",
"author_url":"http:\/\/www.flickr.com\/photos\/yavannawarman\/",
"provider_name":"Flickr",
"provider_url":"http:\/\/www.flickr.com\/",
"cache_age":3600
}
これに対して、Embedly のレスポンスは以下の通りです。
{
"version": "1.0",
"type": "photo",
"width": 500,
"height": 333,
"title": "\u00a1Vamos a tomar el sol!",
"url": "http://farm8.staticflickr.com/7056/6958943197_1cdb44f949.jpg",
"description": "Os presento a",
"author_name": "Yavanna Warman",
"author_url": "http://www.flickr.com/photos/yavannawarman/",
"provider_name": "Flickr",
"provider_url": "http://www.flickr.com/",
"thumbnail_url": "http://farm8.staticflickr.com/7056/6958943197_1cdb44f949_t.jpg",
"thumbnail_width": 100,
"thumbnail_height": 67,
"cache_age": 3600
}こういった事情もあるので現状ではできれば Embedly に問い合わせた方が良いのですが、Embedly は 10,000 リクエスト/月以上は有料となるので最終的にはサイトの規模とお金次第になりそうです。
URL からサムネイル画像が求められる Web サービスの場合、その画像を使用する
これは、サムネイル画像用の URL に変換する となります。サムネイル画像用に URL に変換できるような Web サービスは、大抵の場合 oEmbed に対応しているので最終的にはこの操作は必要なくなると思うのですが、oEmbed の項目で述べたような事情があるので現状では oEmbed のレスポンスとの併用と言う形するのが良さそうです。
それ以外の方法
これ以降は自力で何らかのアルゴリズム（例えば、最初に出現した画像を使用する等）を考えて画像を取得する必要があります。例えば、GIGAZINE では preface と言うクラス名の p タグの中にアイキャッチ画像が配置されているので、こういった場合であれば容易に記事に関連した画像を取得する事ができます。ただ、HTML 的にそう言った特徴が見いだせない記事も多いので、自力で取得するのはかなり難しいと予想されます。
個人的には、自力で取得する部分に関しては「頻繁に出現する有名サイトのみ個別に対応し、それ以外は（適当な画像を抽出してみるのではなく）画像なし」と言う形でやっていく方が良いと感じています。
