3 Ways to Optimize Your Blog Homepage

Nathan Rice on September 14, 2007

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!

41 Replies to “3 Ways to Optimize Your Blog Homepage”

  1. Blog Writing Project: Tips & Tricks Final List September 19, 2007 at 9:31 am

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  2. Tips & Tricks! | My Brain Dumper! September 19, 2007 at 10:37 am

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  3. Tipping you off to everything September 19, 2007 at 10:46 am

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  4. Blogging with Cents » Did You Tip? September 19, 2007 at 12:01 pm

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  5. Random Advice on Random Topics September 19, 2007 at 3:33 pm

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  6. Are You Using the Five Types of Links Properly? | Copyblogger September 19, 2007 at 5:03 pm

    […] this. That’s a bad example, but you can always learn more about maximizing blog traffic from others. Notice Me! links are useful even if the anchor text isn’t great. They’re either used […]

  7. Concurso do Daily Blog Tips, lista final | Dente Preto September 19, 2007 at 6:04 pm

    […] 3 Ways to Optimize Your Blog Homepage por Nathan […]

  10. Advice Network Founders Blog» Blog archives » Tips Galore September 19, 2007 at 7:36 pm

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  11. Who Do You Think Should Win? » Pat B. Doyle September 20, 2007 at 4:09 am

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  13. 122 tips and tricks : Foster Genuine Culture September 21, 2007 at 8:17 am

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  14. Madhur Kapoor September 21, 2007 at 9:01 am

    Nice post buddy . Really liked he excerpts tip .

  15. DailyBlogTips Blog Project : My top 10 September 23, 2007 at 12:31 pm

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  16. A Writer’s Words, An Editor’s Eye » Blog Archive » My Top Picks in the Tips & Tricks Group Writing Project September 24, 2007 at 3:12 am

    […] 3 Ways to Optimize Your Blog Homepage by Nathan made me aware of the importance of using the right header tags – I made a note to check mine. […]

  17. Top 10 Tips and Tricks from Daily Blog Tips Project September 24, 2007 at 9:16 am

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  18. Top 10 Tips and Tricks from Daily Blog Tips Project September 24, 2007 at 9:16 am

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  21. Dean @ Technical Itch September 25, 2007 at 11:33 am

    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.

  22. Nathan Rice September 25, 2007 at 11:37 am

    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

  23. Dean @ Technical Itch September 25, 2007 at 11:53 am

    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.

  24. Nathan Rice September 25, 2007 at 11:59 am

    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 🙂

  25. ‘Tips & Tricks’ Tasters | Cyres Matters October 4, 2007 at 12:21 pm

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  26. Are You Using the Five Types of Links Properly? | JV Broker Pro October 6, 2007 at 10:54 pm

    […] Notice Me! Links: Bloggers spend a lot of time trying to get other bloggers’ attention. If you’re not, you should. These links can use great anchor text but they don’t have to. They’re just links. Very often, you’ll see them strung together in a sentence, one word after the other. Kind of like this. That’s a bad example, but you can always learn more about maximizing blog traffic from others. […]

  27. W A Blog Tools October 9, 2007 at 2:04 pm

    […] Notice Me! Links: Bloggers spend a lot of time trying to get other bloggers’ attention. If you’re not, you should. These links can use great anchor text but they don’t have to. They’re just links. Very often, you’ll see them strung together in a sentence, one word after the other. Kind of like this. That’s a bad example, but you can always learn more about maximizing blog traffic from others. […]

  28. dem October 11, 2007 at 7:10 am

    really nice. 🙂 love the article

  29. stephentrepreneur October 11, 2007 at 7:45 pm

    Great pointers, help and WP support.
    So good I’ve changed my sidebar around accordingly.

  31. Flora M Brown January 17, 2008 at 6:01 am

    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.

  32. Nathan Rice January 18, 2008 at 7:03 pm

    @Flora M Brown
    Unfortunately, I have no idea on either one. I guess trial and error is your best bet here.

  33. Dahni Hayden June 11, 2008 at 11:27 pm

    Nice blog. Love your work. Great information and to the point. Thank you.

    Sincerely,

    Dahni

  34. Today’s 10 Blogosphere Quickies : INconstantIN.ro August 25, 2008 at 3:01 pm

    […] 3 Ways to Optimize Your Blog Homepage […]

  35. My Top Picks in the Tips & Tricks Group Writing Project : Lillie Ammann, Writer & Editor October 14, 2008 at 6:03 pm

    […] 3 Ways to Optimize Your Blog Homepage by Nathan made me aware of the importance of using the right header tags – I made a note to check mine. […]

  36. Trevor Watkinson November 9, 2008 at 6:37 pm

    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!

  39. Sozdanie saytov Sochi April 28, 2009 at 5:00 pm

    Great article. Would like to see similar tips for Drupal blogs.

  40. Tips and Tricks Writing Project | Colloquium May 24, 2009 at 3:53 pm

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

  41. Daily Blog Tips Writing Project November 10, 2009 at 4:24 am

    […] 3 Ways to Optimize Your Blog Homepage by Nathan […]

Comments are closed.