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.¹

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>

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.

※ Permalink for “Descriptive Page Titles in Tumblr” published on date_to_rfc822