Parallax Scrolling and SEO: How to use jQuery with SEO
By Kevin Ellen
Designers and brands are more often testing new designs for their webpages, and testing parallax scrolling is nothing new nowadays due to its perceived user friendliness. Despite the clear definition of parallax scrolling on Wikipedia not stating that parallax scrolling needs to be on a single URL, there are those who say otherwise (such as Barry Schwartz on the SEO Round Table).
It is a fact that most of the new parallax scrolling pages are long and reside on a single URL. This causes issues for SEO, as a single page cannot carry the rankings of many competitive terms. For the sake of SEO efficacy these keywords often need to be spread out over various URLs, increasing the overall visibility for the website through its internal link architecture.
With this in mind, the question becomes – would long scrolling websites ever be good for SEO?
Here are some of the results first…
iProspect has conducted a test to determine whether it is possible to create an SEO friendly page that utilises parallax scrolling and to test a new method for longer scrolling pages (which can be applied to any long page, parallax or not). The idea of the test was to create a method which allows a single page with at least three different pieces of content to be indexed within Google under three different URLs – a URL for each section.
The test page itself had the following structure:
- Overview – Content about the overview of the test
- The Theory – Content on the theory of the test
- The jQuery Engine – the jQuery engine briefly explained
The goal was to have the following URLs to this page indexed:
The three URLs to be indexed were indexed by Google, each with their own meta title, meta description and path.
If we were to double check the visibility for each section, a quick phrase search on the content of each section will show the following:
So how did this happen? – The technical bit…
At first some content has been created on the theory and the workings of the test. This is to ensure that each section will have enough content for Google to be deemed interesting; increasing the chances on indexation.
The main content on the page itself has been sliced into three separate sections. One section will always be active and have its content hard-coded within the HTML, whereas the other sections will be considered ‘inactive’ and have their content displayed through jQuery. This is to ensure that the search engine will see that there should be no duplication on the page between the different URLs.
Figure 1. Simple schema of the structure of the page
For the user, the jQuery script knows the vertical position of the browser and is able to calculate in which section this position lays. Whilst scrolling over the page and changes sections, the script will push the URL of the active section in the user’s address bar and browser history. This allows the user to navigate back and forth through the history, which will enhance the User Experience (UX) for if the user would like to navigate back upon a return visit.
The jQuery examples
This section of the post will take apart the jQuery source file of the page, explaining what each section does.
Function: Loading the content through jQueryThis function is called upon as soon as the website loads. It simply requests the contents of the PHP content script (just a script which provides the content upon request with a parameter) and pushes that into the HTML of the right section.
Function: Document Ready
This function is fired when the page is loaded. For readability, we took it apart and will be discussed section by section.
This section takes out the parameter (rewritten as a folder by the .htaccess) from the URL and sets this as the active section. If there is no parameter set, it will automatically activate the first section. As soon it knows what section is active, it will move the page to the right position; so this section is directly visible to the visitor, without the visitor having to scroll at all.
As soon the window is positioned rightly, it will go through each section which sits directly on the body. There it tests if the section is active or not. When the section is not active, the Load function is fired to fill the section with content.
As the page has normal HTML links, we would not want the visitor to reload the page each time a link has been clicked. This little scriplet actually prevents the default action by the link and takes in the target location. The slash at the beginning of the link is removed and again the window is positioned to the right area. This allows the user still to use the navigation without having to reload the page and the search engines will still see a relative hard-coded HTML href link.Because users can navigate back and forth with the browser buttons, a small function will have to made within the jQuery allow this. Unfortunately this doesn’t work on Google Chrome yet, however it works with Firefox.
The final section of the jQuery is to ensure that the URL changes when the visitor scrolls over the website. Each time the visitor scrolls within the page, the code quickly calculates what the browser’s position is. By knowing the exact position of the browser within the content on the page, it knows what section to activate (and which URL to push to the browser).
Possible uses of this method
This method of scrolling and multiple URL pages can be used for various purposes, ranging from entry-pages of websites to interactive infographical pages. The versatility of the script and sectioning of the page into various URLs can prove very useful for the brands wanting to provide their visitors a unique look and feel of the page which is exactly in line with their brand. Furthermore parallax scrolling webpages can attract external links because of their designer nature, as people often show great looking websites on their blogs and social media.
So to reply to those who say that ‘parallax scrolling webpages’ are near always bad for SEO, that is not the case when you use the right methods and apply the opportunities which jQuery can provide. However, as always with SEO and now Google is becoming cleverer with jQuery; it is unsure how long this tactic will survive, despite it being genuine and aimed for the user’s experience.
After having read this, will you consider using this method for long scrolling webpages? Have you applied something similar? Let Let us know by tweeting us @iProspectUK.