Skip to content

Pat Dryburgh

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:


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.


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.


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. 
Permalink for “Descriptive Page Titles in Tumblr” published on date_to_rfc822