This article aims to puts an end to the debate about creating SEO friendly Flash sites. I will discuss some fundamental tips and guidelines, giving you the opportunity to create attractive and interactive Flash sites which can be indexed by search engines.
The Debate
Developers and designers have long been debating search engine indexing with Flash. The conclusion has always been not to use Flash if you want search engines to index your content. Many clients have followed this mistaken belief for a long time. Whilst the client may have a real desire to choose Flash interaction, they usually avoid it to ensure that their sites will be well crawled.
The idea that search engines hate Flash means that many clients miss out on the attractive and rich content that Flash can create. Frankly, Flash did have issues with search engine crawlers. At the same time it is not a black and white situation where you have to take either Flash or search engine friendly site content; there is a wide gray area in the middle which we should consider.
It’s possible to gain the benefits of both sides through some tips that can help you enhance search engine accessibility for your Flash site. Applying these tips depends on the project circumstances as we will see in this article.
These tips won’t necessarily improve your Flash site, but they should help arrange ideas in your mind when you plan the first steps of your website building.
Flash Content
The first topic to approach is how much Flash you will have in your website. Generally, there are three types of websites based on the Flash content: no Flash sites, partly Flash sites and full Flash sites. Here we will talk about the last two types since the non-Flash websites are not our concern in this article.
Flash is an attractive media which helps you deliver content and provide a rich experience to website visitors. However, choosing between full Flash sites and partly Flash sites is mainly based on the website content and structure:
Partly Flash Content
If we have a look at news sites such as CNN and BBC, you would never imagine that these websites could be full Flash (the Adobe site itself is not even full Flash.) The conclusion we draw here is that it’s more suitable for some sites’ content to have partly flash content instead of full Flash content.
Generally speaking, for websites with massive content, highly dynamic sites and business sites, it is more suitable to have partly Flash content. The concept behind this idea is that such sites do not require the Flash attraction or functionality in most of its pages and content. However, websites similar to the above examples can embed Flash in areas that only requires the Flash interaction or functions.
News websites (such as the example above) only require Flash in displaying video and banner animation. Adobe’s website uses Flash to display products demos, banners and video tutorials, the rest of the website content being plain text.
Full Flash Sites
Full Flash websites do not only provide content, they provide the user with an attractive media experience which helps deliver an idea about a given subject. Design studios and creative sites which demonstrate creative potential often use full Flash sites.
Famous trademarks like Nike, Coca Cola and Adidas (as seen below) intend to provide users with an attractive experience through their Flash sites. The idea is to introduce their products through a technology that provides the maximum level of attraction and joy for the user.
Page Title and Metadata
Search engine crawlers execute the navigation in web pages from top to bottom. Therefore, the first lines presented to the search engine are the page’s title and metadata.
The page title is the title that appears on the title bar of the browser as the title of the page in the website. When you search for a website in a search engine, the homepage title usually appears in the title for the search. The first and most important step to increase site visibility in search engines is to provide relevant keywords in the page title.
The homepage title becomes truncated to a limited number of characters, with the amount depending on the search engine. For instance, Google only allows around 64 characters in the title.
The metadata includes both keywords and description. Keywords are separated words which represent the website content. Search engines have a limited number of keywords’ characters to index, so it is good idea to make your keywords honest and relevant to your content. The character limitation for keywords is around 160 characters.
Meta description is a small description of your website; this is indexed with the page title and meta keywords. Similarly to the rest of the metadata information, it has a limited number of characters that will be noticed. Again, the amount varies from one search engine to another; it is limited to 160 in Google, 165 in Yahoo and 200 in MSN.
Flash Optimization Process
The development process within Flash is not that far from the optimization process. There are two main methods to optimize your Flash content for search engine optimization. The first method is to have the Flash site divided over multiple HTML files as follows:
While the Flash website is embedded to only one webpage as seen in the diagram below, you can split your Flash site content to multiple web pages; each page having its own URL, page title, meta keywords and meta description.
Here, each of the SWFs for Home, Products, Services and Contact is contained within a different web page. Flash Website.swf links to each of these pages.
This method can help in reducing the total SWF file size as part of the optimization process and gives you the ability to add specific metadata to each page. For example, when you have a website that include, say, a products link and a services link, you can specify in the products page meta details the name of the product etc. and also specify the relevant information in the services meta data.
Along with the separated Flash files, the Flash site links are listed in the HTML pages, which enables the search engines to index the website URL directly without any work-around solutions.
The following diagram shows how to restructure a Flash website to consist of multiple HTML pages instead of one page.
The second method is to load the whole Flash site into one HTML page and have all the links embedded into the Flash file. Although this method can hide the Flash links and pages from the search engine, there are some work-arounds that can help you gain both the advantages of having the links inside Flash and of getting these links indexed as well.
There are a couple of libraries that can improve the search engine capabilities in Flash websites: SWFAddress and SWFObject.
SWFAddress is a Javascript / ActionScript library implementation that allows the URL of the browser to change based on ActionScript events or what is known as Deep Linking. This method can give each page or link in Flash a unique URL, which is indexed by search engines.
(Daniel Apt has discussed this method in his article Flash Websites: the Pros and Cons.)
SWFObject is another Javascript library which detects the browser’s Flash player version and provides an easy method to install it. It can provide an alternative text to display if the Flash site fails to load because of the browser restrictions or the Flash Player unavailability. For search engine crawlers which don’t support Flash, you can use SWFObject to provide alternative text and links that will be indexed.
The SWFObject documentation on Google code provides full information about this method.
Google, Yahoo and MSN Flash Indexing
One of the greatest successes in Flash’s history is getting the major search engines such as Google, Yahoo and MSN to index Flash content. This trend helps index most of the Flash content over the web. Furthermore, it will put an end to the dilemma about Flash and SEO forever. Also, it was a great step for search engines, with the increasing number of Flash content on the web and the real need to index this content for the benefit of internet users.
Early in 2008, Google developed an algorithm to index Flash SWF content over the web. This new algorithm could index any textual content inside the SWF files including text, links, and even buttons with text captions.
Later, in mid 2009, Google developed this algorithm a few steps further with the ability to index external text linked to Flash, such as text loaded as HTML and XML, and text located in other SWF files linked to a main SWF file (as mentioned in Google’s announcement, Flash indexing with external resource loading.) We can summarize the content that Google can index when crawlers meet SWF content as:
- Any text content located in the SWF file, whether it be static text, dynamic text, text over buttons or text links.
- External text content loaded to the SWF such as HTML and XML.
- Text loaded through Action Script including all versions of Flash ActionScript.
- Flash content implemented in the site via javascript such as SWFObject.
Most site owners are concerned with the major search engines, but if you’d like to extend your Flash site indexing, you can refer to the above tips to ensure that your Flash site content will be indexed in most of the search engines.
Conclusion
Gossip around Flash is rife. Other new technologies and how they may compete with Flash such as Sliverlight, Ajax, JQuery and (most recently) HTML5 video embedding capabilities are always being discussed.
Actually, these are narrow thoughts about Flash. Other technologies may present features and technologies that are similar to Flash, but Flash has much more than a couple of features to compete with. In addition to the Flash features themselves, Flash provides one real exclusive benefit putting it in a unique position among competitors that can provide animation, interactivity or multimedia content: its wide integration. You can use your Flash application on the web, desktop, mobile and even TV broadcasting which reduces multi-platform project costs.
Plus, Flash integrates with both Adobe and Microsoft tools to provide the most enhanced workflow between applications. You can find more about the Flash integration in my article, Quick tips for integrating Adobe Creative Suite 3 products.
Overall, it is a big advantage to implement Flash in your website and interactive content. The above tips should help you to merge between the benefits of both Flash’s attractive content and creating search engine friendly websites.
I hope you enjoyed this article and found it useful, thanks for reading.
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Rafiq Elmansy
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Activetuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Great article, and I actually didn’t know that Yahoo and MSN had developed algorithms for crawling Flash movies, so thanks for that info ;-)
Thanks alot Daniel,
Your article is really great as well and I linked to it as reader will get alot of useful information out of it.
I didn’t know that either and that’s a really good thing because I love flash and no matter what people say. Flash is not going away.
Theoretically google is already indexing flash external loaded content, but it has a lot of issues so far, but i know very soon all will be fixed, to index correctly i am using a hidden link in the page that send to another page with all the external contents showed by a php file… so this way it indexes all the html content…
This is a great article, thanks a lot for this dude!!
Hi Andre`
This is a good work-around, but I heard that Google hate hidden content and sometimes penalize it, so just make sure it is ok for google search engine
great article very informative I actually stop spending some time on building flash website because of this issue of SEO optimization… this helps alot..
I’ts a good tip to separate your content in different files, thaks for the article.
Also, one standard google is asking for us developers to do (for it to index flash or ajax based pages) is to add an exclamation point (!) after the cardinal (#), facebook is already using this method. for instance:
http://www.facebook.com/#!/?sk=messages
Thanks a lot for the helpful addition ;)
Really great article !
I love it when people support the flash platform, lately everybody ( clients at least ) say thay flash cannot be indexed, and it took a bad reputation among those who don’t know flash well.
Thanks alot for supporting the Flash platform. As an Adobe Community Professional with main focus in Flash design, I always hated this wrong idea about Flash, and feel happy when I see people love to support Flash platform. It can create great content with low budget and easy to gain experience. Sometimes I feel that Flash is some thing similar to Java. You can use Flash on mobile, touch screens, web,TV, Video, DVD, desktop with the least developing costs and some times with implementing the same code.
Add to this integration between it and other Adobe Creative Suites applications.
pls i have design a presentation with flash and i want to put it on cd, but i want it to be a bootable cd. how can i do that.
This article is fair, but it’s missing some pieces. Google may find your page, but the majority of cell phones won’t be able to load it. This is not just iPad or iPhone, it’s everything that’s not in the latest batch of smartphones (and most of those too). Developing a full flash site is bad advice 90% of the time.
Actually, I have no idea why Apple new technologies do no support Flash when HTC started to support it through the Hero version, but it is good to put this issue into consideration.
On the other hand, we can not compare Flash with other media on the web such as video and suggest to exclude it if some version of mobiles or iPad does not support it, Flash goes beyond just a media, it is a plateform and provide solutions further than, web developing tool. Flash bring to the web a full interactivity, Flash animation, presentations, elearning courses, video streaming and more.
However, if the client aim to address mobile users, there can be another html version of the site optimized for the mobile users.
From what i understand this was a Steve Jobs thing. He wrote a scathing critqiue of Flash as a crashy, unstable environment to develop in. He also referred in that piece to Flash being old technology. Which is also debatable.
I don’t think this is necessarily the case.
Jobs outlined 6 reasons why he doesn’t like Flash http://techie-buzz.com/mobile-news/6-reasons-why-steve-jobs-hate-flash.html. It isn’t open, its crap etc.
However, some doubt his sincerity and contend that he has taken this position for other business related reasons: http://tech.fortune.cnn.com/2010/02/19/why-is-steve-jobs-flash-obsessed/
For instance at the time the Wall Street Journal editors suggested that perhaps:
“Flash would also allow iPhone and iPad users to consume video and other entertainment without going through iTunes. Flash would let users freely obtain the kinds of features they can only get now at the Apple App Store.”…. Who’s being proprietary now?
However, I agree with the 2nd link where the writer states:
“Apple makes most of its money selling hardware, not 99-cent apps. What’s really going, according Brightcove CEO Jeremy Allaire, is a battle for power and control among the Internet’s dominant platform companies: Apple (AAPL), Adobe (ADBE), Google (GOOG) and Microsoft (MSFT).”
What I do is put the text content of the flash site into a Div and with CSS indent the Div off the page, give the Div a width and a negative position of -9999 and a position of absolute, which takes it out of the document flow and stops any additional scrolling.
Within the Div you can Put your headings and paragraph’s. So when google and others looks at the site they think, here’s a really wide page with some content on the left I can Index and this flash thing on the right.
It doesn’t have to be 500 lines of text, just the important things that relate to the content of the site.
I’m guessing but I would think that screen readers would pickup on the text and treat the flash part as a banner or something.
So what if people have css turned off? Well the text drops below the flash content, assuming you put your div after the flash content in the html file and if they don’t have flash installed, or java turned off, then they see the text.
Also remember that people with CSS and Java turned off are seeing the web in a funny way anyway and
probably think the site look great :)
It may add half a second longer to the load time of the html file which is no big deal.
I know about this work-around, but I do not know how Google consider it as they are very sensitive toward hidden content or so.
It’s the same principal as using an image as a logo and indenting the text off the page.
Your not hiding the text, if you indent to the right and someone has a large enough monitor they would see the text.
I do almost the same thing, but i use a Main content and in the content.php has all the information…but alto the contents.php detects if it´s not a roboc accessing it redirects to index.php or flash_content.php for example…
Wow, it showed as a link…
it´s a link, href with display blog to content.php… so it doesnt appear
Great Article, Jazakum Allahu Khayran, but you talk much about fixing HTML to allow search engines, Google and other search engines crawl your flash swf file, but that takes time more than crawl your static HTML files, the html-comment generated by the adobe-flash publishing process also works good, I write all the keywords required for a specific swf flash file on single frame, properly to make it more easier to be extracted out by any swf-parser, and it works :-)
Thanks alot Mohammed, this is a good idea. Does it work if the text is loaded from external file?
hay,
This is a great post and it provide great support to the flash designers. Thanks alot
Mark
Rafiq, thanks for the great tutorial. We also try to solve different SEO issues that may happen on FlashMoto websites. Constantly working in this direction.
World, I want to say you a big secret.
SWFAddress deeplinking does NOT help search engines to index content, everything in URL after #anchors is not indexed by search engines.
SWFAddress can only redirect http://example.com/page to http://example.com/#/page, that makes sense only if you have html website ‘under’ flash.
It doesn’t?
Search this in Google:
site:facebook.com/#
Err i beg to differ. Check out the SWFAddress SEO example.
This uses the apache php rewrite directive to create actual html for each deeplinked page. The nifty bit is that it provides a deep linked path without the #.
That’s right – a way for google AND iphones AND ipads to view the content of a full flash website.
I’ve been using this for over 6 months now and have around 300 customers happily checking out their google sourced traffic in their google analytics reports ;-)
In this video: http://www.adobe.com/devnet/seo/articles/flash_seo_videos/part04.html
Damien Bianchi says that, it’s a ‘common misconception’ that deeplinking is SEO-friendly and that ‘google doesn’t index anything past the #’
So how is that? Is he wrong? Or just things have changes since Dec 2009?
I have an other question too: do you know any best practices on how to differ the RIA-s textual content for the search engines? (Like with the , tags in HTML)
loved the article))
I also did not know that Google and others came up with such indexing algorithm. Awesome news
Great!
great! I like it.
Very interesting information concerning Flash Websites vs. the SEO perspective. After reading through each comment, viewing the suggested links provided and doing a little digging on my own, it seems that the algorithm that Google has provided actually works. Although it is not flawless and I’m pretty sure still being updated to tackle more improved issues associated with Flash, Flex, and SWF related content / Websites, it still works. Grant it, this is up for interpretation, but I must agree with Rafiq in his initial blog.
Information surrounding the “deep linking” method:
Per Bugyinski’s information, I have viewed the video link and found it to be very informative. Apparently this type of discussion has merit as others are still confused about how this works…if it actually works at all.
Here is a quick Q/A discussion created 18 May 2010 in Google Webmaster Central with the questionable title “Does Google index FLASH Deep linking URL’s using the # hash mark?” Very interesting answers to this question as noted via the discussion link below:
http://www.google.com/support/forum/p/Webmasters/thread?tid=3e135e353dcb0698&hl=en
Hope this information helps. Again, very good read Rafiq. Thanks a great deal for the enlightenment.
Very good article here.
I should say that even though I’ve built a few flash sites, I still can’t see the content being searched by the major search engines and I’m not really sure why (the sites I built didn’t have swfaddress but at least used xml and static text).. This is why I still believe that flash is NOT being indexed by search engines.
In my experience with Flash, you can also utilize tags to place HTML content in the page in order to supplement some of the content a search engine may not otherwise be able to scan.
This is a tactic you should be careful with and is not meant to allow people to stuff content, but instead should be used as a way to supplement the flash piece with appropriate content – as well as any internal website links to ensure they’re crawled.
Sorry, my above example dropped my code. But the tags I was referring to are noscript tags.
I quote: <>
IMHO that’s not 100% correct, if we look at Daniel Apts post in detail, with this method it is not the flash that got indexed by search engines but the html pages beneath it.
Once the visitor lands on the html page there is a javascript flash detection script that, with the help of SWFAdress can redirect the page to a deeplink inside the flash.
I’ve been looking for examples of flash websites where the “SWFAdress deeplink urls” themselves are indexed by Google as if it were seperate pages, but didn’t find any. Does anybody have a good example of this?
Grts,
Bart