tumblr

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

More than 3 years have passed since last update.

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以上で出したいときには写真投稿を使うべし


参考