Paginating on a Static Website. What to Be Aware of -Build Static Websites

Pagination isn't something you often think about, especially when many sites do it automatically for you. When working with static websites, you don't always have this luxury. Of course, there are different ways of generating static websites, which means there are different ways of implementing pagination. If you aren't sure what pagination is, whether you need it, and how to avoid creating problems with search engines, keep reading.

Pagination is when you break up your content across multiple pages. This can be for your index page displaying your articles, or on individual articles themselves. You can create pagination manually (read painfully), by using a tool or plugin from another developer, or by writing your own code. There are drawbacks and benefits from each of these approaches, but before we dive into the various methods, let’s look at when and why you should paginate.

Although I’m approaching this concept as it applies to articles on a blog - or perhaps a news site - it can also be applied to other types of sites, too. So if you read an article, just know that it can be any type of content that needs split to multiple pages.

Why You Need to Paginate

I use pagination on my own sites to break up my articles into digestible chunks. Of course, I provide other means of navigating and filtering my sites, but there are users out there prefer to browse through content. When it doesn’t take much more effort to implement something that will improve the user experience, it’s usually a good idea to do so.

Speed Page Load

First off, if you load all the content on your site when your users request the home page, it will take a significant amount of time for it to load. No one wants to sit and wait for several seconds for a page to load. Can you really afford to lose those customers because you try to show them everything you have all at once?

According to Google, mobile users will not wait for more than three seconds for a page to load before abandoning the attempt. Google itself is aiming to keep its average page load time to under a half a second, and they use page load speed as a ranking factor for search results.

Sites like Pinterest use technologies that track a user’s position on the page, then use AJAX to load new content. Loading in this method isn’t needed for the initial content available to the user, so the initial page still loads quickly. Unless you’re planning to implement AJAX with your static site to load new content, you’re better off implementing pagination to allow users to access the next set of articles.

Content Accessibility

If you think that merely limiting your site only to show a certain number of articles, how will you allow users to get access to other content? Sure, you may have your information broken down into categories, but that will only get your users so far. What if your categories have a large amount of content? Then you’re stuck with using smaller, more nuanced categories - or perhaps subcategories - to allow your users to find what they’re looking for.

You could also implement a search result, but that presents two other problems. Many users aren’t necessarily sure what they’re trying to find or the precise wording they need to use to find the right article. Also, if a user’s search returns a large number of results, you’ll run into the same problem of having too much information to display on a single page for that user.

Better User Experience

User experience is dictated by how easy your site is for your user to use. Your goal as a web developer or content creator is to help your users, and you can’t do that if you offer a poor user experience to your users.

Pagination is not the only answer to providing a good user experience, but it’s one tool that you can implement to help your users find what they’re looking for. If your users have to hunt for their information, they may end up leaving to find their answers elsewhere. However, if they are left waiting for content to load, they will not even give your site a chance. Use pagination to enhance your users’ experience, and your site will be more helpful.

If you’ve decided that you need to paginate, keep reading to find out how you can implement pagination on your site.

Ways to Paginate

The way you implement pagination will depend on how you’re developing your static website. If you’re using a website builder or a content management system (CMS) and running your site through a static generator, then your pagination should already be done for you. As long as you have pagination configured on your site, you should be good to go.

If you’re developing your site yourself, then you’ll need to do your own pagination. You have a few options for implementing pagination: manually, using a 3rd party tool or library, or writing your own code.

Manually

Pagination is something that can be done manually by creating new pages and linking to each one. You’ll have to write each line by hand - although you’ll be able to copy-paste for the most part - and ensure that every article you’ve written is included on one of the pages. If you’re sorting your content by the most recent first, you’ll have to redo every page to put the new article on the home page. Honestly, I don’t know any developer that would do pagination this way, but I included it here for full disclosure.

3rd Party Tool

You could use a 3rd party tool or library to create pagination for your site. If you’re using an ORM - such as Flask-SQLAlchemy, or just SQLAlchemy in general - then you’ll natively have support for pagination. Just use the paginate method to filter your posts before returning your view.

If you’re using Flask - a Python microframework for developing web applications - you could use Flask-Paginate to implement pagination. This library relies on Bootstrap to style your page, so you’ll either need to override the styling or simply use Bootstrap as your front-end framework.

Custom Code

If you aren’t using an ORM and you don’t have a 3rd party library that you can use, then you’ll have to develop your own code. Although this method will require the most work, it will also afford you the most freedom.

Although many solutions for pagination are available through alternate means that are quite robust, writing your own code will almost always allow a more targeted solution for your site.

What can you customize about pagination? Well, there are many things you can do including whether to use numbers, symbols, arrows, how many pages to show, or even how your navigation links take your users through the available content. The choices are nearly limitless. However, you'll need to think ahead on how you want your pagination to function as you won’t be able to query the database in real time to provide heuristic results to your users.

Pagination and Search Engine Optimization (SEO)

The best practices for working with SEO regarding pagination has evolved as the algorithms for search engines have changed. Search engines have become much more intelligent and are capable of understanding natural language and the intent of a user searching for information. The point of providing search results to users is to help them find what they’re looking for, and your site should be able to help the search engine find and serve the correct content to potential users.

The general advice from Google is to use rel="next" and rel="prev" in link tags in the header of your paginated pages. For example,

would be placed on the index page if you have any archived content that has bled off the main page.

Google has also recommended that you use rel="canonical" and point the link to itself on every page. This means that you should be putting a canonical reference to every page in your paginated series. If you happen to have AMP setup on your site, then AMP pages should use the canonical links to each page in the series to point to the desktop versions of each page.

Also, if you plan on developing your own pagination, try to make your pages easy to find and reference. For example, append /page/

to your page to help users keep track of which page in the series they’re on.

Final Thoughts

Many website builders and CMSs automatically create pagination for your content. If you’re coding your own website, you have a few options for creating pagination, which will give you more control over how your content is delivered to your users. Using an existing library might be a better solution, especially if you’re not sure what you want to do or if the library already does everything you need. However, if you want complete control over how your site does pagination, developing your own solution will give you the most freedom.

If your site uses pagination in any way, be sure that you use canonical links to itself for each page in the paginated series. You’ll also want to make it easy for your user to find which page in the series they’re currently on.

Wrap Up

Thank you so much for reading my content. I try to bring you the best content I can think of relating to static websites. If you have something you want me to write about, let me know so I can serve you better.

Do you have a bad experience using pagination? Do you think that pagination shouldn’t be used on websites anymore? Do you think using existing libraries or tools superior to using your own code? I’d love to hear from you in the comments below!

Paginating on a Static Website. What to Be Aware of