I hadn’t planned on writing so soon on another Tumblr theme development topic, but I have noticed a problem on several Tumblr sites that is really easy to fix and has benefits both for your readers and search engines as well.

What’s In A Name?

The manner in which Tumblr allows you to name your website pages in the <title> html tag is rather confusing. In the custom theme docs, the only Tumblr code used to describe the page’s title is {Title} which only displays the blog’s title, not the title of the actual page your reader may be on.1

This is how Tumblr indicates a page’s title in each of its examples in the custom theme docs:

<title>{Title}</title>

A Little Bit Closer

Later on in the theme docs, Tumblr indicates that in order to display a post’s title on a page, you use the combination of the {block:PostTitle} tag (to determine if there is in fact a post title) and the {PostTitle} tags.

{block:PostTitle}
    <h2>{PostTitle}</h2>
{/block:PostTitle}

What they don’t indicate is that this combination of tags can also be used in the <title> HTML tag, as follows:

<title>{block:PostTitle}{PostTitle} | {/block:PostTitle}{Title}</title>2

While this format is better than what we started with, it unfortunately only covers one specific type of Tumblr post: an article with a title. This means that the following still go without descriptive page titles:

  • photo posts
  • quote posts
  • link posts
  • chat posts
  • audio posts
  • video posts

The Solution

So what is the solution to this problem? You want a descriptive title for your blog, but the {PostTitle} tag isn’t cutting it.

Enter: {PostSummary}

Somewhat ambiguously, Tumblr includes a tag that will generate a title if one exists, and will fall back on a short summary of the post’s content if a title does not exist. This is perfect for all of the post types listed above, as well as articles which do not have a specified title.

On my blog, my <title> tag looks like this:

<title>{block:PostSummary}{PostSummary} | {/block:PostSummary}{Title}</title>

If you look around my blog (which I hope you do!) you will see that every page on this blog has a descriptive title in the browser title bar. This also translates into more descriptive titles for Google and other search engines when they index my website.

I hope this post helps you create a more pleasing reading experience for your readers. If you have any questions or any other feedback don’t hesitate to hit me up on Twitter or via email.

Addendum

I have written an addendum to this post, which includes Garrett Murray’s argument against using the method I’ve described above to title Tumblr pages. I have to say, it made me rethink using this method. I strongly suggest checking out the addendum and making your own informed decision from there.

  1. A rather surprising and notable instance of this issue is on Garrett Murray’s Maniacal Rage blog. 
  2. Note that I put the vertical bar with surrounding spaces inside the {block:PostTitle} tags. This is so the vertical bar doesn’t display when on the home page of your blog. You are welcome to use whatever format you’d like to display your page’s title.