Connect with us

Hi, what are you looking for?

Web

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 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:

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!

6 Comments

6 Comments

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

Tech

Motion UI is a sustainable library that brings smooth transition effects on the UI. Being one of the most popular libraries, it facilitates developers...

Digital Marketing

Nearly all websites are coded with some combination or HTML, CSS, and JavaScript. Many will also use PHP, Ruby, or other language and possibly...

Design

If you are looking for the right service provider for a sketch to HTML conversions, you should be prepared for a long haul and...

Tech

Regardless of what field you specialize in or what your profession is, learning HTML and CSS programming can be of great help these days.