At Siege, we generate over $90 million in traffic value for our clients primarily through their blogs.
You read that right.
We dedicate a lot of strategy into the blog design in order to generate the best results for our clients. So, we thought we’d share the wealth.
In this episode of Content & Links, CEO Ross Hudgens breaks down the ultimate guide for all-things blog.
From the blog index to the actual blog post, learn from these best practices to add to your success and content marketing results in 2022 and beyond.
Blog Index Page Best Practices
The first part is the strategy is the hub page for the overall site. This is where we would start and think about design for the hub page or the blog index page.
It’s going to set the framework for the entire thing.
I think a great example of someone doing this very well at the time of this shooting is the Help Scout blog.
Multiple Buyer Personas? Link Out to Relevant Categories
The first thing they do very well is they will uniquely point their buyer personas to the areas that are most interesting to them above the fold.
If you’re in a vertical where there are multiple buyer personas that use your product, in the content section, you’ll often want to direct them appropriately. Because if you blend this content, you’re immediately making 50% of the work visible irrelevant to them.
So, by allowing users to go to Customer Service or Growth & Culture, that in turn will allow them to find only articles that are relevant to their use-case and job, making the overall content experience better.
This is a great user-experience best practice if buyer personas are present or if there are multiple buyer personas that are clearly different in your specific market.
Highlight Most Recent Posts for Freshness, Ideally Near the Top
Generally, there are some sections where “most recent” or “recent articles” is listed on a blog.
I think our whole world has changed over time in terms of thinking about blogs–not just as a list of newest to oldest, but what is still relevant for a blog, especially as user-experience is concerned.
So, having some kind of section generally a little closer to the top is a best practice. It’s going to make it feel more up-to-date and it’s smart.
Implement “Curated” Sections to Manually Select Popular SEO Posts
The counterexample is to not only have it be newest to oldest, but have more of a curative selection.
Think of this more as a library rather than a blog post.
This is a great strategy that the Animalz team originally made popular and visible in thinking about how content sections should be organized.
And to that point, a way of thinking about that is a curative section or set of sections where you can manually select articles.
This is a great place to put articles that are converting well or need more of an SEO boost that you want users to see. It will also give these areas more SEO value by being higher in architecture.
All in all, it’s important to have some kind of editorial selection where you can manually create and select articles that are more likely to be seen by the user and in turn, Google as well.
Preview Lists of Several Articles From Each Category
From there, I think a good practice is to have a list of articles from each category that exists on your blog.
Hopefully there aren’t nine million categories, but by going by category you are basically solving for the different user-intents that a reader would have.
Ideally, you’re thinking not just by persona, but also sub-tasks that they are trying to achieve in terms of thinking about your categories.
In these sections, we again see Customer Service and Growth & Culture in that main blog index and furthermore, articles you can find that are manually selected.
You could also just have this be “most recent.”
I do like the idea of making them manually selected–that you can just constantly update those, but this would further create a more library-like experience for this blog section to be performative and get more readers to find articles that they’re interested in, which is not always the most recent article on their blogs.
Maintaining Visual Interest with Thumbnails
Something that Help Scout also does well, that I think is increasingly important, is creating thumbnails that have a variety of visual interest.
You can see there’s a lot of different color palettes at play in this section.
They will even use GIFs on occasion that are low in file size.
These images will contain visual interest that makes it a pleasure to continue to read this blog section.
You’ll see on some blog indexes–maybe that hero image in isolation looks fine, but when you have that same brand aesthetic across 90 thumbnails, it will pretty quickly create a lack of harmony and make you get bored between each of the thumbnails.
So much so that you’re unlikely to engage with one and actually read it.
By creating visual interest here, Lattice also does a good job of this with their thumbnails.
You’re consistently entertained or at least engaged until you can actually click an article that you want to read.
Highlight 15+ Posts Per Page
Additionally, a blog index should not just be a list of six articles.
I think for SEO best practice (and to get articles higher in architecture) 12-15+ posts visible per page is a good rubric.
We see on Help Scout, they’re basically right around this number. It does two things:
- It gives users several articles to choose from so they can make sure to find something that they’re interested in.
- It will get more articles closer to the homepage.
The scale is better as well. If every page only shows six articles, the next page will only show six articles most likely, and you can see how very quickly articles can be buried in the architecture and be less instructive for search engines and users, based on that one-to-one framework.
Include Relevant Calls-to-Action
Another good thing to include on any blog section is a call-to-action or set of calls-to-action. I think one in the middle or above the fold like Help Scout does here is great if you immediately know this is something you’re enjoying.
People might also bounce back to a blog index after reading a single article, so it’s a common place to include a call-to-action.
A very clear, obvious one would be to “subscribe to the blog” if they’re enjoying that and it’s something that a user would actually do.
If you don’t think it makes sense in your specific vertical, you could go a little bit more for the jugular and ask for a quote or sale directly.
Also, a call-to-action at the end is very common and understood as not too aggressive–this could be an alternate option, it could be an e-book.
A call-to-action above the fold could be an e-book as well (if relevant to them).
Having that one-two punch of calls-to-action will be instructive to getting people into your marketing pipeline and ensures your goals convert at the end stages as you want them to.
Category Page Best Practices
So from there, we would shift to the category page.
I don’t think it needs to be too different from the blog index–just rephrase for that specific category.
Again, Help Scout does a good job here where they specifically will just reframe around Growth and Culture, or their other vertical (Customer Service) to allow that user-type to know they’re in the right place.
Each article will then be sub-segmented around the specific sub-categories that make sense for that section if applicable, or it could be a master list of articles (ideally 15+, again).
Create Visual Difference From the Homepage to Maintain Engagement
You could completely redo this section, especially with content that is important to you.
An additional page template could make sense to do, but often a scrappy way would just be to reuse the index in a new skin with new copy, maybe slightly modified, to create a faster way of getting to that same indexation that still works and is valuable.
You can maintain visual interest and if you’re getting a lot of visitors here, making it different is always going to be a positive experience to make sure there’s some kind of intrigue at every step of the journey, or they’ll start getting bored about what they’re engaging with and be more likely to bounce from your website.
Stay Unique with Descriptive Copy
As one final element on that, I think 1-2 sentences of copy that describes the category isn’t bad to make it unique in the eyes of search engines.
Sometimes custom meta descriptions that get pulled into these sections could help, but that’s often extra maintenance.
Overall, I think a sentence or two that adds value for that section and the kind of content and value you bring is a nice way to create some uniqueness to the section–again, adding value for users and Google.
Blog Post Best Practices
We now move to where most of the magic happens… the blog post.
The blog post brings the themes of the original blog index. Hopefully it’s pulling in those thumbnails into hero areas so it’s not brand new in terms of what needs to be created, but the blog post is where most of our ranking weight is going to come from.
So, a lot of effort is needed.
Smaller Hero Images + Pops of Color
Increasingly, I’m seeing a lot of pops of color above the fold with hero images or just pops of color, generally, but ideally those hero images are not too tall.
With new Core Web Vitals initiatives from Google and general good user best practice, we’re seeing these images are going to need to be both small in file size and overall size.
We think it’s still important to see pops of color up here to show people that they landed on a good experience, but I think the days of a massive hero are gone.
That giant massive hero might not load too well on poor internet speeds in the middle of nowhere as compared to your home office and major tech centers.
Give Users the Answer to Their Query, Fast
Another core element is a Quick Answer area or set of areas.
This could be an immediate sub-answer or sub-headline section that can solve for the query that the user has.
Or you can have a “key takeaway” section or set of sections that give you multiple variations of how to do this that makes sense for your brand.
But today, I think it’s obvious that you have to have some area that immediately draws your eye to get that Quick Answer–just how Google is trying to do it on their search results–showing that users want that too.
So, you should build this into your overall blog design to be natural and make this obvious rather than forced to get your best practice for this overall and solve for what Google and users are trying to solve for in 2021 and 2022 ongoing.
Using Unique HTML Elements
Other critical elements of blog designs are not just the text itself, but the other HTML elements that are critical and allow you to create a great visual post without needing a huge amount of images.
Some examples of this in practice are block quotes.
Ideally this is eye-catching and has a punch of color in order to do that.
H1s, H2s, H3s are obvious, but hopefully they should create some visual interest as well.
Tables should have their own specific design applied to them and thoughtfulness about how they will look, especially if you’re in a market where tables will exist frequently.
Additionally, ordered lists, numbered lists, unordered lists, these elements should be thought through because they can be used in a very clear and distinctive way in terms of maintaining interest on the post as compared to just a boring black bullet.
You can instead have punches of red or purple and maybe a background.
These things can all tie in and make these posts more engaging.
Background color is important to mention and it can pull out key takeaway sections.
That’s something we see more and more as well, where you have a custom design area where you can clearly apply a background and it will create more pops of color, not just in the Quick Answer area, but visual interests where a uniquely-designed image isn’t always necessary.
Table of Contents In-Body
Other things that are frequent and more common in high-performing posts are actually table of contents that are present in-body.
We see this on Investopedia. They will actually have a table of contents that you can jump to the areas that you want to get to.
You can imagine if you’re on mobile, having this prominent for you and in-body is a great experience for getting to that quickly with just your thumb.
It’s also where eyes are going to go in a desktop experience as well, especially as Google commonly pulls from these jump-to links, bringing them into the search results.
Finally, they might help you with longtail rankings–all valuable things that can help you rank better and be better for user-experience on a day-to-day basis.
Points of Credibility Above the Fold
Seeing those points of credibility or something we’ve talked about previously in our Proof Preview Benefit, or PPB video, is getting people with credibility immediately seen and also, making it so they don’t have to leave the page to do so.
If we look at Investopedia again, we can see that they give author bio’s that reveal on hover.
This makes it so you don’t have to go to someone else’s author bio page to get that proof and credibility and says this is a website you should trust.
This is a very common, maybe more frequent way of establishing that credibility on blogs like this that you see more and more over time.
As part of this, author names and dates above the fold, I think are critical parts of this equation.
They create, I think, proof and trust that this is an up-to-date article.
Healthline will actually show the accreditation someone has in their name and this will immediately create some meaning to the reader even without clicking the bio because they know a PhD wrote this article, therefore, I should maybe take it more seriously.
All of that connects to higher-performing content overall.
Blog Navigation Strategies
For conversions, I think a navigation that follows you that’s narrow, but not too tall, that has a contrasting button in the upper-right with your call-to-action for you (whether it’s a sale, get a quote, or to sign-up) allows users to browse throughout your site in a natural way.
And also, draws their eye to a conversion element that is going to allow you to convert best and be highly effective from a design standpoint.
To this point, the navigation should also inherit the main navigation.
We think blogs should be part of the shopping experience–not a magazine–in order to generate sales for their clients.
Making it easy for people to get back to the main site and also, for SEO value–top-funnel pages that generate links to immediately pass internal linking equity to those other pages just makes this a natural one-two as well.
Make Text Readable
Other readability best practices is that the font should be 16-18+ pixels.
The column width, not too wide.
You want to make it easy to track to the second line. It can get exhausting for readers to track from a wide column to the second line.
So, we’re trying to make that as minimal and easy and pleasurable of an experience as possible.
Also, don’t make it gray on white.
I think a common thing that many people will do with their font is they’ll put gray on a white background.
This can often look good to a designer, but not actually be functional.
Try to use black on white.
You can use your own approach with different fonts to make it feel uniquely you, but I would generally try to avoid gray on white for that readability.
Include Related Linking to 3-4 Posts
And at the end, including related linking is a no-brainer for SEO.
Some general best practices here is to include 3-4 images and blog posts.
Ideally, the thumbnails are not too large for site speed reasons.
I like one thing that NerdWallet is doing here where they have one image that’s a featured related linking post and also has sub-images as well.
But by all means, these can be very small file size images.
It shouldn’t be a blocker to include visually-grabbing thumbnails here.
But something I noticed with these sections, very commonly, a default use of them is to do “most recent” posts or even most recent in the same category.
Our suggestion is to make it random in the same category you’re in.
This will create more of a silo effect where you’re getting the most relevant articles to your “growth” or your “customer service,” rather than just random articles where that same customer service person will now have 50% articles that are not relevant to them in that particular section.
By making that random, you’re also getting older posts higher in architecture.
And for extra benefit, make this have a possibility to have manual selection where you could pull posts that are especially relevant to make the article even more useful to the readers that are on it.
Other miscellaneous items to consider:
- Calls-to-action at the end of the post and build it into a template.
- I don’t think blog comments really make sense in 99% of verticals anymore. It’s kind of outdated practice since people really aren’t commenting and they do that on social media instead.
- Share buttons do make sense that are custom to your vertical even though people are sharing less on these social networks, but it’s still a good best practice.
I think having those share buttons actually be colored in your blog design. Like on Siege, we have red images that match our brand aesthetic.
I think this communicates a premium feel to people and it’s not very hard to do with your website overall.
That’s kind of the overall spiel on blog design best practice for SEO.
I know it’s a lot, but ranking well is a competitive world, so there’s a lot of things you got to do well in order to do that.