SEO for Tumblr Blogs

Tumblr is a superb platform for publishing a blog.

However, it’s had something of a reputation for encouraging content to be very poorly optimised; as a result, Tumblr blogs don’t tend to receive as much organic search traffic as they could do.

This post will aim to change that, and demonstrate how you can use Tumblr to set up a new blog really easily, and with pretty good on-page SEO.

Download the Themes

These themes are free to download, use and modify. (You can visit the original designers from the links at the end of this post.)

Download A Brand New Day theme Download Brain Itches theme

Live Demos: I’ve set up Tumblr blogs to show off the optimized themes here:

Mixed reviews about Tumblr

If I had to identify a few of the main features that make Tumblr so great, they’d be:
  • it is painfully easy to create new posts;
  • they have great (and of course, easy) reblogging / ‘i-like-this’ features that turn a bunch of disparate streams into a community;
  • creating themes for the site is within the grasp of any html/css developer, so there is a good collection of styles and themes available;
  • you can use your own domain name for your Tumblr blog.
However, it’s been discussed quite widely that Tumblr is bad at SEO. I’m going to propose a way of using Tumblr from a best practice SEO viewpoint that will mean:
  • your Tumblr blog should now receive more visitors (from the search engines)
or
  • if you want to set up a blog to attract links, and need something really easy to post to (imagine your CEO is going to be contributing content!) then Tumblr could now be the right answer.

Best Practice SEO

The rest of this post looks at how to customize any Tumblr theme to be optimised for SEO.

We have to begin with a bunch of ‘Best Practice SEO’ hard truths:
  • each post should have be available at a unique location
  • each page should have a <title> and <h1> that contains the most important information / keywords relevant to that page
  • the keywords should also be available in the URL if possible
  • each post should be linked to, so that Google can find it, index it, and display it in search results (a benefit of properly linking to each post is that regular users who want to share a post are more likely to link directly to that post, rather than just linking to your front page)
  • you should link to each post using the most important keywords - this will probably be the title, so use that to link to the post
  • if you link to a page twice from the same page, Google only takes notice of the first link - so make sure that’s the one with keywords in (rather than ‘permalink’ or ‘3 comments’ etc)
  • the meta description is often used by google as the snippet it displays in the search results. If there’s no meta description, it will take the most appropriate part of the page
  • the content of each page should be unique, and the title and meta description of each page should also be different
  • your HTML should be as semantic as possible.
Also, from an broader internet marketing perspective, links to submit / vote for a post on Social Media sites will help your content be seen more widely.

The Science Bit

This section covers the rules-of-engagement & code snippets to make a Tumblr theme more SEO friendly. (I’ve got some fully optimised theme examples later in the post.)

Settings & Coding

Under the ‘Advanced Settings’ menu, turn on the ‘Use Descriptive URLs’ option, to allow you to include some keywords in your permalink URL. Make sure you add a few words (such as the post title) in this field when creating each post.

Further down on that menu, double check that the ‘Allow search engines to index your tumblelog’ and ‘Ping the Blogosphere’ options are both ticked.

From the ‘semantic HTML’ point of view: make sure your theme uses real HTML elements: <p>, <div>, <span>, <h1>, <h2>, <em>, <strong> etc. (One of my favourite themes uses <n1> and <n2> as headers, and uses <i> and <b> when <em> and <strong> should be used in preference.)

Head Section

In the <head> section of your theme, make sure that the <title> tag contains the post title, if one exists:
<title>{block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}</title>
Still in the <head> section, there’s no great way to provide separate text for the meta description, so if one exists in the theme: remove it. You’ll get better snippets in the search results this way, I promise.

The tag you’re looking to remove will look something like this:

<meta name=“description” content=“My blog is great.” />
You should also register your blog with Google Webmaster Central. To verify your blog, you’ll be given a snippet of HTML to paste in the head section of the page.

HTML Body

On the front page of your blog, the name of the blog is the most important thing there, so you’ll want to put that in an H1 tag. When viewing other page on the site, there will be other more important text (the post title, typically) so you’ll want the blog name to be an <h2> on other pages. This code does that for you:
{block:IndexPage}<h1 class=“blogtitle”><a class=“default” href=“/”>{Title}</a></h1>{/block:IndexPage}
{block:PermalinkPage}<h2 class=“blogtitle”><a class=“default” href=“/”>{Title}</a></h2>{/block:PermalinkPage}

Now you just need to update your CSS to display h1.blogtitle and h2.blogtitle in the same way.

NB: I’ve made sure that the title links back to the front page of the blog. You should also try to create themes so that this heading is the first link to the front page. This will make sure that the anchor text being passed to the blog’s main page it the blog title, rather than some navigational term, such as ‘Home’.

You’ll want to do a similar thing on text post pages. You, or the blog maintainer, should make sure to always add a title when you create text posts. Here, the post title should be <h2> when it appears on an index page, <h1> when it’s on a permalink page:

{block:Title}
	{block:IndexPage}<h2><a href=“{Permalink}”>{Title}</a></h2>{/block:IndexPage}
	{block:PermalinkPage}<h1>{Title}</h1>{/block:PermalinkPage
{/block:Title}

Notice that I’ve also made the index page’s post title a link to the post. Again, you’ll now want to style these headings to appear in a similar, appropriate way.

Most of the other post types (photo, quote, link, audio, video) don’t offer the option of adding a title to the page. Not cool, Tumblr. For this reason, I’d have to advice not to use any of the post types except text.

This will come as a bit of a shock, particularly to seasoned Tumblr users. If you want to post a video just grab the embed code from Youtube (or wherever the video is hosted) and paste that into your post content. For images, just upload them to Imgur.com and it will automatically give you an HTML snippet that can be pasted into the post.

I appreciate that this breaks some of Tumblr’s nice features (automatic image sizes, video thumbnails), but while Tumblr don’t offer optional titles for these posts, then I can’t recommend using them.

If you absolutely have to use video/image posts (for instance: you have an account that already has lots of them) then you should create a fake title for the post. This solution isn’t great, as there’s no opportunity to include keywords in the title.

For example:

{block:IndexPage}
	<h2><a href=“{Permalink}”>Photo: {DayOfMonth}<sup>{DayOfMonthSuffix}</sup> {ShortMonth} ‘{ShortYear}</a></h2>
	<div class=“imageHolder”><a href=“{Permalink}”><img src=“{PhotoURL-500}” alt=“{PhotoAlt}” /></a></div>
{/block:IndexPage}
{block:PermalinkPage}
	<h1>Photo: {DayOfMonth}<sup>{DayOfMonthSuffix}</sup> {ShortMonth} ‘{ShortYear}</h1>
	<div class=“imageHolder”>{LinkOpenTag}<img src=“{PhotoURL-500}” alt=“{PhotoAlt}” />{LinkCloseTag}</div>
{/block:PermalinkPage}

This will create a title based on the date the photo was taken and use the approprate H tag. It will also make the image on the index page a link through to the permalink page.

You should do a similar thing with video posts.

Finally, I’m going to use the Social Bookmaking tool from AddThis.com. You should include the following at the end of the ‘posts’ section:

<div class=“sharethis”>
	<a href=“http://www.addthis.com/bookmark.php” onmouseover=“return addthis_open(this, ‘’, ‘{Permalink}’, ‘{block:Title}{Title}{/block:Title}’)” onmouseout=“addthis_close()” onclick=“return addthis_sendto()”><img src=“http://s7.addthis.com/static/btn/lg-share-en.gif” width=“125” height=“16” alt=“Bookmark and Share” style=“border:0”/></a>
	<script type=“text/javascript”>var addthis_options = ‘email, favorites, twitter, facebook, delicious, digg, reddit, stumbleupon, tumblr, more’;</script>
	<script type=“text/javascript” src=“http://s7.addthis.com/js/250/addthis_widget.js”></script>
</div>

The ShareThis Customisation Help pages will show you how to customise the button further.

Thanks

The themes that have been optimised for this post are the original work of:
About the author
Rob Ousbey

Rob Ousbey

Rob joined Distilled’s London office in 2008 as an SEO Consultant. Over the years, he’s developed and executed SEO strategy for clients from small businesses to large organizations, and managed Distilled’s Reputation Management projects, where he’s...   read more