Search Engine Optimised jQuery Pagination

One 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 qmpeople.com. 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>

</li>

<li>

<a name="http:--www.qmpeople.com-USERS-PHOTO-USER_1146252-1146252_4_avatar.jpg" rel=bookmark href="/users/marienela">marienela</a>

</li>

<li>

<a name="http:--www.qmpeople.com-USERS-PHOTO-USER_1125297-1125297_1_avatar.jpg" rel=bookmark href="/users/charmyrox20">charmyrox20</a>

</li>

<li>

<a name="http:--www.qmpeople.com-USERS-PHOTO-USER_1140954-1140954_4_avatar.jpg" rel=bookmark href="/users/jessicacole">jessicacole</a>

</li>

<li>...</li>

<li id=pn>

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

</li>

</ul>

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=' + this.name.replace(/-/g,'/') + '>');});

The results is the following: