【Gatsby】RSSフィードをサムネイル画像付きで配信する
Gatsby製サイトでも、画像を付けてRSS配信ができました。
こんな感じです。文字だけより映えます✨
検索しても意外と出てこなくて苦労したので、表示したい画像のURLをRSSフィードに入れて配信する方法を紹介します。
RSSとは
RSS フィードは、ブログやオンライン マガジンなど、お気に入りの Web サイトの最新情報を常に入手できる簡単な方法です。 サイトが RSS フィードを提供していれば、投稿があると通知が届き、投稿の概要または投稿全文を読むことができます。
RSS フィードとは - Microsoft Support
「2000年代に流行した古い技術」という印象が拭いきれませんが、まだまだ現役です!
むしろ情報に溢れた現代だからこそ、RSSリーダーのフィルター機能などを使ってニュースの取捨選択ができて重宝する、なんて意見もあります。
実装コストとRSSから流入するユーザー数を考えると、報われない苦労に感じるかもしれません。
しかしブログ記事を更新するたびに認知してくれる『質の良い読者様』を獲得できる可能性が格段に上がりますよ!
……上がると信じています🥺
https://microayatron.com/feed/rss.xml を登録していってね!!!!!
設定
以下の環境を前提に進めていきます。
- Gatsby 4.1.0
- gatsby-starter-default
- CMS: microCMS
まずはgatsby-plugin-feedというパッケージをインストールします。Gatsby製サイト用のRSSフィード作成パッケージです。
yarn add gatsby-plugin-feed
記事が増えた場合にもgatsby build
することにより、自動でrss.xmlに追記してくれます。
gatsby-config.js
gatsby-plugin-feedを使用するため、gatsby-config.jsの編集をします。
残念ながら公式コピペだけでは、画像付きでのRSSフィード配信が実現できません。
まずはソースの全容です。
てっとり早く動かしたい方は、以下をコピペのうえご自身のサイトに合わせて書き換えてください。
module.exports = {
siteMetadata: {
title: `trog`,
description: `アラサープログラマの雑記ブログ。ときどき、ハンドメイド。ぬいぐるみと過ごすふわふわな毎日。`,
siteUrl: `https://microayatron.com/`,
plugins: [
{
resolve: `gatsby-plugin-feed`,
options: {
query: `
{
site {
siteMetadata {
title
description
siteUrl
site_url: siteUrl
}
}
}
`,
setup: (options) => ({ ...options, custom_namespaces: { media: "http://search.yahoo.com/mrss/", }, }),
feeds: [
{
serialize: ({ query: { site, allMicrocmsBlog } }) => {
return allMicrocmsBlog.edges.map(({ node }) => {
return {
title: node.title,
description: node.metaDescription,
date: node.publishedDate,
url: site.siteMetadata.siteUrl + '/' + node.slug,
guid:
site.siteMetadata.siteUrl + '/' + node.slug,
custom_elements: [{
"media:content": {
_attr:
{
url: node.image?.url,
width: 1920,
height: 1080,
media: "image"
}
},
}],
}
})
},
query: `
{
allMicrocmsBlog(sort: {fields: publishedDate, order: DESC}) {
edges {
node {
title
publishedDate
image {
url
}
metaDescription
slug
}
}
}
}
`,
output: "/feed/rss.xml",
title: "trog",
feed_url: "https://microayatron.com/feed/rss.xml",
site_url: "https://microayatron.com/",
},
],
},
},
]
}
この設定により、以下の項目がrss.xmlに設定できます。
- タイトル
- 投稿日時
- 説明(meta description)
- 記事のURL
- guid
- 投稿日時
- サムネイル画像のURL
siteMetaDataで指定した内容と、microCMSから取得したデータを、RSSフィードの値に使用します。
RSSリーダーに全文が表示したい場合は、公式ページに書いてあるとおり、custum_element
のcontent:encoded
にContentfulやmicroCMSから取得した記事全文を値として指定してください。
guid
guid (globally unique identifier)は記事を一意に識別する文字列です。
guid: site.siteMetadata.siteUrl + '/' + node.slug,
サムネイル画像URL
<media:content>
タグに、サムネイル画像のURLを指定します。こうすることで、たいていのRSSリーダー上で記事とあわせて画像が表示されるようになります。<media:content>
はcustom_elements
の中に定義します。必須項目はurlのみです、お好みでカスタマイズしてください。
custom_elements: [{
"media:content": {
_attr:
{
url: node.image?.url,
width: 1920,
height: 1080,
media: "image"
}
},
}],
しかしこれだけではエラーが出てrss.xmlが正しく生成できません。
error on line 1 at column 〇〇〇: Namespace prefix media on content is not defined
このエラーにあるとおり、Media RSSタグを使用するため名前空間の指定が必要です。rssタグの中で定義するこれです。
<rss xmlns:media="http://search.yahoo.com/mrss/"></rss>
gatsby-plugin-feedではcustom_namespaces
を使って、Media RSSタグを定義します。
plugins: [
{
resolve: `gatsby-plugin-feed`,
options: {
query: `(中略)`,
setup: (options) => ({ ...options, custom_namespaces: { media: "http://search.yahoo.com/mrss/", }, }),
feeds: […
生成物
出力されるrss.xmlはこんな感じです。
<rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:media="http://search.yahoo.com/mrss/" version="2.0">
<channel>
<title><![CDATA[ trog ]]></title>
<description><![CDATA[ trog ]]></description>
<link>https://microayatron.com/</link>
<generator>GatsbyJS</generator>
<lastBuildDate>Thu, 02 Jun 2022 03:05:34 GMT</lastBuildDate>
<atom:link href="https://microayatron.com/feed/rss.xml" rel="self" type="application/rss+xml" />
<item>
<title><![CDATA[ RSS配信を再開しました ]]></title>
<description><![CDATA[ RSS配信を半年ぶりに再開しました。お好きなRSSリーダーにぜひ登録を。 ]]></description>
<link>https://microayatron.com/feed</link>
<guid isPermaLink="false">https://microayatron.com/feed</guid>
<pubDate>Thu, 02 Jun 2022 03:00:00 GMT</pubDate>
<media:content url="https://images.microcms-assets.io/assets/a9ffe7eb96404d7c80dc093859029792/cc3e0c92fe8a47ef81d349ad902b58e7/67F1ED08-6A12-4C55-AA2B-9AC4D23ABEB3.png" width="1920" height="1080" media="image" />
</item>
</channel>
</rss>
outputに指定した場所にrss.xmlが出力されます。設定が完了したらgatsby build
→gatsby serve
(gatsby develop
)で確認してみてください。
* * *
文字だけの更新通知より、画像の付いた情報のほうが、興味持って押したくなるはずです。
お気に入りの画像とともに素敵なRSSライフを!!!
* * *
参考リンク:
How Add Custom Fields to Your Gatsby RSS Feed - DEV Community
gatsby-plugin-feed ignores custom_namespaces · Issue #10308 · gatsbyjs/gatsby · GitHub
フィードに関する技術的な要件 - パブリッシャー センター ヘルプ
- この記事を共有する
Webアプリケーションのプログラマ(フロントエンドエンジニア) Angular(TypeScript) / Next.js / Cypress を主に使用。
前職はピアノ技術者(調律師)。2017年からブログ「trog」を運営。
あざらしと音楽が好き。
trogではプッシュ通知機能を提供しています。
新しい記事が投稿されたタイミングで、お使いの端末にお知らせが届きます。
よければ通知設定ページから通知の許可をお願いします。