Download the agency overview...
View our Agency Overview
Agency Overview

Expert Resources

SEO on JavaScript Lightbox JS Content

lighbox-story-702544

Lightbox JS was popularized by Lokesh Dhakar where he made a nice friendly degradable JavaScript function where thumbnails can be linked to their larger images but load dynamically using JavaScript in a separate <div> box that loads in an animated manner. Many webmasters have adapted this and users like it too since there are no more page reloading and the need to hit the back button to go back to the thumbnail view. You can see demonstrations on the Lightbox JS website. After Lightbox JS came out, many other implementations of this technology emerged where the applications have been used not only for images, but for videos and also any content in general. The benefit of using this technique aside from the seamless fluid integration, they do not open as separate popup windows using a new web browser instance that is sometimes anti-popup blockers.

Generally, when would you use Lightbox JS?

When you need to display something briefly to the website visitor and you do not want them to leave the current page where the page has to reload again and to move back, you would have to press the back button. Often you see this in:

  • Thumbnail Preview Images
    When clicked on, they open the larger image in a Lightbox.
    *Real life example. (Click on any image on the page.)
  • Thumbnail Preview Videos and other Animations
    Similar to images, just using animations or videos.
    *Real life exampleĀ (Click on any video thumbnail.)
  • Tips and Other Brief Helpful Information
    As guides to users on your website, you can give small tips here and there without them getting lost in the loading of a new page.
    *Real life example (Click for more information on each dog.)
  • Fill Up of Quick Forms
    Quick questionnaires, surveys and other simple forms that would only take a few minutes or seconds to fill up. People may want to fill up these quick forms.
    *Real life example (Click on Request a Quote)

SEO Issues in using Lightbox JS and Similar Technologies

Depending on how you intend to use Lightbox, each way can have their own unique SEO issue.

  • Content Written by JavaScript/AJAX
    If the content of the dHTML popup window is written by AJAX or even JavaScript alone, search engines disregard this content.
  • Loss of keyword focus with multiple Lightboxes
    Content of a Lightbox JS popup can be already existing on the same page but are not displayed right away using some CSS and/or JavaScript tricks and their contents only appear when pulled by the dHTML popup. Here is an *example of this where three lightboxes are on top, but the content is actually on the page already as non-displayed <div> boxes.Somehow this is sometimes good because the content can be read by the search engines as they are all on the same page. This works well for photo galleries with picture descriptions. At least we know search engines can read the content.This does not work if various Lightbox popups were meant to have different topics and this mixes the focus of the keywords on a single page.
  • Pulled from a different URL
    This may solve issues with keyword focus, as you selectively choose the content on the page and anything in a Lightbox can be on a separate page not diluting the content focus. Although the problem here is the content will be pulled in various ways, either AJAX or HTML iframes, where both have crawling issues.

SEO Solution to Lightbox JS content

There are many out-of-the box code, ready to use for the Lightbox JS effect. Here are a few:

You can totally make one from scratch or you can use one of the above and modify the code. For the purposes of this discussion, I chose Greybox. Because it is easy to use having the content source as a separate file. This solves the problem of content focus dilution. Greybox is pretty easy to implement by any web designer/developer and links are clean and degrades gracefully which is a good practice of using JavaScript and AJAX for SEO.

The solution does not rely on modifying Greybox in any way. The solution is really within the file that loads within the Greybox.

To explain this further, look at the *SEO friendly Lightbox JS example found here using Greybox.

There are two links found on that page. The first one is how you normally implement Greybox and the second is how it is done to make it SEO friendly.

The nice thing with these Lightboxes, the links are normal links with normal <a href=”…”> values, this way they are crawled properly by search engines which is good. The not so good part is when the contents of these Lightboxes get indexed by search engines, they are indexing a partial page and you do not necessarily want people to land on this partial page. Thus you can use JavaScript to redirect to a similar page with the same content but with the navigation and design elements the page normally has.

Why a JavaScript redirect?

Search engines disregard JavaScript, and this is what you really want to happen since the design elements are only for the users and not for the search engines. Just be very careful to make the content of both the Lightbox and standalone page exactly the same to avoid running into any red flags that may perceive the site do be hiding any content.

lightboxjs-inuse-729187

Notice in the examples above, there is no difference between the two implementations in terms of how it executes. Although as search engines crawl the contents of these Lightboxes, and when visited directly on a link from a search engine, people will see two different looking pages.

lightboxjs-indexed-758444

When both implementations will be crawled and indexed, the link found in search engine results will appear differently. The normal implementation will display a partial page that nobody would want to go to. This can be as worse as a 404 page. Because it seems to go nowhere and appears to be not part of the site. The optimized Lightbox JS example on the right will show something else. It will still pull in the correct page template and would work as a standalone perfectly fine. Thus pleasing both search engines and human visitors of your website.

Greybox uses an iframe running this file and parameter: greybox/loader_frame.html?s=0 Depending where you saved your greybox files, the absolute URL of this will be your referring URL. Using your favorite scripting language, detect the referring URL and redirect by JavaScript to a page for humans with the exact same content but with the design elements and Navigations. Also include a noindex tag on this page to avoid any duplicate content issues. In the examples posted, the SEO friendly Lightbox JS loads seofriendly.php, but if the referring URL is not Greybox, it redirects to a noindex page seofriendlyuser.php. This example used PHP with the following code:

<?php if($_SERVER[HTTP_REFERER]
!="http://www.ajaxoptimize.com/seogreybox/js/greybox/loader_frame.html?s=0"){ ?>
<script type="text/javascript" language="javascript">
<!--
window.location = "seofriendlyuser.php";
//-->
</script>
<? } ?>

Although this example was in PHP, this could also be done in other languages. You may need to do your own research on that for .Net, ASP, Cold Fusion, Perl, MivaScript, JSP, Phyton, TCL and other languages

*Examples above are used to show that this is used by current day web designers. BusinessOnLine is not associated with any of the websites used above. The examples above may change or modify their website over time and may not be valid examples in the future but were valid examples during the time this blog post was first written.