【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 

フィードに関する技術的な要件 - パブリッシャー センター ヘルプ