What Type of Blog Navigation Should I Use On My HubSpot Blog?
June 14, 2022 | 6 min read time
Topics: website performance, websites
We all know blogs are an excellent way to create SEO-focused content at each stage of the buyer’s journey. An area that leaves many people confused is how to create a better user experience for a blog visitor to scroll through all the articles you have written.
Of course, creating filters for different topics is one way to direct visitors to the content they are interested in reading, but in other cases, a visitor may choose to scroll through your list of articles trying to find that headline that grabs their attention.
There are several navigation methods for allowing visitors to continue scrolling through all the blog articles - Pagination, Infinite Scroll or Load More.
Each of these types of navigation has pros and cons, both from a user experience as well as SEO-focus. Let’s explore when you should choose one navigation over another on your blog.
Pagination was the first navigation type used, not just with blogs, but for other types of content pages. This very common navigation allows a visitor to click through each individual page or jump ahead several pages.
Pagination is a great choice for blogs for a high number of articles. You can choose to display a certain number of articles on the first page (typically between 6-20 depending on whether or not your displays image, title, and excerpt copy). After the first number of articles is displayed, the visitor can select another page number or click “next” to see the next group of articles.
While the Google search page is a perfect example of a site using pagination, here are a few other sites using this navigation type:
As an online help and customer tech support site, askdavetaylor.com presents its different category pages using pagination as its navigation.
Another tech-style blog using pagination is techcrackblog.com
And despite infinite scrolling being a popular blog navigation type, jonloomer.com, specializing in advanced Facebook marketing, chose to use pagination as its navigation of choice.
Using pagination allows a visitor to quickly jump through different sections of your articles and is beneficial to jump back to a page where they may remember seeing an article they were interested in reading.
Compared to the other two navigation types, pagination also allows a visitor to “see the end” right up front. They know you have 5 pages with groups of articles - with infinite scroll and load more, the visitor has no idea how many articles you may have written. Knowing the “endpoint” allows the visitor to estimate how long they may be scrolling through all your articles.
And finally, pagination can present a much shorter page avoiding the “information overload” that other navigation types may present.
Clicking through to the next page requires a small amount of effort - meaning they need to actually “click” the next page to see a new group of articles. Of course, the other navigation types also require some effort to see all the articles, but sometimes it can be challenging to select a page number, especially as this is typically shown in a small type. (think “fat fingers” on a mobile phone)
One of the easiest ways for bots to crawl or index your website is with the simplicity of pagination. You can treat each “page” as its own page, with its own URL structure such as blog/page 2.
Of course, setting up for search engine optimization does require a little bit of tech work with canonical tags and NOINDEX. And, with Google’s release in 2019, setting up the “previous” and “next” functionality has changed, moving from an attribute in link tags to the head of the page.
Rather than showing numbers for each page, you can replace that with a button labeled “Load More”. As with pagination, when this button is clicked, the next group of articles will be displayed.
Showing a button alerts the visitor that there is more content but provides a much cleaner interface than a list of numbers. This works especially well for companies with a higher percentage of their target audience using mobile devices to view the site.
Say Yes, providing content in the family & lifestyle industry, uses a “load more” button to present additional articles.
Another great example of “load more” includes Bright/Bazaar, a home-style blog that presents beautiful images for each of its articles.
As a lifestyle blog, Cup of Jo presents their blog post using a “load more” concept - here, specifically calling out that the next group of articles will be older content.
One big advantage of using Load More is it’s “adding” to the list meaning, a visitor only needs to scroll back up to see the list of articles they’ve already scrolled past rather than trying to remember what the page number was of the article they were interested in reading.
Avoiding “fat fingers” on mobile devices is also a big benefit. Rather than trying to select a specific page number, it’s simply a click of a button to see the additional content.
As with pagination, this does require some effort from a visitor to continually “click” to see the additional content.
Although the benefit of scrolling back up to previously loaded articles is an advantage, it can also be considered a disadvantage if you visitors have clicked multiple times - depending on how many times the “load more” button was clicked, this could be a lot of scrolling back up to find that interesting article they were considering to read.
Using a Load More button may help with site speed, a crucial element in your page rankings. On the other hand, the content behind the load button is not crawled, meaning only the content prior to clicking the button is crawled. As you add more content, only the more recent articles are crawled on the blog list page (although they are still crawled via the individual blog post page).
A cross-over from social media platforms, infinite scrolling allows a visitor to keep on scrolling without reaching an end (unless of course you don’t have many articles posted). As the user scrolls down the blog list page, your visitor will see the content continuously load. This is ideal for sites that present more “evergreen content” for more entertaining purposes.
Other than social platforms, one great example of infinite scroll is medium.com. Their scrolling is almost flawless, almost undetectable as you endless scroll down the page of article options.
Another example of infinite scroll is apartmenttherapy.com. While the page seems to have a little lag, you can continually keep scrolling to find a very large collection of articles.
Consumers are used to the endless amount of content being shown as they scroll down their Facebook or Instagram accounts. The makes the user experience seamless and contributes to a higher user engagement.
This type of navigation requires very little effort, just simply a swipe of the mouse or finger, making it very mobile device friendly.
Of the three types, this method does provide faster content loading and a smoother user experience.
Of course, the little effort required to simply keep swiping with a mouse or finger may contribute to mindless scrolling, not really making a choice to read an article as your visitor may be thinking they may find something even better as they scroll.
Depending on the number of articles, one major disadvantage is your website visitor may never get down to the footer of your page. There’s only so much scrolling they’ll do before simply selecting an article or bouncing off your website.
While this type of navigation may be ideal for more news-related articles, this is not ideal for blogs with a focus on navigating to a very specific article based on their research goal.
If you have a lot of content this probably navigation type probably would be the most SEO-friendly. When using this method, your blog list page is basically a very long viewport. When that viewport is increased then the content can be crawled, but only one time.
Which Blog Navigation Method is Right for You?
Each navigation type has its own pros and cons, some being more focused on the user experience with little interaction required, while others require more actions but are better in terms of search engine optimization.
The question you must ask yourself is who is my ideal target audience and what is their goal for this page.
B2C businesses may consider a load more button or infinite scroll type navigation as there is more focus on user experience. E-commerce sites or entertainment-style sites with a goal of presenting lots of information and images with little need for SEO on the blog list page make load more or infinite scroll an ideal option.
On the other hand, if a B2B business, your blog is typically meant to present topics to visitors as a learning experience and you’re looking to bring more traffic to your site via your content, making pagination a much more SEO-friendly option.
Looking for design help in creating your HubSpot blog? Turn to the HubSpot CMS Experts at Inbound Design Partners for the design and development support you need to help you build the framework for your blogging efforts.