AstroのRSSで画像を表示させる方法
このブログのRSSはどれくらい使用者がいるのか気になり、筆者が使っているRSSフィードリーダーInoreaderで確認してみました。
2025年9月3日時点のInoreader上では8人の方が登録してくださっているようです。ありがたいことです。確認していませんが他のRSSフィードリーダーでもきっといますよね（いたらうれしい）。
確認中に気になったのが、このブログはサムネイルが表示されていない点です。
画像が表示されるように改善したのでその対応を書いておきます。
バージョンまとめ
この記事を書いている（2025年9月3日）時点での、関係ライブラリのバージョンを一応書いておきます。
- メタフレームワーク：Astro v5.11
- RSS生成ライブラリ：@astrojs/rss v4.0.12
原因と対応
筆者はてっきり「OGP画像を勝手に拾ってくれるものだ」と思っていたのですが、違いました。画像を表示させるには、RSSの中でenclosureタグを書く必要がありました。
<item> <title>tmuxのステータスライン設定方法！〜カスタマイズしやすいテンプレ付き〜</title> <link>https://eiji.page/blog/tmux-status-line</link> <guid isPermaLink="true">https://eiji.page/blog/tmux-status-line</guid> <pubDate>Sun, 24 Aug 2025 00:00:00 GMT</pubDate> <enclosure url="https://eiji.page/og/tmux-status-line.png" length="0" type="image/png"/></item>@astrojs/rssで対応させる
筆者がRSSの生成に@astrojs/rssを使っています。@astrojs/rssだとgetRssStringのitems.enclosureで画像を指定できます。筆者の場合はOGP画像を使いまわすことにしました。
import { getRssString } from "@astrojs/rss";import { fetchPosts } from "~/utils/blog";import { METADATA, SITE } from "~/utils/config";import { getPermalink } from "~/utils/permalinks";
export const GET = async () => { const posts = await fetchPosts();
const rss = await getRssString({ title: `${SITE.name}’s Blog`, description: METADATA?.description || "", site: import.meta.env.SITE,
items: posts.map((post) => ({ link: getPermalink(post.permalink, "post"), title: post.title, description: post.excerpt, pubDate: post.publishDate, // OGP画像をRSSフィードに追加 enclosure: { url: new URL(`/og/${post.id}.png`, import.meta.env.SITE).toString(), type: "image/png", length: 0, }, })),
trailingSlash: SITE.trailingSlash, });
return new Response(rss, { headers: { "Content-Type": "application/xml", }, });};lengthは0でも表示できるようです（参考）。
余談ですが筆者はブログを作る時にAstroWindをテンプレートとして使いました。
もう一度Inoreaderで見てみる
今度はちゃんと表示されるようになりました。
今回の調査・対応はAIに任せたのですがすぐに解決できたので助かりました。