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.
