テキスト投稿を使うべきか、画像投稿を使うべきか

tumblrカスタマイズをやっていて時々迷うのが、投稿タイプとして、テキスト投稿を使うか・写真投稿を使うか、というところです。

「写真を投稿するなら写真で、テキストならテキストなんじゃないの?」 と思うかもしれないですが、そう単純でもなく。
テキスト投稿でも、「埋め込み画像」として画像をいくらでも追加できるし、
写真投稿でも、「キャプション」としていくらでもテキストが記述できてしまうのです。
(もっと言えば、写真投稿のキャプションに埋め込み画像いれることもできる…)

しかしながら、画像の取り扱いや、単独で取り出せる情報のパターンなどで、何点か注意すべき差異があるので、まとめてみました。

Photo (PhotoSet)

◯ 画像の画質を指定して埋め込める

{PhotoURL-100}
{PhotoURL-250}
{PhotoURL-400}
{PhotoURL-500}
{PhotoURL-HighRes}

といった感じで、いくつかのサイズを指定して画像URLをとってくることが可能。
500px以上の高画質写真を使っている場合は、HighResを使う。

◯ OGP画像の設定が容易

(容易って感じがしないサンプルだけど) こんなかんじ。

{block:PermalinkPage}
  {block:Posts}
    {block:Photo}
      <!-- ogp from photo post -->
      <meta property="og:image" content="{PhotoURL-HighRes}" />
    {/block:Photo}
    {block:PhotoSet}
      <!-- ogp from photoset post -->
      {block:Photos}
        <meta property="og:image" content="{PhotoURL-HighRes}" />
      {/block:Photos}
    {/block:PhotoSet}
  {/block:Posts}
{/block:PermalinkPage}

× タイトルがひっこぬけない

{Caption}内のテキストとして、タイトルっぽいものを作ることはできるけど(太字とかで)、その部分を単独で、HTMLとして引っこ抜くことはできない。
そのため、title要素やog:titleにそれらを設定するのは難しい。

OGP対応としては、{Caption}をまるごとog:descriptionに入れてあげるのがまぁ無難かなぁと思っている。

Text

◯ titleがある

{Title}で記事のタイトルだけ引っこ抜ける。
というか、記事にタイトルが付けられるのは、テキスト投稿とリンク投稿のみ。

△ 投稿内の画像をOGP画像にはできない

テキスト本文({Body})から、画像の部分だけを引っこ抜くということはできないので、埋め込んだ画像だけどog:imageに設定する、などということは難しい。

ただし、og:imageを設定せず、ふつうのimg要素として入っていれば、実質OGP画像として使われるというケースも多いので、あんまり問題にはならないかも。

△ 画像サイズは、縦横500px以内に制限される

テキスト投稿内に画像を埋め込む場合、画像はtumblr側でリサイズされてしまう。
場合によっては致命的。

まとめ

• tumblrを使う場合、 og:titleもog:imageも完璧に指定することはできない 、ということを念頭に置くべし
  • (ただしog:imageを明示的に指定しなくてもよいケースなら問題なし)
• 画像を500px以上で出したいときには写真投稿を使うべし

参考

• Creating a custom HTML theme | Tumblr