3 Ways to Optimize Your Blog Homepage

Back when I wrote “Good Design Starts with the Homepage”, I didn’t include much in the way of tips for actually achieving that perfect homepage. The fact is, there is an endless list of possibilities to optimizing your blog’s homepage, but I believe that if you do these 3 simple things, you’ll be on your way to the perfect homepage!

(disclaimer: all the below tips pertain to WordPress blogs. Sorry guys, I’m a WordPress fanboy.)

1. Use the correct header tags

One of the most common semantic mistakes made by blog designers (at one time, myself included) is using the wrong header tag to wrap your titles in.

For instance, on the homepage, there should only be one thing wrapped in H1 tags … your blog’s title. One could argue that the tagline could also be wrapped in H1 tags, but semantically that’s not the case. The title of your blog is the “main title” of your homepage. At BEST, one could argue that the tagline is a sub-heading, and therefore needs to be in H2 tags.

Unfortunately, some designers (again, at one time I made this mistake) actually wrap each post’s title in H1 tags, thus negating the entire semantic purpose of the H1 tag.

I recommend wrapping the titles of the recent blog posts on your homepage in H3 tags. This stands to semantic reason. It’s not a page header, and it’s not a sub-header. Those titles should be wrapped in nothing higher than H3 tags.

Remember, search engines use the semantics of the markup to determine the content of your homepage. By wrapping something in H3 tags, you’re telling the spiders that this is important content, but it’s has nothing to do with the “homepage” itself. This is dynamic content that will probably be off this homepage in a week. (a lot can be said by using correct markup).

(Yes, I know that sidebar headers are, by default, wrapped in H2 tags. While I disagree with this semantically, WordPress wraps the default widget headers in H2 tags, and widget developers have done likewise. We can’t really do much about that.)

2. Only Display the Content of 2 Recent Posts

Daniel at DailyBlogginTips.com recently released a plugin that can handle this for you. Well, I’m all for plugins, but I never let a plugin do something for me that I can do myself :-) If you share that sentiment, then you’ll appreciate this short, mini-tutorial on how to accomplish the same thing without the use of a plugin :-) (well, almost the same thing).

Whether you use home.php or index.php, it doesn’t really matter. Just open up whichever file controls your homepage in you favorite text editor. I like ScITE.

I know that all WordPress theme are different, so all I can realy do is go on the one I use. In any case, most any WordPress theme index file will follow a similar structure.

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
The Post Title
The Content
The meta info (comments, author, categories, etc.)
<?php endwhile; ?>
<?php endif; ?>

It’s the standard loop … nothing too special about it. Now, what would happen if we set a variable at the opening of the loop, and each time it “looped” through, we increased the value of that variable by one? What we would have is an easy way to track the order of the stories on the homepage. The first story is 1, the second story is 2, and so on…

Then, we could use a simple if statement to control the output of the loop based on which story is being displayed. The code would look something like this:

<?php if (have_posts()) : ?>
<?php $i = 1; ?>
<?php while (have_posts()) : the_post(); ?>

<?php if ($i < = 2) { ?>
The Post Title
The Content
The meta info (comments, author, categories, etc.)

<?php } elseif ($i >= 3) { ?>
The Post Title (maybe in a different header class to make them smaller)
The Excerpt (or you could leave this out altogether)
The meta info (again, you could just leave this out)

<?php } $i = $i + 1; ?>
<?php endwhile; ?>
<?php endif; ?>

Basically, each time it loops through, the counter is increased by 1. Once it has been increased twice, we tell it to display the information differently. We can have it display titles only, title and meta, title and the excerpt, whatever you want.

For a sample index.php/home.php file with the code already in place, just download it here. But seriously, take a look at the code and try to understand it. It’s good to be able to do this kind of thing yourself.

3. Give Blog Goals a Priority Position on your Homepage

For instance, let’s say your target is to attract new feed visitors, or maybe it’s to encourage clicks on adsense, or perhaps it’s earn the most money from your banner or button ads.

The key is to determine the best possible location for these items.

For RSS/Feed subscription buttons, you want to make sure you are using the standard icon, and putting it in the top of your left-most sidebar. Maybe you have 2 right sidebars or a sidebar on either side of the content … it doesn’t matter. If you want to attract new feed readers, you need to put the subscription options in the top of the sidebar that is furthest to the left because of the F pattern.

The same goes for ads. I put my RSS options in the top of my left-most column, and offer ad space in the top of the right-most column. Obviously, you can see the order of importance I place on my site. Content first, then RSS, then ads. On my other blog, I place paramount emphasis on RSS subscription options, and below that I have my “favorite posts” list. Those two things reflect my 2 goals for that site … to increase subscribers and to highlight my best content.

Bonus tips:

You know a list of 3 tips couldn’t just have 3 tips! :-) Here are a couple more …

Use “Next/Previous Page” instead of “Older/Newer Posts”. And have them display logically. For instance, if you take a look at the theme I recently released (demo page) you’ll notice at the bottom of the page you’ll see a link to “Next Page” with arrows pointing to the right. You’ll also notice that the link is aligned to the right of the column. THAT’S HOW IT SHOULD BE!!! If you go to the next page, you’ll see a link at the bottom of the page that says “Previous Page” with arrows pointing to the left. THAT’S HOW IT SHOULD BE!!! Navigation should be logical. I wrote more about the subject here.

Use icons for your meta information. There are tons of free icons out there that you can use on your blog. They add a pop of color to an otherwise bland page of text. I think it improves the overall quality of your homepage.

And there you go … 3 tips 5 tips on improving your blog’s homepage design. I’ve employed them on my blogs and the results have been overwhelmingly positive. Try them out and see if they work for you!

Comments

  1. Dean @ Technical Itch says

    Another useful way to control how many posts are displayed on the home page is to use the Custom Query String (CQS) WordPress plugin.

    I use it on my site. It has lots of useful features for customizing your blog.

  2. Nathan Rice says

    Dean,
    I usually don’t like plugins … hence the raw WP hacking! :-) I’m not against them … in fact I use a few on the blog here … I just prefer to do it myself if I can.

    Nathan

  3. Dean @ Technical Itch says

    Editing the raw WP files can offer more flexibility I agree. You’re in more control of how things work.

    I edit my sidebar.php file directly rather than use widgets for example.

    Some people may find editing WP files a bit daunting so the plugins offer a good solution for that.

  4. Nathan Rice says

    Dean,
    Couldn’t agree with you more. The reason WP is so popular is because of how easy it is to use plugins, for sure!

    But for those of us who have the know-how, it’s just as easy to tinker under the hood. I’m sure you know exactly what I’m talking about :-)

  5. Flora M Brown says

    Nathan,

    I just set up my blog with RockinBizRed and I love the look. One prob with the Google ads I put on my homepage. They aren’t changing to match the content of the current post, whereas on the individual posts they are.
    I know Google ads aren’t your problem, but I’m thinking there’s something I need to do on the homepage but I don’t know what it is. Can you help?

    Also, where in the template do I place Kontera ad code to show up in the home page and in posts?

    Thanks.

  6. Trevor Watkinson says

    Hey Nathan,

    Great article! I love learning how to do these little tricks without needing to rely on a plugin. Those who know how to code these things by hand end up learning more quickly.

    One note about the code up above. When I implemented this trick on my blog, I got a parse error that said unexpected ‘=’. I didn’t know what was causing it until I looked at this line from the code above:

    <?php if ($i

    I realized that there was a space between the < and the = in this line. When I removed the space, the parse error disappeared and the code worked great.

    Thanks again for the great tip!