RSSのアイコンが表示されなかった時の忘備録

はじめに

自分で作成したアプリからRSSを発行する際、そのリンクをFeedlyやfeederなどのRSSリーダーに登録してみると、アイコンが表示されない問題に遭遇しました。

前提条件

前提として、ステージング環境にデプロイ済みで、URLも発行されています。
そして、favicon.icoも存在しています。

最初のRSS

最初のRSSは次のように作成していました。

ここでは、<link>タグやgeneratorタグにhttp://example.comというURLを指定していますが、実際にはまだ登録されていない本番環境で使用予定のドメインを使用していました。

<rss version="2.0">
  <channel>
    <title>たかぎとねこのRSSフィード</title>
    <link>http://example.com/takagimeow/rss.xml</link>
    <description>This RSS feed is generated by takagimeow</description>
    <lastBuildDate>Sun, 05 Mar 2023 15:49:45 GMT</lastBuildDate>
    <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
    <generator>http://example.com</generator>
    <copyright>Copyright©️ 2023 takagimeow</copyright>
  </channel>
</rss>

<image>タグを追加

次に、<image>タグを追加してみました。この<image>タグでは実際に参照可能な画像のURLを指定しています。ただ、<link>タグや、<generator>タグに指定しているドメインとしては、まだ登録されていないドメインを指定していました。

そして<image >タグは指定したものの、この場合もアイコンは表示されませんでした。

<rss version="2.0">
  <channel>
    <title>たかぎとねこのRSSフィード</title>
    <link>http://example.com/takagimeow/rss.xml</link>
    <description>This RSS feed is generated by takagimeow</description>
    <lastBuildDate>Sun, 05 Mar 2023 15:49:45 GMT</lastBuildDate>
    <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
    <generator>http://example.com</generator>
    <image>
      <title>たかぎとねこのRSSフィード</title>
      <url>http://{REAL WORLD DOMAIN}/favicon.png</url>
      <link>http://example.com/takagimeow/rss.xml</link>
    </image>
    <copyright>Copyright©️ 2023 takagimeow</copyright>
  </channel>
</rss>

正しいリンクを<link>タグに指定した

そこで、<link>タグや<generator>タグに、実際に登録されているドメインを指定してみました。

Remixを使って開発していたため、requestからURLインスタンスを作成して、そのoriginを動的に取得しています。

export const loader = async ({ request }: LoaderArgs) => {
  ...
  const url = new URL(request.url);
  const origin = url.origin;
  ...
}

そして、<link>タグや<generator>タグに、取得したoriginを指定してみました。

その結果、FeedlyやfeederなどのRSSリーダーにリンクを登録した際に、アイコンが表示されるようになりました。

<rss version="2.0">
  <channel>
    <title>たかぎとねこのRSSフィード</title>
    <link>http://{REAL WORLD DOMAIN}/takagimeow/rss.xml</link>
    <description>This RSS feed is generated by takagimeow</description>
    <lastBuildDate>Sun, 05 Mar 2023 15:49:45 GMT</lastBuildDate>
    <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
    <generator>http://{REAL WORLD DOMAIN}</generator>
    <image>
      <title>たかぎとねこのRSSフィード</title>
      <url>http://{REAL WORLD DOMAIN}/favicon.png</url>
      <link>http://{REAL WORLD DOMAIN}/takagimeow/rss.xml</link>
    </image>
    <copyright>Copyright©️ 2023 takagimeow</copyright>
  </channel>
</rss>

以上の内容から、おそらく<link>タグに指定しているURLをもとにファビコンが取得されて、アイコンとして表示されているのではないかと思います。

なので、これらの値は適切に設定しておく必要がありますので、リーダーなどでアイコンを表示したい場合はご注意ください。