Making Flash websites search engine friendly

Google Flash logo mashup

In my daytime job I’m a Flash developer. But when it comes to creating websites I don’t think Flash is the way to go. Not just because Flash has some serious accessibility issues, but mainly because Flash-only websites are very search engine unfriendly. They usually consist of only one HTML page, and most of those contain no readable content. So Google, MSN and Yahoo will have no clue as to what your site’s about. I’ve been pondering things you could do to fix or at least improve this. I’ve played around with a few of these ideas and techniques, others are still on my to-try list. Please let me know if you’ve come up with other solutions or have anything else to add.

1. Use SWFObject.

Geoff Stearns’ SWFObject is the way of embedding Flash movies into HTML pages. It’s only drawback is that it uses Javascript, but in return you get the best plugin detection that (no) money can buy, a fix for the Internet Explorer activation issue and the ability to add HTML content in a placeholder div for search engines and people with no Flash player installed. Put a short summary of what your site about (make sure you use plenty of keywords), along with contact details in there. That way, Google will a least find something it can read.

2. Accomodate deeplinking

Through a bit of PHP(*) and actionscript you can make sure anyone calling up www.yoursite.com/index.php?page=contact is taken to the contact ‘page’ in your flash movie. For a simple timeline-based Flash website the actionscript needed can be as simple as:

if( page != undefined ){
gotoAndStop(page);
}

If your movie has a key frame labelled ‘contact’, it will be shown.

Flash timeline with labels

For this to work you need to use PHP to tranfer the ‘page’ url variable into a flashvar. With SWFObject, the javascript code needed in the page will look something like this:

var so = new SWFObject("movie.swf", "mymovie", "200", "100", "7", "#336699");
so.addVariable("page", <?php echo $_GET['page']; ?>);
so.write("flashcontent");

Besides the obvious advantage of being able to send someone a link to a specific page, this also allows you to use a Google sitemap. Make sure you include a ‘menu’ listing of these links in the placeholder content so search engine bots can follow them.

A variation to this approach might be to create copies of your index.html with descriptive name like ‘about.html’. These can have different placeholder content but load the same Flash movie. No need for PHP, just add the right flashvar to have the movie skip to the right page. Obviously, this approach is best suited for small websites with only a limited number of pages.

* = Or any other server side programming language. Javascript probably has a few tricks up it’s sleeve as well.

3. Google sitemaps

A Google sitemap is an XML document that you place in your site’s root folder that contains the layout of your site. Google’s indexing mechanism will use this info to index every page on your site. You can simply put the “?page=something” links in there, and each page will be indexed. Especially for large websites, this could be an ideal way to make sure all your pages are spidered. Without having to link to every single one from the placeholder HTML.

4. Dynamic placeholder content

With the tweaks covered so far, each ‘page’ of your website will still have the same placeholder content. Whatever you chose to put in the SWFObject placeholder div. The trick now seems to be to generate a page with placeholder content that matches the content of the page the Flash movie will (initially) display. If you’re using something like “?page=about” in your URL, your movie will load(*) and display the about page. From then on, the user can navigate the site, but the placeholder text won’t change. This is not a problem, as search engine bots will not do this and the sitemap will ensure all of the URLs are called. So all we need to do now is create a script that inserts the “about” page content formatted as HTML into the page’s placeholder div.

If you’re using a CMS type solution, this might turn out to be quite easy. Instead of just generating XML for Flash to read, output that same content as simple <p>’s and <ul>’s and insert that into the page. For static websites this can be a bit of work, as all content needs to be maintained in the movie (or the XML files it loads) and in the PHP code. But if you’re serious about ranking well in search engines, it’s probably well worth the effort.

I’m not sure if Google will like this, any type of dynamic placeholder content might be considered ‘cloaking‘. Your best bet is probably to have the Flash content and the placeholder content match exactly.

* = Most Flash websites I’ve worked load XML data either from disk or through something like SOAP or Flash Remoting on a per-page basis.

5. Adding internal links to the placeholder content

Google sitemaps are great, but unless you create a script to do this for you, updating them can be a lot of work. A more practical solution could be to convert the internal links used in your Flash project into HTML. I’ve built numerous Flash projects that use a single XML document to describe each page. A link from one page to another might look something like:

<next>page2.xml</next>

This tells my Flash movie to load page2.xml when the next button is clicked. If your project uses a similar setup, it shouldn’t be too hard to translate this into:

<a href="index.php?page=page2">next</a>

If you succeed in adding links from your XML source as regular HTML links, your site will be truly indexable. In fact, you’ve now created a working HTML version of your website inside SWFObject’s placeholder div.

6. To the extreme: HTML style page refreshes

Since we’re now using HTML content in the placeholder div, search engine spiders will follow the links in that content and truly spider your website. One further step you could take is to use the same links inside your Flash movie. So if you’re on the about page, and the user clicks on your ‘contact’ button, use actionscript’s getURL command to get index.php?page=contact.

contact_btn.onRelease = function(){
getURL( "index.php?page=contact" );
}

This will cause an old-fashioned page refresh, but it will also update the address bar so people can bookmark all the pages in your site. The Flash movie itself will be cached by the browser, so page load times should be minimal. If you need to maintain user info from page to page, a local shared object is probably your best bet.

There’s also a way to update the address bar through javascript, but I wonder if that works on all browsers and whether it allows for bookmarking. If you can live with the page refreshes, this seems to be the best option.

Conclusion

I haven’t tested all of these approaches myself, and I’m definitely not an SEO expert. But I feel pretty confident that having dynamic placeholder texts that make your website indexable for search engine spiders, along with unique URLs for pages in your website will improve your site’s rankings dramatically. Like with AJAX it’s a question of prioritizing presentation and SEO for your website. Flash is unrivalled when it comes to creating visually exciting websites, but its troublesome to get Flash websites to be accessible and indexable. If you do decide you want to go with Flash, these tips might just help your audience find you.

Roy | February 14, 2007 | English,Flash,SEO,Web design | Comments (36)

36 Comments

  1. Awesome info, thank you very much for sharing it. I’m still in diappers when it comes to Flash, but these kind of data is extremely useful for me and other developers around.

    Comment by Joe — February 20, 2007 @ 12:30 pm

  2. Thanks for this article Roy. It answered some very timely questions I have!

    Comment by Hudey — March 2, 2007 @ 7:55 pm

  3. It seems Google does indeed index Flash content .

    http://www.internet-marketing-analysts.com/Google-Flash_tutorial/

    Comment by Mahesh — March 5, 2007 @ 8:07 pm

  4. Hi Mahesh,

    I’ve actually downloaded the swf2html tool a while ago and I found the results to be very poor. Only static texts were extracted, and those are generally not used for important content. Most content is usually loaded in, and that’s where the tool fails miserably (or at least did when I tested it.

    I’ve actually set up a little experiment on this site to get more conclusive results.

    Comment by Roy — March 6, 2007 @ 11:22 am

  5. Hi,

    Really useful info so thanks for that. Making Flash SEO is a very important subject that the Flash world seems uneasy about. I don’t really understand that, as to me its a pretty basic requirement for a site these days, anyway onto my “question”

    I want to create a Flash site that loads in all its copy from either a mysql database or XML files or .txt files (or a combination of any of these). What would be the best methods to make the dynamic content indexable? it seems that its possible to “dump” the content to the page so spiders can see it? or would I create php code that does this? (either dumping the .txt straight, or building XML files?). Or should I use SWFobject, and place the dynamic content on the page with that? and how would I do that? haha, I think you can tell i’m a tad confused about this! :)

    thanks for any advice.

    Comment by boombanguk — April 15, 2007 @ 9:56 pm

  6. Hi Bombanguk. Although I didn’t really test it, my personal approach would be to give the main pages for your site a unique url, make sure they’re in your sitemap and then make sure the correct content gets put into the placeholder div.

    How to do this will vary from project to project, but you’ll probably need some PHP. I’m not quite sure what you mean by ‘dumping’, but I’de be interested to see what happens when you use PHP’s unclude function to add the content into the page.

    Comment by Roy — April 16, 2007 @ 7:15 am

  7. Thnx Roy Great post!

    Comment by SEO Handleiding — May 9, 2007 @ 4:53 pm

  8. Thanks for this valuable information.

    I have always been put off from using flash in the past.
    May be time to reconsider.

    Comment by Roger Gordon — May 31, 2007 @ 4:22 pm

  9. To get the best seo results it is the best to make the index page a html text page and continue in flash from there. The recognition of text content remains much better.

    Comment by Frits Straatsma | datewereld dating — June 21, 2007 @ 11:05 am

  10. True, but still… any content contained inside the flash movies on other pages will not be indexed.

    Comment by Roy — June 21, 2007 @ 11:27 am

  11. Hi,

    I have recently been doing an online SEO course and it too mentions that flash sites aren’t very search engine friendly.

    Is that right when you say that the search engines don’t see anything in flash?

    I’m finding that of late, this website designing stuff is NEVER ENDING. The more I learn – the more I realise just how much I don’t know!

    Thanks Roy,

    Comment by Anthony Marquis — November 5, 2007 @ 12:24 am

  12. Great post! flash SEO is a niche in its own right! – cheers for the heads up on your take on it! – Bookmarked ya!

    Comment by ethical — December 7, 2007 @ 3:29 pm

  13. for point 6, is this link a solutions?
    http://www.asual.com/swfaddress/

    Comment by chup — December 30, 2007 @ 12:39 pm

  14. There also a free content replacemant JS script available , called ufo js

    Comment by edwin — February 11, 2008 @ 3:18 pm

  15. In fact, Geoff Stearns (SWFObject) and Bobby van der Sluis (UFO) have teamed up to create SWFFix, which was later renamed to the familiar-sounding name of ‘SWFObject’.

    Comment by Roy — February 11, 2008 @ 3:27 pm

  16. I didn’t think Flash could be remotely SEO. Thanks very much for this post.

    Comment by Daniel — July 15, 2008 @ 11:25 pm

  17. GREAT Post!

    I’ll definitely show your piece to clients with flash-only websites.

    And as for the point 4: No, as long as the dynamic placeholder content is the same content that can be seen in the flash movie, it is NOT cloaking (I’ve tested it many times).

    Thank you for writing this excellent article. Seriously.

    Comment by Maurizio Petrone SEO — October 18, 2008 @ 5:50 pm

  18. P.S. you should tell your users that something like

    is really unsafe, ant that they should employ input validation practices.

    Comment by Maurizio Petrone SEO — October 18, 2008 @ 5:54 pm

  19. Very interesting topic. I know I am late coming to the party but I just created a new site for a friend of mine because his ENTIRE site was in flash. He is a photographer and needs to have a nice looking site but the problem was he as not being ranked well. So I redesigned his site but I did add some flash to the header and his photo galleries. I am presume it’s ok to have some flash just as long as you have links and text that is indexable.

    One thing I found very interesting when researching various photography websites were that almost 99% of them were flash. And they all rank very well! If you go and do a search for los angles photographers or just pick any city and search for photographers you’ll find that they all have flash. There is one website that I found that is 100% flash and is coming up for almost every key term! I can’t figure out what they are doing but what ever they are doing is working very well. The site name evokephoto.com – just do a search for houston photographers or houston wedding photographers. They are defiantly doing something behind the scenes with this one.

    Comment by Daren Moore — August 22, 2009 @ 12:51 am

  20. I’ve recently started a blog, the information you provide on this site has helped me tremendously. Thank you for all of your time & work.

    Comment by web 2.0 domination — September 19, 2009 @ 9:07 am

  21. I think this site example has a very good flash SEO!!!

    And Google has a very good indexing system for flash content!!!
    Check this example (search google with u can play)
    http://www.google.ro/search?hl=ro&client=firefox-a&rls=org.mozilla%3Aen-US%3Aofficia

    l&num=50&q=u+can+play&btnG=C%C4%83utare&meta=

    You will see hwo google returns text from a flash component (placed on right side of

    the screen)

    Comment by Adrian Toma — September 24, 2009 @ 8:39 am

  22. thanks your comments !!
    this is good job!!

    Comment by street lighting — October 6, 2009 @ 9:21 am

  23. I didn’t think Flash could be remotely SEO. Thanks very much for this post.

    Comment by alp — November 23, 2009 @ 9:10 pm

  24. Thanks for the tips :)

    Comment by NewStar — December 28, 2009 @ 6:49 am

  25. @rob 7/10 for me i guess

    Comment by Seimor — December 28, 2009 @ 6:51 am

  26. @mika yeah, that was stupid from your side

    Comment by Jennifer — December 28, 2009 @ 6:55 am

  27. @mika yeah, that was stupid from your side

    Comment by Bugatti — December 28, 2009 @ 6:58 am

  28. Roy thanks for your article, it is great and have not heard too much of this important topic anywhere.

    By the way, do you think including meta tags in a php index file would help?

    Thanks for your response

    Bichito

    Comment by Bichito — January 19, 2010 @ 8:43 pm

    • Bichito, as far as i know all the major search engines do not use the meta tags any more.

      Comment by Roy — January 21, 2010 @ 9:27 am

  29. Roy:
    I uploaded my flash based website that is called via a .php file. I included meta tags in the php and the bing robot found it and listed me in number 5,however, google seems to not like the swf (flash file) and is not listing me or finding me. Somebody suggested to upload some “shadow” html in addition to my swf, but I am not sure how it is going to work, I will be experimenting and keeping you posted.

    The point is that at least for Bing, meta tags are still running and very strong, I did not expect to be listed in number 5.

    Comment by Bichito — February 4, 2010 @ 7:20 pm

  30. The tag cloud caught my eye whilst I was surfing around Hulu.com – the more I looked at it, the more mesmerised I became. It’s a fantastic innovation – truly well done! :-)

    //Martin (Stockholm)

    Comment by Martin Ross — April 21, 2010 @ 11:11 pm

  31. First I would like to say, I love the cumulus. I was wondering if you could place text to the side of the cloud, it seams it must be in a row by itself and I’ve tried several ways to edit this, but my text is still placed under the cloud. Is there a fix for this?

    Comment by M.D. — July 10, 2010 @ 11:22 pm

    • Hi M.D. Are you trying to change the widget or simply add it to a page? I’d recommend against modifying the code, but using basic HTML tricks link ‘floats’, you should be able to place text next to the cloud (or any element that’s not too wide for it to fit).

      Comment by Roy — August 4, 2010 @ 11:49 am

  32. thanks for your article, i think that even now flash is not so friendly to search engines, and your article is great even to 2010.

    Comment by amit — November 7, 2010 @ 10:34 pm

  33. nice articles..
    keep share :)

    Comment by Cyber4rt Crew — February 13, 2011 @ 7:15 pm

  34. This is good stuff. So many of our customers want Flash sites these days, and at the same time they want them to be complete SE optimised. It’s great to see that there are more and more ways to actually make this happen. Thanks!

    Comment by SEO Handleiding — April 8, 2011 @ 12:53 pm