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:

• Lightbox JS
• Thickbox
• HighSlide
• Greybox
• Suckerfish HoverLightbox Redux
• Lighbox Gone Wild

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.

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.

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.

Bookmark to:

Related SEO Blog Post

• February 15, 2008 -- 4 SEO Solutions For Flash (14)
• December 14, 2007 -- More Tips About Making AJAX SEO Friendly with the No Script Tag (0)
• December 12, 2007 -- Making AJAX SEO Friendly (10)
• October 19, 2009 -- My 10 Main SEO Takeaways from SMX East 2009 (6)
• November 10, 2008 -- Top 5 Ways to Evalute the SEO Ability of Your Creative Agency or Web Design Firm (9)

There are really two main issues at the heart of potential SEO problems for the Viewstate variable:

1) The size of the variable can prevent the search engines from indexing some or all of the page.

2) The size of the variable pushes content down on the page, which makes it less important in the eyes of the search engine.

Let’s look at each of these issues a little more closely to really understand the concerns.

The first issue really stems from Google’s old “Best Practices” in which they used to recommend that Web masters make Web pages less than 100k because that is all they indexed for any given page. Thanks to technology advances, Google now indexes more than 100k. I have seen up pages of more than 500K indexed in Google and I am sure they do much more than that nowadays. Yahoo also has a the ability to index much more than 100k. So from that perspective, it is unlikely (although still theoretically possible) that you Viewstate variable will prevent search engine crawlers from indexing your content because of a file size issue.

The second issue is a little more problematic to draw a conclusion from. The thing is, although many SEO professionals including Rand Fishkin and Bruce Clay (scroll down half the page and read Bruce’s advice on Tables which has a direct correlation to this issue) subscribe to the theory that keyword prominence is important to SEO rankings, it is not clear if the engine would view the Viewstate variable as being equivalent to text and / or whether or not the search engines would view the prominence of the content any differently if it was preceded by the Viewstate variable. In other words, it may just ignore it, in which case the page content is pretty much equivalent with or without the variable as far as the search engines are concerned. And from a logical point of view, it makes a certain amount of sense. However, when it comes to Google and SEO in general, assumptions based on logic don’t always pay the bills…lol.

My philosophy about SEO has always been to eliminate as many unknown variables in the process as possible. And while I may have convinced a few people based on these observations that the Viewstate variable has no effect on SEO, it is virtually impossible to set up a controlled test to determine the effect absolutely. And so, because the potential for issues exists, my opinion is, don’t leave it to chance. Or in this case, don’t leave it to Google to decide if the Viewstate variable harms your search rankings. There are also some reports of problems with implementing Viewstate variables as it pertains to SEO (**note in this thread, Joe Brinkman of DotNetNuke proposes another possible solution). The other point I would make in justifying a change to the Viewstate variable to make it more SEO friendly (as well as PPC friendly) is that with big sites, this variable can have an affect on your load time and overall site performance. So it bears looking at even if you decide not to change it, to at least optimize the variables it stores.

So now that we have determined that we are concerned about the SEO effect that the Viewstate variable might have based on its default implementation, what can we do about it? We have four options:

1) Get rid of it (in other words, turn the Viewstate variable off).

2) Move the Viewstate to the bottom of the page. Another article about moving the Viewstate.

3) Make it smaller. You can use Viewstate decoder software to understand what variables are being passed and then eliminate the unnecessary ones. This can be very effective as the default setting for Viewstate is often times more than necessary.

4) If you are really technical, Peter Bromberg explains how you can move Viewstate to the server. ** Special disclaimer, I have never tried this personally but based on Peter’s credentials and the content of his article, I believe this would be a good solution.

In the world of SEO where there are over 100 variables (according to Google) that can affect rankings, its always a good idea to eliminate as many potential problems as possible. It’s also a good idea to not only optimize your site for rankings, but for users as well. And that means having as short of load times as possible. And with that in mind, I recommend using one of the four solutions presented here to make sure that the Viewstate variable is causing you problems you can’t see.

Bookmark to:

Related SEO Blog Post

• July 9, 2009 -- MSN, then Live, now Bing – What do SEOs need to know? (4)
• November 17, 2008 -- SEO on JavaScript Lightbox JS Content (3)
• February 15, 2008 -- 4 SEO Solutions For Flash (14)
• November 25, 2009 -- Will Google Copy Bing with Categories on the Side Bar? (2)
• April 10, 2009 -- Measuring the Search Cycle: How to Improve the ROI of Search (4)

Many of us has seen a website with Adobe® Flash®. It has attracted many website surfers every since Macromedia came out first with Shockwave® and then create a more lightweight version for the web, Flash. It’s main strength is the animation capabilities along with a strong scripting language that seems no one else on the market has matched . With the lack of competition and a superb product, it is supported by almost every browser and operating system with many third-party add-on tools made by several companies. It’s no surprise to see many sites using Flash these days.

But the problem is, Flash, just like images and videos, these are not made in a plain text language embedded within the HTML code using tags. A browser plug-in is used here that needs to be installed at least once in order for the web browsers to display Flash websites properly. With current day bandwidth standards this just takes a few minutes or even seconds.

Flash is in a binary file format, not in plain text which makes it more difficult to consistently or not possible at all for some search engines to extract the content found within a Flash file.

Do SEO professionals hate Flash?

Depends on who you are asking, I have heard many people in the SEO industry that just hate Flash period! Just because they claim these sites cannot be search engine optimized. The feeling can be mutual from some of the web design and development community that loves Flash and AJAX and just hates SEO (watch related funny videos).

Flash and AJAX are two technologies that enhance the user experience on a website and these technologies are going to stay here for a long time. Thus should be embraced by the SEO community and learn all the workarounds on how to implement a successful SEO campaign running AJAX or Flash. If your SEO analyst simply tells you do not use Flash, they just might not really know what to do with it.

SEO Solutions in using Flash

Below I will mention 4 solutions on how to optimize your website well even if they are running Adobe Flash. Since Flash cannot be interpreted perfectly and consistently by search engines, you run into 2 main problems. First is [1] the important text content rendered in Flash cannot be read well by the search engines and second is [2] navigational elements within Flash cannot be crawled by search engine spiders. Having this in mind, here are four tips on how to implement SEO successfully on a Flash website.

1. The Non-Flash Site Version for Sites Completely Made in Flash
   Content: If your website is made all in Flash and has no other HTML elements except the code that embeds the Flash file(s), making another website with the exact look and feel (for branding purposes) but does not have all the bells and whistles of Flash will make the content readable by search engine. Since this is like totally having a separate website, you would really expect the non-Flash website generating the search engine traffic, which will then funnel visitors through the navigation leading them into the Flash website.
   Navigation: Since there is a separate website with different pages targeted for different keywords, search engine crawlers will have the opportunity to see the links and follow them in the non-Flash plain HTML website and getting all pages included in the search engine index. With the nature of Flash, similar to AJAX, where each page view may not necessarily load a new HTML page with a new URL, it would still be best to create a unique URL for each “Flash view” that will be the entry point page from the non-flash pages. And once they arrive at the page, it can load the same Flash file and no need to reload a new page.
   

   In the image above, users aware of the website already will normally enter the page through the flash version of the website. And once on the homepage, the URL will no longer change although the “Flash Views” that serve like pages in the perspective of the user will change.

   On the other side of the story, Search engines will crawl the plain HTML version of the site. Which can generate traffic going to the HTML pages once these pages are ranking with proper SEO practices. And each page will have the option for the user to see the flash version that lies on it’s own unique URL and loading the same Flash file but going straight to the appropriate Flash view.

   Advantage: You can design your Flash as intricate you want. No limitations since the SEO’d pages are on the non-Flash website.
   Disadvantage: You need to spend more time and resources making the website. Having a Flash and non-Flash website is having two websites to maintain. More time, more resources, more money spent.
   Quick Tip: Flash can input data from XML documents relatively easy. Server-side scripting languages such as PHP, JSP, ASP, etc. can also import data from XML documents. Creating a unified CMS should make life easier in the long run, but may take more time to set up.

2. Alternative Content and Navigation
   Content: On the same page where Flash is displayed, somewhere else on your screen real estate some equivalent content of what was found within the flash file is also presented outside of Flash as plain text within the HTML code.
   Navigation If a navigational element was made in Flash, similar to the content, adding another alternative navigation on the site will help get all other pages crawled and index in the search engines. A common implementation of this is having footer text links at the bottom of every page.
   Advantage: Unlike the technique above, you do not need to make another website. Just make sure whatever text content you have on your flash file. Have it available elsewhere on the page outside of Flash.
   Disadvantage: Cannot be done on a full Flash website, but generally any website implementing SEO should not have a full Flash website.
   Quick Tip: Flash should be used best here for areas where you want to attract attention. Perfect for your unique selling statement, current product or service promotions. Whatever content was found here should also found elsewhere in a plain text format for the search engines to read. The animation is mainly used to draw the attention (not to annoy) of a user to read and pay attention to the Flash and hopefully draw in the user to read and explore further.
3. sIFR for Flash Designed Text
   Content: Text font designs used on websites are declared either in the non-standard HTML font tag or in the declared font styles using CSS. Either way, these layout commands are telling the web browser to load the font file available on the viewer’s local computer. In the absence of these font files, the browser will load it’s default browser fonts that is often Times New Roman. This limited web designers to use commonly installed fonts such as Arial, Helvetica, Verdana, Geneva, Courier, Times New Roman, and other common fonts decreasing the creative freedom of many web designers. So in order to design beautiful typefaces, you can either use an image or Flash but search engines had trouble reading these. Scalable Inman Flash Replacement or simply sIFR (many pronounce this is as sifer) is an effective use of Flash text replacement. This is similar to how CSS image text replacement is done, just done in Flash. What makes this even better than CSS image text replacement is sIFR can be used more effectively in CMS applications since both can be easily generated dynamically. Although an image with text written on the image can be done dynamically also with tools such as PHP’s GD library, it is not as easy nor resource friendly as sIFR.
   Navigation: The text on any anchor link is important in SEO for this is what gives meaning to what the destination page is all about. The important keywords within the a tags are your targeted keywords. But if the link is applied on a image or a Flash file, you have to make sure the targeted keywords are still read by search engines. In images you use the alt attributes. Since sIFR is used to ‘stylize‘ text and not for any other animated effect, sIFR is idea to add beautiful looking text links not sacrificing the crawlability of the links.
   Advantage: Ability to create styled text font faces that are completely viewable as plain text in the “eyes” of the search engines. sIFR is very lightweight and scalable. Relatively easy to implement and Google has expressed their acceptance of this method. sIFR also downgrades gracefully if Flash is disabled or not installed on a web browser.
   Trivia: Inman is the last name of Shaun Inman that first to experiment with Javascript code used in sIFR. This was then modified and improved by Mike Davidson and Mark Wubben so that is can be used to replace HTML text elements.
   
4. Use SWFObject
   Content: Probably something you have heard quite often if you have been keeping up-to-date with the latest SEO techniques and those who were not able to fully catch up may think this technology is so confusing. To explain this further, let’s explain how Flash is added to a webpage. Normally, Flash will have HTML object and embed tags. Within these tags is the source of the Flash file with the .swf file name extension along with several parameters how this .swf file is displayed such as the height, width and more. The SWFObject is a Javascript function that detects if Flash is available. As mentioned on Geoff Stearns website:

   SWFObject is a small Javascript file used for embedding Adobe Flash content. The script can detect the Flash plug-in in all major web browsers (on Mac and PC) and is designed to make embedding Flash movies as easy as possible. It is also very search engine friendly, degrades gracefully, can be used in valid HTML and XHTML 1.0 documents*, and is forward compatible, so it should work for years to come.

   Since this is mainly a Flash detection script and it replaces HTML blocks such as a typical div tag, plain text HTML content can be placed within the div tag. And only if Flash is enabled will it display the Flash over the div tag. A simple code implementation would look like this:

   In the section, the SWFObject is called.

   script type=”text/javascript” src=”swfobject.js”/script

   Also in the head or optionally in the body you have the SWFObject call stating the .swf file to load.

   script type=”text/javascript”
   var so = new SWFObject(“flashfile.swf”, “flashheader”, “400″, “200″, “8″, “#ffffff”);
   so.write(“flashcontent”);
   /script

   This will then look for the element with the ID flashcontent and replace it with the .swf file flashfile.swf. And anywhere within the webpage’s content, you can have:

   div id=”flashcontent”
   Text here, placed within these tags are search engine friendly. And can be read by search engines.
   /div

   This script mainly checks the browser’s Flash capability, since search engine spiders are not Flash enabled, thus Flash does not run. Aside from that, JavaScript is used to invoke Flash and search engines are not JavaScript enabled either. But since the content of the Flash file is displayed as plain text beneath the Flash in a div tag, search engines are able to read the content you gave of that Flash file.
   Navigation: In the same way how the content is replaced with Flash, navigational elements work exactly the same way. Having plain text HTML links within the Flash-replaced div tag.
   Advantage: Can work with full Flash sites and websites that have only portions of it in Flash. Full Flash sites can degrade normally into non-Flash sites without having the need for a visitor to choose which site version to view. Flash page URLs and non-Flash page URLs are unified into a single URL.
   Disadvantage: Very easy to implement shady to dark blackhat techniques with keyword stuffing behind the flash that can get you banned in the search engine. Although this is easily avoidable by simply not putting any content on the plain text HTML code that is not visible on the Flash file. As long as you keep it clean, you are safe. In Goggle’s Adam Lasnik’s own words in an interview by Eric Enge, he states:

   I haven’t happened to catch any of the SWFObject based flash sites, so, I can’t give a definite answer on that one, but the key thing here is that if the text that is essentially gracefully rendered outside of the flash for those who don’t have it, is identical to what folks that do have flash capabilities in their browser are seeing, then generally there is not going to be a problem.

   Trivia: SWFObject used to be called FlashObject. The name was changed due to legal/trademark reasons.

Do I block my Flash files?

Google has been showing their advancements in reading .swf files. Google can actually go into a .swf file and extract the text it can find within this file. Although it may not be a wise decision to let Google index your Flash files.

Above is a sample .swf file indexed by Google on a popular website. The title is totally meaning less and so is the description. And if ever someone does visit this Flash file, it won’t lead the visitor to the rest of the site. Google is indeed doing good in reading Flash files but in my opinion it is still not the right time to let Google index your Flash files as you cannot optimize them as well as you can with HTML pages. If visitors check the Flash file, you have a smaller chance into making them visit the rest of the site. And so far I believe it is only Google that has this capability and it is nice to still be search engine friendly to all major search engines. To solve this issue, you can simply place all .swf files in one folder and block them off in robots.txt.

Disallow: /swf/

In a nutshell, Flash is ideal for certain areas where you want to attract attention. Possibly highlighting some promo or doing a call to action. Blinking and jerky movements have been proven not effective and is more annoying. With Flash elements on a page, make sure you have alternative content and navigation for search engines to read.

• If you have a full Flash website, you can either has a complete non-Flash version or degrade gracefully using SWFObject./li>
• If you are just using Flash for small banner type purposes, you can simply serve alternative plain text content and navigation elsewhere on the page, or use SWFObject.
• For style font headings, with total font design freedom, sIFR would be the best way to do it.

If you are unsure how to implement all of these, leave a comment and ask us questions to clarify your thoughts.

Adobe®, Flash® and Shockwave® are tradenames of Adobe Corporation.

Bookmark to:

Related SEO Blog Post

• November 17, 2008 -- SEO on JavaScript Lightbox JS Content (3)
• May 21, 2008 -- Track AJAX and Flash Actions with Google Analytics Event Tracking (0)
• November 10, 2008 -- Top 5 Ways to Evalute the SEO Ability of Your Creative Agency or Web Design Firm (9)
• April 28, 2008 -- Mystery of the Viewstate Variable – Does It Really Affect SEO? (2)
• December 14, 2007 -- More Tips About Making AJAX SEO Friendly with the No Script Tag (0)