enclosureでRSS 2.0にサムネイル画像を表示させる方法

  1. ホーム
  2. RSS
enclosureでRSS 2.0にサムネイル画像を表示させる方法

RSSにサムネイル画像を表示させる方法はいくつかありますが、まずはenclosureタグを使った方法から解説します。ちなみにRSS 2.0から対応しています。

RSSのenclosure要素とは?

画像や動画、音声などのメディアファイルを表す要素であり、item要素の中に含めることができます。

enclosureの書き方は・・・

enclosure要素はすべて必須となる3つの属性(attribute)があります。それらはlengthとtype、urlです。lengthはファイルサイズを指定します。typeはメディアファイルの形式を指定します。例えばjpgならimage/jpegなどと記述します。urlでは絶対urlを指定します。実際に書いてみると次のようになります。

<?xml version="1.0" encoding="UTF-8" ?>
<rss version="2.0">

<channel>
  <title>サンプルサイト</title>
  <link>http://xxx.com/</link>
  <description>サンプルサイトの説明文。</description>
  <item>
    <title>enclosureの書き方</title>
    <link>http://xxx.com/enclosure.html</link>
    <description>ここではenclosureの書き方を教えます。</description>
    <enclosure url="http://xxx.com/y.png" length="12345" type="image/png" />
  </item>
</channel>

</rss>

サムネイル画像が表示されない時の注意点

enclosureタグは空要素ではないので、終了タグ(閉じタグ)が必須です。閉じタグを書かないとRSSファイル自体を正常に読み込めません。それからurl属性には絶対urlを指定してください。

リンクは出てきたけど画像が表示されてないんだけど?

RSSリーダーによってはサムネイル画像へのリンクが表示されるだけで、画像そのものが埋め込まれたかのようには表示されないようです。しかしもうひとつの方法を使えば強制的に表示させることができます。

imgタグを直接書き込む方法

RSSファイルにHTMLタグのimgタグを直接書き込みます。この際に注意すべきことは、htmlで扱われる特殊文字をエスケープさせておくことです。例えば次のように。

<img src="http://xxx.com/y.png">
↑のままだと正常に読み込めない

&lt;img src=&quot;http://xxx.com/y.png&quot;&gt;
↑のように変換する必要がある
Twitter Facebook LINE はてブ