A Rauxa Company

Rich JavaScript experiences and SEO can coexist

Jannuary 31, 2012

Websites today can deliver such rich user experiences that they are beginning to look and act more like applications. Developers are opting out of using Flash in favor of using JavaScript to create everything from slideshows and lightbox viewers to in-page tabs and accordions that deliver fast, structured display of content. But does this enhanced user experience come at the cost of degrading your website’s search engine performance? This is a question we often hear from clients when we’re presenting immersive concepts in the user experience stage of web projects. The answer is…it can, but it doesn’t have to.

JavaScript—what is it good for?

JavaScript can be an excellent tool for creating highly immersive and interactive sites that feature video players and slideshows embedded in the page, animation, elegant dialog boxes, content organized in tabs or accordion boxes and dynamic drop-down menus. These types of effects not only enhance the look of the page but also create

Figure 1: Content Organized in Accordions

better user experiences. For example, instead of having to scroll through long pages of text to find what they’re looking for, users can quickly scan topics organized by tabs or accordions (see Figure 1). Drop-down menus can be used to easily connect users to deep content with just one click; while lightboxes can be used to display images, slideshows or videos without taking the user away from the page visited.


With so many user advantages, it’s easy to see why JavaScript has become such a popular tool in the developer’s arsenal. But admittedly, a rich user experience doesn’t mean much if you don’t get visitors to your site.


Making JavaScript and SEO play nicely together.

There’s a common belief that using JavaScript means killing your SEO efforts. Given the many different ways that JavaScript can be implemented on a website, it’s definitely possible that it could impede SEO. But with careful planning, you can strike a balance between rich user experiences and SEO, and you can do it by following two key steps: 1) Plan carefully and 2) Develop strategically.

Figure 2: Organizing Content with Tabs


1) Plan Carefully:

The first step begins during the user experience definition stage. It is here that information architects and content strategists must determine not only what content needs to be optimized for search engines but also how it is organized, and then communicate that to the developers. For example, let’s say you have a website promoting music lessons, including instruction for guitar, piano and violin. To enhance the user experience, you decide to present the content for the three instruments on the same page through JavaScript tabs as shown in Figure 2.


Most likely, you’ll want to optimize keyword terms around music lessons in general, but also for the specific instruments. It’s important to remember that you can get more SEO punch from a page that is optimized for one concept versus multiple concepts. To work around this, you can employ a little JavaScript sleight of hand. Adept developers can create tabbed content that appears to a user as if new content is being loaded when a tab is clicked, when in actuality, a new page is being loaded with a unique crawlable URL via an AJAX link. This approach achieves the goal of delivering the visual perspective of tabs to the user while appearing as separate pages to search engines. Striking that balance between user experience and SEO illustrates why it’s so important for design and development teams to collaborate early in the process.

Figure 3: Slideshow in Lightbox


2) Develop Strategically:

The most important rule for developers to remember when trying to balance JavaScript and SEO is, “If you want the search crawler to find your content, it must be on the page.” But that doesn’t mean it has to look like it’s on the page from the viewer’s perspective. Let’s look at another example…This time we want to create a slideshow of images and captions that plays in a lightbox viewer (see Figure 3 below). The JavaScript code can be written in such a way that search engines believe the user is seeing all of the images and captions at once on the page (and can search that content as a whole), when in reality, the user is actually seeing an overlay that presents one photo at a time.


The same rule applies with tabs, menus, overlays, accordions and basically any JavaScript object. As long as the content is on the page, or if you’re loading content that lives on a crawlable page via AJAX, there is no negative search impact.

Making AJAX applications visible to Google.

But what if you want to use AJAX to create a more software-like experience? Historically, AJAX applications have been difficult for search engines to process because AJAX content is produced dynamically by the browser and thus not visible to crawlers. Thankfully, Google has provided procedures for making AJAX visible to its crawlers, which involves creating an HTML snapshot the crawler can see.

To learn more about how to do this, visit http://code.google.com/web/ajaxcrawling/

Utilizing SEO workaround for JavaScript applications.

There are times when it’s just not feasible to include all of a JavaScripts’ application code on a page. Take for example, applications such as build-it tools or calculators/configurators. While it’s definitely desirable to drive search traffic to the application, there’s often just too much data to include on the page. The workaround here is to design and develop the page with relevant, informative marketing content that “wraps” the application so search engines can see it and drive people to that page. For data-heavy JavaScript applications, developers can utilize a combination of AJAX and JSON (for the data) to decrease the initial page size and load time.

Let’s say you’re a window manufacturer and you have an online tool that calculates the energy savings one might realize if they replaced their old windows with new energy-efficient windows. Because the application is quite robust, the data that drives it is too extensive to include in the actual page source, which means search engines will likely not be able to index it. But since this is an important marketing tool, you want to drive search traffic to the page. The way around this issue is to build marketing content in areas on the page that lives outside of the application. This might be a right column area, a callout box or a header of some sort.

Delivering optimal search results and user experiences.

As user experiences get richer, it becomes more complicated for developers to account for how search engines will look at and find the data, making it even more critical that IA and UX professionals work closely with front-end developers early in the process. Such communication enables developers to understand what the user experience should be and determine the best coding approach to deliver both optimal search results and end user experiences.

If you’re building—or already have—an experience-rich website that uses JavaScript, and you’re not sure if it’s optimized for search engines, ThoughtMatrix can help. Our experienced development team is available to audit your site and make recommendations for how you can achieve the best balance of enhanced user experience and search engine optimization.