AstroでRSSフィードに画像のURLを組み込む方法

AstroでRSSフィードに画像のURLを組み込む方法
この記事のポイント
  • RSSは@astrojs/rssで実装
  • Astroで画像のURLを含めたRSSフィードを生成する方法がわかる

AstroでRSSフィードを生成には@astrojs/rssを使えば簡単に実装できます。

だけど画像の配信ってどうやるんだ?と思い、調べて実装してみたので今回はその方法を紹介します。
公式サイトでは具体的な画像の配信方法が紹介されていなかったので、同じような悩みを持つ方の参考になると嬉しいです。

@astrojs/rssとは

@astrojs/rss は、AstroフレームワークでRSS フィードを生成するためのパッケージです。

このパッケージを使うこと記事や投稿のデータからRSSフィードを簡単に配信することができるようになります。

RSSフィードの追加 | Docs

@astrojs/rssでRSSを生成する

@astrojs/rssを使って最低限のRSSフィードを生成するには、公式にもあるようにこんな感じのコードになります。

rss.xml.ts
import type { APIContext } from 'astro'
import rss from '@astrojs/rss'
export async function GET(context: APIContext) {
const posts = await getCollection('post')
return rss({
title: 'Code Connect Tech Blog',
description: '合同会社コードコネクトのテックブログです',
site: context.site ?? '',
items: [] // RSSで配信するコンテンツ
}

今回の記事ではitemsで配信するコンテンツに画像を追加します。

画像のURLを含めたRSSフィードを生成する

基本的なRSSフィードの生成方法は上記のコードで説明しましたが、画像のURLを含めたRSSフィードを生成するには、xmlnsの定義とcustomDataを使います。

先のコードにxmlnsの定義とcustomDataを追加することで、RSSフィードに画像のURLを含めることができます。
実際のコードはこんな感じになります。

rss.xml.ts
{
title: 'Code Connect Tech Blog',
description: '合同会社コードコネクトのテックブログです',
site: context.site ?? '',
xmlns: {
media: 'http://search.yahoo.com/mrss/',
},
items: posts
.map((post) => {
return {
title: post.title,
description: post.description,
pubDate: post.publishedAt,
link: `/posts/${post.slug}`,
customData: `<media:content url="tech.codeconnect.co.jp/${post.thumbnail}" type="image/${post.thumbnail.split('.').pop()}" medium="image" width="1200" height="630" />`,
}
})
.filter((post) => post.pubDate)
}

まとめ

AstroでRSSフィードを生成する方法を紹介しました。

RSSを配信するなら画像は含めたいと思うのですが、公式になかったので実装方法を調べてみました。
一度理解してしまえばcustomDataの使い方にも慣れるので、画像以外のデータの配信にも応用できるかと思います。

Let's work together

私たちと一緒にWEBを作りませんか?

コードコネクトでは共にWEBを作るメンバーを募集しています。
プロダクトマネージャー、メディアマネージャー、デザイナー、エンジニア、ライター様々な分野のメンバーの参加をお待ちしています!

ご興味あれば、ぜひ弊社のサイトからご連絡ください。

Related Posts

Collaborative Innovation
for Your Growth

合同会社コードコネクトはフロントエンドを中心としたWeb開発を得意としています。
このようなシステム開発にご興味のある方、またはお困りの方はお気軽にお問い合わせください。

  • JamstackをベースとしたWebサイトの構築
  • Reactなどを用いたアプリケーションの開発
  • 運用に耐えられるメンテナンス性を考慮したプロダクト開発
  • モダンで運用可能な開発環境の構築