SEO Flash Solution Explained by an Optimized Flash Example Implementation

Adobe Flash Logos
Adobe Flash Logos

There are many SEO tips out there for people doing flash, but sometimes all these tips still keep some people in the dark on how this is really implemented. Some people say Flash can now be read by search engines, and you should not worry about it. Some say just use swfObject, and others say use sIFR and you should be good. For me I am not going to recommend any specific tool or script framework. You can use what works best for you. I am just going to talk about the SEO issues of running a full Flash website and it’s corresponding solutions. And to explain this better I’ve created a Flash demo site that implements most of the concepts enumerated in this blog post. This may appear more like a tutorial than a blog post, so expect this to be a bit lengthly. I plan to make this a bit detailed because I get the same questions over and over again from SEO clients who we give consultations on how to fix their Flash issues and this blog post shall serve as a good reference our clients could always go back to. So I talk about the following:

  1. Enumerate the SEO  issues with Adobe Flash.
  2. Give the solutions to the SEO Flash issue.
  3. And explain why our recommendation is a good solution to the Flash SEO problem.

Issue 1: A full Flash website is not an option?

Probably some SEO professionals have recommended this to you in the past. Just do not make the whole website in flash. Simply because you cannot optimize it in the same way you would optimize HTML. Although this statement is true, this does not mean just because a website is made all in Flash, it cannot be optimize to rank well for a keyword.

Recommendation: Our solution to doing SEO on complete full Flash websites

If Flash really helps in your website’s user experience and can help users in a way that helps in the overall selling/marketing of your products and services, then there is a good reason to keep Flash on your website.

Always note that doing SEO for a non-Flash website is easier to do, which translates to lesser working resources and just might also mean a lower price tag. Some SEO companies may not have any difference in pricing for Flash and non-Flash website, and this simply means their price is already adjusted to expect the worst or they are probably not aware yet of the SEO challenges of a Flash website.

The bottom line is, if Flash helps in making your customers happy or increasing sales, then keep it, otherwise remove it.  And if you do keep it, be prepared for the challenges in SEO.

Read more of the other issues below and as we continue, I will be referring to this full flash SEO demo page to explain all the concepts here.

Usability, Design & Development Considerations

Usability Design/Development
Flash is animated and “flashy”, but does not necessarily mean everyone likes it. Listen to client feedback, take surveys, ask people, or go though a full user testing service. If many people do not like it, then just remove it and you will do SEO a favor as well. Since Flash is a published/rendered .swf file from a source .fla file, you can think of it like a compiled software where you no longer see the source code. Future updating and maintenance is more time consuming than plain HTML. The main source .fla file should always be kept in a safe place for future updating.
People amazed with Flash may not be amaze with your product or service. Flash might be serving the purpose of making visitors happy but it might be for the wrong reasons. They are amazed and watches your website and not buy your product or service. To make updating of text content in the future, it would be best if text content is read from a separate text file or XML file. Not only does it make updating easier, it make SEO easier since HTML with server-side programming can pull the same data source and post it in a search engine friendly way loaded behind the Flash.

Issue 2: Search Engines cannot Read Flash

The main root of it all why doing SEO for Flash is done differently is because search engines cannot read .swf Flash files. In the past, both Google and Adobe has continuously mention they are getting better and better in reading content and links within Flash, and they are working closely making sure .swf files’ content can be read and is crawlable and will be willing to open the same doors to other search engines in the future.

Google seems to be leading in it’s power to read .swf Flash files and Yahoo is still on it’s way, but still there are reasons to not rely on this capability.

  • Google seems to be inconsistent in how it treats .swf files.
  • If text within flash is converted into a symbol to have changes in size or other properties and not just position, this text is converted into a vector format no longer recognized as text.
  • Yahoo is still working on their reading/crawling of Flash files and others are not capable yet. Better take advantage of doing proper SEO Flash practices today to get the competitive advantage while it is going to take some time for other search engines to follow. Once this is working properly on Yahoo, we should expect Bing to follow soon since Microsoft does own Yahoo.
  • Content within Flash cannot be optimized in the same way you would optimize content for HTML.
  • Based on Bing Webmaster Guidelines, if MSNBot cannot see any content to use as a Title or Description on a Flash website, it may get content from pages with incoming links going to your Flash website. This is not always a good thing since websites can also link to you with offensive, denigrating content. It’s better that you control what the title and description is than let Bing decide pull from another website we may or may not have control of.

Recommendation: Our solution to search engine readability of Adobe Flash content

To be able to cater to all other search engines is to not rely of the search engine’s power to read within the .swf file and just serve the content of the .swf file as plain HTML text.

Check our example SEO Flash Demo homepage, you should load this perfectly fine as a complete Flash site. Since this is only for example purposes, the example site is a very simple full Flash website. The Flash embed code is loaded by the web browser using JavaScript’s innerHTML property. This makes the page appear as if there is no Flash at all. And just behind the Flash where the innerHTML values are replace, this is were the text content of the Flash is added.

Flash loading is triggered by JavaScript in an external file. And search engines will not execute JavaScript which loads the Flash and will just see the content behind it.

This sounds like cloaking, it is cloaking? Isn’t cloaking bad for SEO?

Cloaking is showing search engines something and human visitors something else. This method somewhat does that, since search engines see a non-Flash version and users see a Flash version of the website. Although the content is EXACTLY the same, and this is the most important rule to follow when dealing with “cloaking-like” methods. Besides, this method of showing something else by using JavaScript is more widely accepted as a general practice. Google’ Website Optimizer does it, sIFR does it.

Other methods that have been abused for blackhat cloaking are user-agent cloaking, IP delivery and reverse/forward DNS detection where these type of methods are not recommended for our purposes.

In the screenshot below is my example SEO Flash implementation demo.

Homepage of swfSEO demo with and without JavaScript and CSS enabled
Homepage of swfSEO demo with and without JavaScript and CSS enabled

Usability, Design & Development Considerations

Usability Design/Development
What people see is what is on the Flash and not the text behind the loaded Flash file so for any type of user testing, make sure you are paying more attention to the Flash text and not the text behind it. This method above will work for SEO where the content in the Flash is in plain text at the back of the Flash animation. Although when you update the site, you have to make sure you are updating the content in both the Flash and plain HTML. To make this even easier in the future, make the content of both Flash and HTML pull from the same source. Such as an XML file, a plain text flat file or even a database so maintenance in the future is not a problem.
In accessibility, to be Section 508 compliant, the visual impaired and blind people use screen readers. With the technique mentioned above, text behind the Flash file should be readable by screen readers used by the  blind and visual impaired. The Flash in the demo page is inserted using the JavaScript property innerHTML. Doing it this way makes the code nice and clean where you can have all <script> tags all within the <head> section only externalizing JavaScript source files. In a way this is like using AJAX to display the Flash embed code. Even if I think this is the ideal and best way to do it, if you lack the time to implement it this way, it would not hurt to not use innerHTML and just a line of <script> tags calling a separate JavaScript file either using swfObject and just making your own using document.write.

Issue 3: Links are not crawlable in Flash

Google has been showing more and more proof over the years that it can crawl links within Flash files, but then again Google is not the only search engine. And even if Google can indeed crawl links in Flash files, sometimes the navigational elements within a Flash file does not link to a new page with it’s own URL. They are simply links that do certain behaviors within the Flash file, like opening up a text file, or making shifts in the timeline, so even if Google can see the link, it will probably disregard it unless it is linked to a absolute URL going to another webpage.

Recommendation: Our solution to making Adobe Flash crawlable by search engines

Within the plain text version of the Flash that loads behind it, Flash navigation should also have it’s plain text navigation equivalent within the content. This way when crawled by search engines it will be accessed on it’s own URL which will still load the same Flash file but with different Flash default options).

Products Page of swfSEO demo with and without JavaScript and CSS enabled. Notice not only the top bar links but also the side bar links exist that list the three other product links.
Products Page of swfSEO demo with and without JavaScript and CSS enabled

Usability, Design & Development Considerations

Usability Design/Development
Similar to what was mentioned above, this technique will actually improve accessibility and make the site more Section 508 compliant for the blind and visually impaired since the links will be visible to screen readers. On each new URL for every crawlable link, it is not our intention to have a separate Flash file since this will not be cached and will be downloaded again slowing down load time and this would even defeat one of the main reasons to use Flash, to avoid the page reload time. But when a different page is loaded, on a different URL,the Flash animation should behave properly but displaying the appropriate content within the Flash. Using FlashVars would always come in handy. And you can use server side scripting to write the FlashVars values.

Issue 4: Creating a Non-Flash Version to Compliment the Flash Version

There are several SEO professionals who I know that simply recommends to create a separate page outside of Flash that will serve as organic SEO landing pages. This does solve the issues of Flash not being readable or crawlable by some search engines but this give’s rise to other issues and here are a few bullet points why this would not be an ideal solution.

  • When the non-Flash pages start ranking, this drives visitors to the non-Flash version of the website. If the Flash is really needed which makes a better sale because of the user experience, then this does not help improve that situation. Although you can always devise a way to eventually lead the user to the Flash site after they land on the non-Flash version, this adds an extra step in the conversion process which is something we want to avoid and just lead people to the main conversion page or form.
  • Doing a 301 redirect on the non-Flash version to the Flash version will not help since 301s are only allowed when the redirect happens first in the loading of the page. So if this is done on the non-Flash version, Google will not even see the rest of the content since the first thing that happens is the redirect. A pause can be added using a Meta Refresh tag or a JavaScript window.location type of redirect so Google would have time to read the code on the page, but these types of redirects would not pass any link popularity or Google PageRank value. This would only help aid the user to get to Flash website which could possibly convert better and have search engines read the content of the non-Flash page as well.
  • But more importantly is there will be two pages that people could link to: The Flash version and the non-Flash version. Since the content will only be in the non-Flash version, the links on the Flash version will not help the non-Flash website to rank better. Some people may link to the non-Flash version because this is what they found online and some may link to the Flash version because this is what the user aesthetically likes. This spreads the important link popularity strength and not helping out in the ranking.

Recommendation: Our solution – No separate Flash and non-Flash website. Just use 1 website that can serve as both

Use the solutions mentioned above that puts together the Flash version and non-Flash version together. People that desire to link to the website will be linking to the same URL, thus helping in the ranking of the Flash website.

Issue 5: Using # in URLs

Why is the pound/hash/sharp/number sign (#) used in URLs?

#’s were first intended to be on page anchor links. These are special tags with names that you can refer a link to. Linking to these anchors will make the page scroll down or up going to the set location of the tag and not load a new page.

A common problem with Flash and Ajax, if someone wishes to link to a page or bookmark it, they may not be bookmarking the right content. Many Flash and Ajax websites behaves in a way that there are no page reloads with different URLs, thus if someone clicks on a link and the page and content changes, the URL does not. This causes the problem where users would want to link or bookmark a specific content page on a Flash or Ajax website and they end up linking to the homepage. By using # in URLs, variables can be passed around in Flash and Ajax websites where different URLs will be created but the page will not reload as long as the changes in the URL are after the # sign. Thus users can now deep link to specific content within Flash files or Ajax website.

The SEO issue of using # signs in URLs.

The # sign in URLs are read by web browsers and not by server side scripting languages like PHP, ASP/.Net, JSP, Cold Fusion, Perl and more. The same languages that are used by search engine crawlers. Thus search engines actually disregard anything that comes after the # symbol. Even if a website gains so many links from various hash tags in the URL, from a search engine point of view, all these links may all be going to the same place and not deep linking. There is also a possibility then that links may have various keyword focus diluting the main focus of a page.

Currently to date, only Google has been experimenting on reading content from # URLs using what they call a headless browser which is still in experimental stage. A headless browser is

simply a web browser with all feature of a web browser but has no visual interface. It works and behaves like a web browser thus it can display data from # URLs. This is still not running on the main Google server and so far only Google has publicly stated this initiative in trying to interpret # URLs properly.

Current day search engines will treat all # URLs as if the # and the characters after it do not exist.

Recommendation: Our solution to the # URL SEO issue.

  1. First is do not recommend the # URL.
    Recommend a real valid search engine friendly URL not using #’s. Somewhere on the page, cues like “link to this page”, “bookmark this”, “send to a friend”, or any type of link going to social bookmarking websites should be using the direct link URL without the #. This way any type of natural link building where people would simply link to you because they want to would give you the maximum deep link benefit. Although not full integrated in my example demo page and probably it is not the best way to do it, I just wanted to show it is possible. Try clicking on some links on swfSEO and see the direct link recommendation.

    What Google Maps does to recommend the direct URL. It has it's own "Send" and "Link" buttons that when you click on them, the direct URL link is created for the user.
    What Google Maps does to recommend the direct URL. It has it’s own “Send” and “Link” buttons that when you click on them, the direct URL link is created for the user.
  2. Do not reload the page on a new URL all time.
    This defeats the purpose of using Flash. Where one of the benefits is not to reload the page for a better user experience. Even if there are direct links to every Flash “page,” this does not need to be loaded on every link so users are not turned off by the reloading experience. Search engines will not be experiencing this since they will be crawling the actual HTML links.
  3. Still use the # URLs just in case users do not use the direct link recommendations.
    This sounds counter productive and against everything we have talked about but you cannot really control a user visiting your website. They will do what they want and if they decide not to follow your recommended direct URL, they will simply copy the URL and paste it. And when this is done, this is what is actually happening:

    1. Search engines will view it as if the link going to this URL has no # at all.
    2. People will see the proper content then they click on the link going to a # URL. If the link popularity metrics were not passed on to the proper deep link, at least it is still passed on to some other place that is part of the website. Better than no link at all.
    3. Redirect # URLs to their proper direct link. When # URLs are detected, use the JavaScript property document.location.hash to parse the # URL. This redirect would not be possible as a 301 redirect. The redirect will pass no link popularity metrics, but at least people that may decide to report the link TO some place else and copy and paste the URL, they will from now on, use the correct non-hash URL.

Usability, Design & Development Considerations

A special tool that can be used for parsing # URLs is swfaddress, this should make design and development easier using this script. Not only will this help designers/developers get the job done easier, this script also fixes the forward and back button of web browsers which is a usability issue in many Flash and Ajax websites.

*At current blog press time, the demo URL has not yet implemented swfaddress on swfSEO. This will soon follow shortly.

Issue 6: Using Only 1 URL

This problem was already discussed above under Issue 4 when having a non-Flash versions website, and also in Issue 5 when using hash and non-hash URLs. By now you should already know this is not a good thing to do and it is best to consolidate link popularity and PageRank to single URLs and avoid making people link to two or more different pages. The only reason I am stating this as a separate issue is I have seen some implementations adding in the URL a boolean flag turning Flash on or off.

http://www.example.com/path/file.php?var=val&Flash=on

or

http://www.example.com/path/file.php?var=val&Flash=off

Please bear in mind, any 2 URLs that are different in any way and has the same content causes a duplicate content issue which may harm sometimes in search engine ranking. And again this may cause problems of people linking again to 2 or more different URLs.

Recommendation: Our solution to one or more URLs

The solution is simple. Do not use 2 different URLs. Do not have a separate non-Flash website as discussed in Issue 4. Aside from # URLs, create direct links going to the pages as recommended in Issue 5. As long as there is 1 URL with the plain text content behind the Flash runs properly as discussed in Issues 2 & 3, there should not be a problem.

Issue 7: swf Files getting indexed

Not all .swf Flash files look good in search engine results.

Since Google can now look into Flash .swf files, there is a tendency that these .swf files can also get indexed. And sometimes the title and description in search results will not be looking good at all. Although Google has expressed in their updates that it is getting better, there is still a potential for it to not look that good.

Here are a few examples. The first and third search result, the title and description snippet looks normal, but in the middle one, the letters look spaced out:

Search query with spaced out characters.
Search query with spaced out characters.

Another one with spaced out titles and descriptions.

Flash Search Query
Flash Search Query

These titles and descriptions may not really matter, I can still imagine people clicking on these links even if the letters are spaced out. But something like this below might decrease clickthrough rates.

Flash files that get indexed with no description.
Flash files that get indexed with no description.

Although this may really be a problem with the Flash Designer/Developer. And we should not risk this opportunity to do better not only in ranking but in increasing clickthroughs from search engine results by having more compelling, more inviting titles and descriptions.

Traffic to .swf files might have an incomplete site

When Flash .swf files get indexed, and people click to visit the file, since these were intended to be included with an HTML file, sometimes the experience can be different. In the search results above… I actually tried some of the link and I enjoyed playing Ruffus Snowboarding and felt I was better than Shawn White.

Flash file with no other links going anywhere
Flash file with no other links going anywhere. Click to play the game. I liked it! 😀

This game actually works, but you get stuck on this site and has no other navigation going to the other parts of the Disney website.

Recommendation: Our solution to .swf Flash files indexed with bad SERP title and description and incomplete pages indexed due to .swf files.

The recommendation is simple. If you have optimized your Flash website properly, then there is no reason to get your flash files indexed. And if you are confident that you have done all optimization possible, then you can simply exclude Adobe Flash .swf files from robots.txt.

If ever some .swf files already get indexed and you have no intention for them to be indexed, then 301 redirect this .swf file to the proper HTML file that embeds this file.

Design & Development Considerations

It would be more convenient to save all .swf files all in one folder. This makes it easier to block them all by simply blocking the folder in robots.txt. Also make sure directory files without an index file is not allowed to be displayed or simply add a blank index file if needed with a 404 http status header.

Issue 8: I am using sIFR, am I already optimized for SEO?

If you are aware what sIFR is, you probably already know the answer to this question. But if you are not aware of what sIFR does, you have probably heard it from somewhere that sIFR is good for SEO and is not really sure that this is for. The acronym really means Scalable Inman Flash Replacement. Although his blog post is not about sIFR, all information on sIFR can be found from the original source. And all you need to know is sIFR is used for making graphical text headings only and not for running complete full Flash websites.

So people that use this are more interested in coming up with good looking text that is still interpreted as plain text by search engines and not really interested in creating complex Flash animations. sIFR is not a complete full Flash website SEO solution.

Design & Development Considerations

  • sIFR Alternatives
    If your main concern is not about making SEO friendly full Flash websites and is to simply come up with good looking text, sIFR is not the only option. You might want to also look into CSS Image Replacement, FLIR, TypeFace.js, & cufon.
  • Use only for headers
    All of these text replacement scripts are still programming scripts that use some amount of processing resources. They run really fast and you should not have any problems running these, but using them on complete whole paragraphs, the whole content of the page, you will see a significant decrease in load time. Thus this is ideal to use only for headers and subheaders on a page.

Issue 9: I am using swfObject, am I already optimized for SEO?

swfObject, previously called Flash Object is simply a method of embedding Flash files in HTML documents by using JavaScript. Thus swfObject can be used in all the issues I have discussed above.

Just because you use swfObject does not make a Flash website SEO friendly, you will still have to review all the issues mentioned above and do the appropriate solutions to these issues.

You do not necessarily need to use swfObject. swfObject is nice with good simple JavaScript code for embedding Flash files in webpages, although the latest versions of Flash has a similar JavaScript function to embed Flash files. The function named: AC_FL_RunContent is generated automatically by Flash right after you publish a Flash file.

Design & Development Considerations

The use of swfObject is totally optional, if you decide not to use it, you can stick with Flash’s AC_FL_RunContent function and externalize it as a separate JavaScript file. In my example demo Flash SEO website swfSEO, my implementation used neither of the two. It was simply using JavaScript and doing a document.write to generate the non-JavaScript embed code version and using JavaScript’s innerHTML to display of the webpage. The only reason why I prefer to do it this way, the code looks more cleaner, no additional <script> tag in the main content and are all in external files within the <head> section.

The Summary

  • Full complete Flash websites can be optimized for SEO purposes. As long as it is done correctly.
  • Have content as plain text. Google can read Flash files, Yahoo is working on it an Bing can pull content from pages linking to your webpage using Flash. Everything is not consistent and not yet perfect. Have the exact same content in the Flash file as plain HTML behind the Flash will ensure all content is indexable by search engines.
  • Use links in plain text. Even if Google can see links within Flash files, not all Flash navigation ends up in a new page. And Google is not the only search engine in the world. Have plain HTML pages and links in them that reflect the same content in the Flash file.
  • It is better to consolidate both plain text content with the Flash version on a single page, than create a separate non-Flash website since this spreads link popularity metrics.
  • Hash (#) URLs are good to use in Flash for deep linking, but remember search engines will consider the URL as if there is no # in it. Thus plain text links should be using valid search engine friendly URLs.
  • You can block .swf files in robots.txt if all your optimization is done properly. It is easier to optimize an HTML file than a .swf file.

Leave a Reply