Connect with us

Hi, what are you looking for?


Search Engine Optimised jQuery Pagination

jquerypaginationOne of the most used structure by Web programmers without doubt involves the use of lists to group items for example, designing a list of members of a group, a list of news topics, a songs list and so on. From a SEO perspective it is very important to implement lists in a proper manner because every item in a list can sometimes contain a link pointing to a different resource thereby making it extremely important when using links to ensure that they are easily recognisable by search-engine spiders. In addition, one must not forget that search engines love semantic structuring thus showing all items as part of a common group is very valuable. so we should show all items as part of a common group.

The Problem

In spite of these, many attempted implementation of proper design structuring are not very SEO-friendly. Usually, the problem is usually caused by lists which contain large number of items which are often difficult to handle. In such cases, we will need to paginate results. Typically errors made by programmers include embedding only first page of results into HTML and retrieving other results by using NEXT/PREVIOUS links bounded to customised links or javascript functions which perform AJAX calls. Unfortunately, both approaches are not ideal to implement a proper SEO strategy. In fact, in the first case we break the paradigm of the Web, which requires us to use a link for a page and not to retrieve sub-elements.  In the second case, we have to consume more bandwidth to perform multiple HTTP calls. Consequently, in both cases search-engine spiders can read only first page items and our internal linking strategy may be affected in a wrong way.

The Solution

The best solution is to use unordered lists. The main advantage of this strategy consists of maintaining all related items related are fully available to search engines with no additional HTTP calls. Here’s an example found at The social network is using a new technique to build a box with favourite friends by using unordered lists, jQuery and a simple trick.

If you open aguero’s blog, for example, the box on the right (See image below) is generated by the following unordered list:

<ul id=myfriends>

<li id=pt>

<h3 id=t-friends>People I like (101)</h3>



<a name="" rel=bookmark href="/users/marienela">marienela</a>



<a name="" rel=bookmark href="/users/charmyrox20">charmyrox20</a>



<a name="" rel=bookmark href="/users/jessicacole">jessicacole</a>



<li id=pn>

<a rel=nofollow onclick="next();return false;" href="/r/si19">Next</a>



jQuery hides all items and formats the four visible items but then,  how do you show the thumbnails on the left without requiring additional HTTP requests? Here’s the trick!

According to the following fragment of code, the URL of each image is embedded within the name of the associated anchor’s URL so that it sufficiently instructs jQuery to parse the name attribute, replace all “-” characters with “/” and then insert an IMG tag before the anchor by specifing the anchor name as its SRC attribute!

$('#myfriends').children().children('.chatter').slice(start_from, end_on).each(function (i) {$(this).before('<img class=jav_friend width=45 height=45 alt="' + this.innerHTML + '" title="' + this.innerHTML + '" style=vertical-align:middle src=' +,'/') + '>');});

The results is the following:

Written By

Thanks for reading this article. If you're new here, why don't you subscribe for regular updates via RSS feed or via email. You can also subscribe by following @techsling on Twitter or becoming our fan on Facebook. Thanks for visiting!



  1. Jason

    January 20, 2011 at 2:40 pm

    Great advice in using unordered lists in order to improve our internal linking strategy. Many people like using lists, but few people think about how to implement lists from a SEO perspective. Thank you for showing me examples of how to properly do this.

  2. Paw Hellegaard

    January 20, 2011 at 8:21 pm

    Great advice dude, thanks for sharing 🙂

  3. silpada

    January 20, 2011 at 10:15 pm

    Thanks for this knowledge. I can not comment on code as I do not know about it.

  4. VPS

    January 24, 2011 at 10:23 am

    New SEO users face many problems that are caused by lists which contain large number of items which are often difficult to handle. To come out from this they need to paginate results by use of unordered lists.

  5. Kim Sørensen

    February 2, 2011 at 10:39 am

    A really good solution for the seo friendly prob!

    Kims latest blog: Størrelsesforhold Google og Bing

  6. Kostumer

    January 26, 2013 at 9:41 pm

    Changing my list to unordered might seem tedious – do you think it is worthwhile to do?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like


In the fiercely competitive world of e-commerce, a Shopify store’s performance is a critical factor for success. Slow-loading pages can deter potential customers, while...

Digital Marketing

Search engine optimization (SEO) is a vital component of any digital marketing strategy, but it’s crucial to have a way to measure its success....

Digital Marketing

Backlinks are the cornerstone of Google’s page rank algorithm. Alongside content, backlinks are the most essential off-page ranking factor for better SEO performance and...


In web development, HTML, CSS, JavaScript, and other languages are used to create web pages. HTML is used to create static web pages, CSS...