RSSリーダーのアイテムに記事サムネイルを表示する方法

僕が見たのはFeedlyとInoreaderだけで他のRSSリーダーのことはわかりませんが、enclosure にサムネイルとして表示したい画像を指定してあげたら表示されました。過去のアイテムには反映されないようなので、指定後のRSSリーダーによるフェッチから反映、と考えておくと良さそうです。

RSS2.0の仕様はこの辺にありそうです:

古い!

以下、日本語訳から引用。

記事に添付されるメディアオブジェクトを記述します。

この要素は、3 つの必須属性を持ちます。url は、エンクロージャーが位置する場所を指します。length は、それのサイズが何バイトなのかを差します。type は、それのタイプ、つまり、標準 MIME タイプを表します。

こういうサンプルが載っていました。

<enclosure> タグには必ずしも静止画が入るとは限りません。ポッドキャストの場合はここにオーディオファイルのURLが入ります。

記事ページの場合はこれがサムネイルとして利用される場合があります。さっと調べてわかったのは、特定のRSSリーダーは <description> タグ内の1枚目の画像を利用することがある、ということです。

rssの場合の指定方法

rssの場合はこのように指定します:

enclosure: {
  'url'  : 'http://www.example.com/path/to/image',
  'size' : 1668,
  'type' : 'image/jpeg'
},

urltype は良いとして sizelength に相当)はどうしたらええねんという感じですが、Readmeによるとoptionalと書いてあったので指定なしで大丈夫。

指定しなかったらlengthは 0 になりますが、RSSリーダーではちゃんと表示できていました。ちなみにはてなブログのRSSも 0 になっていました。

gatsby-plugin-feed+Contentfulの場合のクエリ

Contentfulの ContentType Post に フィールド thumbnail がある場合。このGraphQLクエリで urltype が埋められます。

allContentfulPost {
    edges {
        node {
            thumbnail {
                file {
                  url
                  contentType
                }
            }
        }
    }
}

GatsbyにRSSを追加する方法はこちらの記事をどうぞ。

gatsby-plugin-feedを使ってGatsbyサイトにRSSを追加する

この記事を書いた人

村田 智
デザイナー
詳しくみる→