--> SEO Requirements To Remember When Implementing Infinite Scroll | Experience Lab - Online business creation and development guide for bloggers and startups

SEO Requirements To Remember When Implementing Infinite Scroll

Yesterday, we talked about infinitely scrolling homepages , and whether they're a good design decision when it comes to SEO. While trick...

Infinite scrolling pages

Yesterday, we talked about infinitely scrolling homepages, and whether they're a good design decision when it comes to SEO. While tricky and often prone to mistakes, infinite scroll has its uses, especially where usability is concerned. So today, we'll talk about some SEO requirements you should keep in mind before you go ahead and implement an infinite scroll. These tips will help you design a better homepage for users as well as search engines.

There are two parts to this story. This is the second part. You might like to read our previous post before moving on.

Part 1: Are Infinite Scrolling Homepages SEO Friendly?

Part 2SEO Requirements To Remember When Implementing Infinite Scroll

Don't break functionality!

Infinite Scroll should be implemented as a "progressive improvement"; that is, it should function as an additional feature available to users that support it, without penalizing others or changing the technical structure of the site.

Downloading asynchronously

Asynchronous roughly means 'not bound with time'. When a regular website loads, most of its content loads synchronously - time driven, that is to say it loads when user visits. But for an infinite scroll, you cannot load the entire feed when the user first lands on the page.

For a "progressively improving" implementation, an Infinite Scroll has to load the required JavaScript elements necessary for asynchronous operation. Here is an overview of Infinite Scroll in asynchronous mode:

  1. The user requests a page (eg: site.com/page/3) and gets the content of this page.

  2. When it reaches the limits of content while scrolling, a JavaScript function will run, requiring new content from the server.

  3. When the server responds with the new content, another JavaScript function interprets the data and injects it into the HTML page.

  4. When there is more content to download, the server responds with a 404 error message that will not be shown to the user. Rather, we will post a notice that the content is exhausted. This feature works for both a scroll up as a scroll down.

The asynchronous download can cause delays in the content display depending on the server’s response time. Therefore, we must use preloading and caching. The purpose of preloading is to download the adjacent content preventatively to minimize the new contents’ loading time. Caching’s purpose is to keep asynchronously downloaded content in memory.

Maintaining history

The Infinite Scroll is definitely a plus for continuous navigation, but what about "segmented" navigation? If a user scrolls for several sections, finds an interesting link and clicks it, then returns to the Infinite Scroll, what happens?

If a user visits your site, leaves, then comes back a few days later and tries to find a certain piece of content, what is their experience? How will they know where to go? The answers to these questions are found in the History.pushState.

History.pushState lets you change the URL in the address bar dynamically. When the user scrolls and reaches a new section, the address bar will change. The pushState then creates a new state in the browser navigation history. If the user clicks on the back button, it will be up to the previous URL we populate via pushState.

history.pushState(stateObject, title, URL);

window.onpopstate = function(event) {

window.location = window.location; }

Sites like Facebook demonstrate the importance of this practice. If you scroll far down on the site page with Infinite Scroll, then accidentally press the "Back" button and return immediately to the site, you will return to the very top of the scroll instead of exactly where you left off.

These were some of the things to keep in mind. We'll soon create a tutorial on actually implementing an effective infinite scroll, so stay tuned!



Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
Experience Lab - Online business creation and development guide for bloggers and startups: SEO Requirements To Remember When Implementing Infinite Scroll
SEO Requirements To Remember When Implementing Infinite Scroll
Experience Lab - Online business creation and development guide for bloggers and startups
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy