Saturday, May 22, 2010

SEO for Flash Websites

Flash-based websites are becoming more important and popular on the Internet. Sadly, Flash websites are not exactly SEO-friendly. If you want to improve the indexing (and hopefully ranking) of your flash-based website, keep reading.
Although there has been recent good news about Google improving the crawling and indexing of Flash content, it is still a good rule of thumb not to go overboard when it comes to developing flash websites, and stick to the classic rules of search engine crawlability.
Before you can get a high level of search engine traffic/organic traffic (provided also that your website has that amount of trust and authority in Google), your content needs to be crawled and indexed by search engine bots.
If your website is based on Flash, it is possible that there are some crawling issues that lead to decreased or even no text content being indexed, which can affect search engine traffic.


SEO for Flash Websites - Title Tag of Your Pages
Let’s do this step by step so that it will look easy. The technique involves rendering some of the parts as HTML so that you can add important SEO onsite factors like title tags.
For example, this is in pure flash:


However, it is better to use HTML title tags and other important SEO onsite elements by adding an HTML-based structure in addition to Flash.
Recommended Code Structure:


Search engine bots like Googlebot can now recognize an indexable title tag in HTML syntax. Do more research and make your title tag descriptive and accurate based on your content. Keywords in your title tag are still an important SEO onsite factor.
The flash content is placed within the body tag.
Here is a screen shot of a flash page with the Title tag element:




SEO for Flash Websites - Crawlable Text Technique in Flash-based Content

This is where most good Flash websites can have crawling issues pertaining to plain text. Take a good look at the example of Diane Warren’s website: http://www.realsongs.com/
Although it uses a fairly descriptive and accurate title tag, when you examine the page with the Lynx Text Browser (recommended by Google as a substitute for the Googlebot's eyes):

As you can see from the screen shot above, you will never be able to see the content in Flash being rendered correctly and accurately in a text browser view. Even with some degree of advancement by Google in crawling Flash-based content, websites like this still do not have indexable content, as confirmed by its cached text: http://webcache.googleusercontent.com/search?q=cache:vrrJsvl9T3AJ:www.realsongs.com/+diane+warren&hl=en&strip=1
And a search engine query of a sample content within Flash:
http://www.google.com/search?hl=en&q="Diane's+Concert+Airs+on+PBS,+June+8th"&aq=f&aqi=&aql=&oq=&gs_rfai=&cad=h

So what is the solution?
One recommended approach is using noscript tags and inserting them it before the end of the tag.
Recommended Code Structure:

So if you are presenting "The quick brown fox jumps over the lazy dog" in Flash, which cannot be indexed by search engines, you might as well put it in a noscript tag:

A good example of using noscript tags to provide an alternative text indexable by search engine bots can be found here: http://www.php-developer.org/about-codexm/

All of the content has been rendered in Flash, but since there is no indexable content (like the example previously), a noscript tags has been added and is now indexable by search engines. Here's a view of the page in the Lynx text browser: 

Important: it is recommended that your Flash-based content and the content in noscript tags match, because if you are presenting different content to search engines, this might be considered “cloaking,” which is against quality guidelines.



SEO for Flash Websites - Maximize the Important SEO Elements in the Head Section

A pure flash website does not have an optimized section for SEO; it might even have no 

section at all. Below you will find some tips on what elements need to be added to the head section.

First: Controlling related snippets
One big advantage of using the noscript tag is that it provides an opportunity for Google to pick up related snippets in the search results. This will contribute to the long tail traffic of your website.
For example, if I do a search for: "Website traffic monitoring software using Visual Basic Macro," the result in Google highlights the snippets related to the query (the return URL is Flash based):

http://www.google.com/search?hl=en&lr=&q="Website+traffic+monitoring+software+using+Visual+Basic+Macro"&btnG=Search&aq=f&aqi=&aql=&oq=&gs_rfai=
As suggested by Google in their SEO report card, http://www.mattcutts.com/blog/seo-audit-video/ , you might consider using meta descriptions of URLs with no content or no snippet to return.
This meta description can induce some click through from search engine results, particularly if they are accurate and descriptive to the search query.
Second: Canonicalizing your Flash website URLs using Link rel canonical tag.
You can implement the link rel canonical tag to emphasize canonical URLs to search engine bots like Googlebot.
For more details, read here:

http://googlewebmastercentral.blogspot.com/2009/02/specify-your-canonical.html



Third: Verify your Flash website in Google webmaster tools using Google verification meta tags.

Syntax:



You can get your own verification if you add the website in Google Webmaster Tools.
Finally, the updated code structure will look like this:



SEO for Flash Websites - Crawlable Text Links in the Navigation Menu
You have learned the importance of using the Lynx browser to detect whether or not hyperlinks can be seen by Googlebot.
One important technique involves adding crawlable text links in the footer section of your flash website. These links either point to other flash URLs or other pages on your website.
You can insert these text links next to the noscript tag you added earlier. So the code structure will now look like this:

You can further maximize the use of internal links in your website using the above technique. The important thing is to use tags for hyperlinks, which is a tag for HTML text-based links.
A good example of a Flash-based web page using HTML text links for navigation is shown here. You will notice that there is a text-based hyperlink added on the footer section of the website.
Depending on your site design and developer, you can put a text link not only on the footer but on the header and sidebar as well. Youtube is a good example of a website with Flash-based content that uses HTML text links for its navigation.
You can even integrate other important SEO onsite factors to make your Flash website SEO friendly by looking up the list mentioned in an earlier article here on SEO Chat.