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.
- Loss of keyword focus with multiple Lightboxes
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:
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.
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.
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.
window.location = "seofriendlyuser.php";
<? } ?>
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.