これまでfeedlyのカード表示などでなぜかサムネイル画像が表示されない記事があった問題を解消したのでメモしておきます。
サムネイル非表示の問題
上の画像はこのブログをfeedlyのカード形式で見たものなのですが、なぜかサムネイル画像が表示されているものと、されていないモノがあるのがおわかりいただけると思います。
調べてみると、表示されている画像は「Amazonから引っ張ってきている画像」で、表示されていない画像は「私がFlickrにあげて使っている画像」でした。
今となってみると、この「Amazon画像はOKだけど、Flickr画像はダメ」という認識が問題解決を厄介にしてしまった感があります。
対策1 Flickrの画像権限を変更
このブログはWordPressで構築しているのですが、基本的に私は画像関係はWordPressを使って本サーバーには置かずにFlickrにあげて使っています。
そこで、疑わしきはFlickrの画像権限（Viewing this photo）と思い、PrivateになっているのをPublicに変更してみた。
すると・・・なんにも変化無しでした。
対策2 og:imageのチェック
今やFacebookやTwitterなどのソーシャルメディアなどでブログ記事が共有されるときにこちらの意図せぬ表示をふせぐためにogpを設定することが主流となっています。
このブログでもog:imageを設定していたので、これがらみで何か不都合が起こっているのではないかと仮説をたてて調べてみました。
が、確かにog:imageは設定していましたが、そもそもAmazonからの画像は表示されているわけであり、og:imageに問題があるのであればそれらの画像も表示されないはずなのです（苦笑）。
人は目の前の問題に夢中になるとそういった事実から目を背けて調査してしまうから面白いものです。
もちろん、og:imageに何の問題もありませんでした。
feedlyではogp関連のタグは表示に関係しないことを逆に突き止める結果になりましたが。
対策3 RSSの調査
結果としてはこれが原因でした。
RSS内に画像が入っているとfeedlyではそれを表示するので、RSS内にfeedlyで表示させたい画像情報を含めました。
具体的な方法は、WordPressをお使いの方でアイキャッチをお使いの方は以下をfunctions.phpに書くことでRSS内に画像を含めることができるようになります。
function rss_post_thumbnail($content) {
global $post;
if(has_post_thumbnail($post->ID)) {
$content = '<p>' . get_the_post_thumbnail($post->ID) . '</p>' . $content;
}
return $content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');
私のように、外部画像を使って記事の先頭画像をサムネイルに使っている方であれば以下のような感じでいけます。
function rss_post_thumbnail($content) {
global $post;
if( preg_match( '/<img.*?src=(["\'])(.+?)\1.*?>/i', $post->post_content, $imgurl ) ) {
$img = '<p><img loading="lazy" src="'.$imgurl[2].'"></p>';
} else {
$img = '<img loading="lazy" src="http://placehold.jp/100/1D1C22/ffffff/800x600.png?text=KuroBox">';
}
return $img .$content;
}
add_filter('the_excerpt_rss', 'rss_post_thumbnail');
add_filter('the_content_feed', 'rss_post_thumbnail');
これらをfunctions.phpに書き、どの記事でも良いので記事を更新して（記事を更新しないとRSSは更新されません）feedlyを見てみると・・・
やったー！
左上２つの記事のようにfeedlyにサムネイル画像を表示することに成功しました。
どうやら、これまでの記事情報に関してはfeedly側でキャッシュされてしまっているようなので画像表示されるようにはなりません（多分）。今後更新していく記事に関しては表示されるようになった、ということですね。
一点、腑に落ちないのが、これまではRSSに画像が無かったわけですし、他のブログを調べてみるとFeedlyはRSSに画像がなければ自動で記事から先頭画像を取得して表示する仕様のようです。
にもかかわらず、対策実行前はなぜかFlickrの画像は先頭画像にあっても表示されず、Amazonの画像は表示されていました。
この問題の原因については解決していないのですが、今回は「Feedlyにサムネイル画像を表示させること」が目的だったので、ここまでにしておきます。
どうやら昔のWordPressと現在のWordPressでは吐き出すRSSの仕様が異なっていて、以前作ったサイトなどではこの問題は発生していないようでした。
同じ問題でお悩みの方は、RSSフィードをチェックしてみてください。