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:

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

Get blog posts via email

29 Comments

  1. It will also make the image on the index page a link through to the permalink page.i am impressed.

    Thanks

    reply >
  2. Filip

    Nice guide, can you elaborate a little bit on what to write in the custom CSS to display h1.blogtitle and h2.blogtitle when talking about the HTML body part. Barely any coding knowledge here...

    reply >
  3. Resourceful information. Thanks for sharing the post

    reply >
  4. rob

    hi,

    the theory all makes perfect sense,

    but I can't figure out where to paste the new code.

    where ever I put it, then something weird happens to the tumblr blog.

    don't suppose you could give any further advice, I am trying to past it into the "Brain Itches" theme.

    thanks

    reply >
  5. rob

    actually to be more specific, it is the code that turns post title into

    <

    h1> on the post pages and

    <

    h2> on the home page that I can't place.

    thanks

    reply >
    • Great work Rob. Usually we see posts all around the net talking about strategies and tips for blogging. But they are all general and not specific for a singular one platform, and that too Tumblr. Loved your work. Will help the new Tumblrs as well as the older ones in their strategies. Although coding section i think could have been elaborated more.

  6. HM

    Thanks for this information, it is just what I was looking for to help with my first Tumblr account :)

    reply >
  7. Is there any way to make the URL structure a little bit nicer: E.g. change the following URL

    http://www.allthingsmobile.co.uk/post/385363776/is-bill-gates-losing-it

    To this one

    http://www.allthingsmobile.co.uk/mobile/is-bill-gates-losing-it

    Cheers

    reply >
    • Rob

      Hi Peter,
      No - I think that this is one of the situations where the simplicity of Tumblr means that you do lose some flexibility.

  8. Hi Rob,

    I'm unsure. In what area would you add in the image/video code? Any general place in the tag?

    reply >
  9. Rod

    Hi rob,
    I've been following a blog (thedailywh.at). They seem to be using only the text post type as you suggest. But it has the usual nice features of tumblr. like thumbnail on videos. Any idea of how this is acomplished?

    reply >
  10. I have recently started a personal blog on Tumblr. I normally use Wordpress but I thought I'd use Tumblr to save myself some cash. I don't know what to make of it so far. I'll optimise it using your instructions and see where that takes me. Not happy about the ugly URLs :( Thanks for the advice!

    reply >
  11. Great and simple to follow advice. The way tumblr handles titles by default is especially strange, but this mostly fixes it.

    You could get clever with SEO, but ultimately more backlinks is what you want.

    reply >
  12. Others than those that you mentioned, what templates are best for this?

    reply >
  13. Good advice. I'm comparing sites using self hosted wordpress vs. blogger vs. tumblr vs. posterous. So far, in terms of drawing in traffic, wordpress is winning. I do some basic SEO for all of the above, so I suppose the best would still be self hosted wordpress.

    reply >
  14. Great article. One SEO gold standard I'm trying to use with Tumblr is the "nofollow" property on paginated pages that does not include the IndexPage.

    Tumblr allows room for some SEO practices but not the ones that matter the most -- with the exception of some standard ones.

    reply >
  15. Thanks for the SEO tips. I've implemented them as best I can. =P

    reply >
  16. I know it wasn't the main thrust of your post, but I'm interested in knowing more about addthis. I see on your sample blog there's just one outbound link to addthis and then javascript out to each individual service from a pop up window. Since Google says their starting to follow some java based links, will using this method still protect you from having dozens of extra outbound links to all these social sites on each page?

    reply >
  17. @Scott, I wouldn't place too much emphasis on the nofollow thing. Google changed the game on nofollow in 2009, and it can really kill your SEO if you're not careful with it. Nofollow now bleeds the same pagerank as dofollow, just without passing it on. That means for example if you nofollow links between your own pages, your just throwing away the page rank. Even pages you consider unimportant should receive dofollow links so you can flow page rank through them back to your home page.

    Even on outbound links, dofollow doesn't save you page rank. It should basically be used now for paid links, questionable outbound links, and if you feel it actually helps, to discourage comment spam. Most spammers though, don't really care much about nofollow. They're paid to leave links, and they know even nofollow carries some weight in the various search engines, even Google.

    reply >
  18. Ethan

    To deal with paginated pages ranking on Google, try inserting:

    {block:IndexPage}{/block:IndexPage}

    That will push value from paginated pages to your homepage.


    Ethan

    reply >
  19. Liz

    OK - so here's a question for those that have successfully improved their SEO for their tumblr sites:

    In the , should I be using:
    {block:PostTitle}{PostTitle} - {/block:PostTitle}{Title}

    INSTEAD OF:

    {Title} {block:PermalinkPage}{block:Posts}{block:Title}- {Title}{/block:Title}{/block:Posts}{/block:PermalinkPage}

    Which is the standard put into place by the template.

    Is the practice of blocking out Permalinks vs. Post Titles going to prevent high ranking even if the permalink has the title of the post in it?

    Thanks!

    reply >
  20. Def going to try this out. Never really figured out how to make tumblr posts more search engine friendly until now... Thanks!

    reply >
  21. Does anybody know if this tips are still have effect these days? thanks!

    reply >
  22. Shamick

    Is it possible in Tumblr to have something along the lines of
    {block:IfHomePage} Do something
    So the home page (and by home page I mean the view of all your post when you go to certain address, say mine http://shamick.tumblr.com/

    The idea is that you would have different things on 'home page' versus for instance 'taged' special page. You would have say certain picture on home page, but not on 'tagged' page.

    More would be possible,
    {block:IfHomePage} ... hey, display the entire home page
    else

    do some customization, which may come handy on tagged page.
    This would be extension of {block:IndexPage} which is for 'posts' only right? So not for the 'home page'

    reply >
  23. This is great for SEO...I love setting up web2.0 profiles and slamming them with links....them point that to your money site. Works like a charm.

    reply >
  24. Its a shame Tumblr is not better for SEO. From the point of view of sharing images, it is my favourite network by far.

    reply >
  25. May be we don't get as much freedom with tumblr as we get with Blogger but Tumblr blogs gain High PR very easily and can give your site some serious traffic if used in a proper way.

    reply >
  26. I'm trying to setup my twitter account to "Brand New day" theme. Is there any solution for this? It doesn't parse any of my tweets. I removed all of the comments around

    twitter

    and the JS in the end of the document, but it doesn't work.

    Great article btw :)

    reply >
  27. This is a great post. I wish you'd do another updated one considering the changes in most of the features and UI. For instance, I can't find the "Advanced Settings" menu that you mention. :(

    reply >

Leave a Reply

Your email address will not be published. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>