Feedlyのサムネイルをカスタマイズする方法

#Astro #HowTo #Web開発

投稿日： 2023年12月22日 13:20 更新日： 2024年02月07日 13:52

この記事では、Feedlyのフィード画面に表示されるサムネイルをカスタマイズする方法をまとめます。

Feedlyのfaviconをカスタマイズする方法は、こちらの記事で解説しています。

Feedlyのfaviconをカスタマイズする方法

この記事では、Feedlyのフィード選択画面に表示されるfaviconをカスタマイズする方法をまとめます。

Feedlyのデフォルトのサムネイル

Feedlyは、記事のサムネイルをRSS内で明示的に指定しなくても、自動的にサムネイルを選択してくれる場合があります。公式ブログによると、Feedlyのサムネイルの選択方法は次のようになっています。

If the content of the story in the feed has an img element with a webfeedsFeaturedVisual classname, that image will be selected as the featured image.

If the first img in the story has a height and width greater than 450 pixels, that first image will be selected as the featured image. If not, Feedly will try to pick the largest image in the story.

If the feed is partial, the Feedly poller will look up in the web page and see if the webpage includes open graph or Twitter card metadata and use that as the featured visual.

—— 10 ways to optimize your feed for feedly – Feedly Blog

このように、Feedlyは次の順番でサムネイルを選択します。

webfeedsFeaturedVisualというクラス名が付いたimg要素
記事内の最初のimg要素で、高さと幅が450ピクセルより大きいもの
OGPやTwitterカードのメタデータ

Feedlyが自動でサムネイルを選択してくれない場合や、選択されたサムネイルが気に入らない場合は、次の方法でサムネイルをカスタマイズできます。

サムネイルをカスタマイズする方法

Feedlyでサムネイルをカスタマイズするには、RSSフィードのitem要素の中にenclosure要素を作成します。コード中の［］で囲まれた部分は、［］を削除したうえで実際の値に置き換えてください。

1
<rss xmlns:content="http://purl.org/rss/1.0/modules/content/"  xmlns:webfeeds="http://webfeeds.org/rss/1.0" version="2.0">
2
    <!-- ...フィード名や概要などの設定部分は省略 -->
3
    <item>
4
        <title>［記事のタイトル］</title>
5
        <link>［記事のURL］</link>
6
        <guid isPermaLink="true">
7
            ［記事のURL］</guid>
8
        <description>［記事の説明］</description>
9
        <pubDate>［記事の公開日］</pubDate>
10
        <enclosure url="［サムネイルのURL］" length="［サムネイルのファイルサイズ（バイト単位）］"
11
            type="［サムネイル画像のMIMEタイプ］" />
12
    </item>
13
</rss>

このRSSフィードをFeedlyに登録すると、enclosure要素で指定したサムネイルが表示されます。

Astroでの実装方法

このブログでは、静的サイトジェネレーターのAstroを使用しています。Astroの@astrojs/rssパッケージを使用したRSSフィードでサムネイルをカスタマイズするには、たとえば次のようにします。

1
import rss from "@astrojs/rss";
2

3
export const GET = async () => {
4
    return rss({
5
        title: "RSSフィードのタイトル",
6
        description: "RSSフィードの概要",
7
        site: import.meta.env.SITE,
8
        items: [
9
            {
10
                title: "［記事のタイトル］",
11
                pubDate: "［記事の公開日］",
12
                description: "［記事の概要］",
13
                link: "［記事のURL］",
14
                enclosure: {
15
                    url: "［サムネイルのURL］",
16
                    type: "［サムネイル画像のMIMEタイプ］",
17
                    length: 0
18
                }
19
            },
20
            // ...他の記事
21
        ],
22
        customData: "<webfeeds:icon>［faviconのURL］</webfeeds:icon>",
23
        xmlns: {
24
            webfeeds: "http://webfeeds.org/rss/1.0"
25
        }
26
    });
27
};