Feedlyでトップ画像だけが表示されないを解決@nuxt.js

FeedlyというでRSSサービスを利用しています。 Feedly. Read more, know more. ここには自身のブログも設定して、RSSリーダーでの見え方がどんな感じかをチェックしています。

先日、RSS2.0から、ATOMにフィードのフォーマットを変更しました。

これを機に、以前から気になっていた問題に対処してみました。

ヒーローイメージが表示されないのはなぜだ

これはRSS2.0時代から思っていたのですが、ヒーローイメージに設定している画像が、Feedlyで表示されないのです。

ヒーローイメージとは、記事の一番上にある画像で、記事そのものの内容を示す画像のことを言います。

一覧ではサムネイルが出るはずで、記事内の一番上に表示されてほしい。 ところは、ヒーローイメージは表示されないのです。

Feedlyの仕様としては、ATOMフィードの中の<content></contet>内のイメージタグ（<img>）を表示しているようです。

contentの中にイメージタグがあればOK

僕の場合、Markdownの先頭に色々とパラメータを書いているのですが、記事のヒーローイメージはここで設定しています。

ATOMフィードの<content></contet>内には単純に記事だけが入っています。 つまり、ヒーローイメージを設定したイメージタグは含まれていなかった のです。

bodyHtmlにヒーローイメージを突っ込む

さて、これを表示されるように調整します。 元々の記事には影響を与えず、フィードのみに挿入されるように処理を施してみました。 こんな感じで。

  const heroImg = domain + 'img/blog/' + article.img
  const bodyHtml = '<img src="' + heroImg + '">' + article.bodyHtml

Markdownで書かれた内容が処理されて、htmlになった文字列が格納された変数である、bodyHtml。 このbodyHtmlの先頭に、ヒーローイメージをimgタグにして突っ込むだけという感じです。

これで<content>の中に、ヒーローイメージを設定したimgタグを挿入することができました。

まとめ：feedlyでも快適に読んでもらえるように

細かい仕様にも目を向けなくてはいけないという、面倒なところでした。 やってみたら簡単なんですけどね。

逆に、この細やかに調整できるところが、CMSではなくてnuxt/vueを使うメリットでもあります。

このブログの記事は、Feedly内で全ての記事を読めるようにコンテンツを挿入しています。 Feedlyユーザーとしては、いちいち遷移しないと読めないのは面倒です。

こういった部分でも、UXを向上できる施策は、どんどん導入していきたいと思いいます。

この他に、良いアイデアを見つけた方は、twitterなどで是非お教えくださいね。