The Morphic Group

SEO or Search engine optimization is the skill set that helps market your web site/application. It is the process of improving the search results of a web site in popular search engines, such as Yahoo and Google. What it all comes down to is how your web content, text, is presented and referenced into searches. This process allows the search engines to effectively index or parse through your
web content.

Search engines use “spiders” (scripted site crawlers), that runs through the hierarchy paths of your content, looking for patterns and associated links based on text. There are guidelines to be followed when formatting your web pages. Google has these guidelines defined out. This is pretty straight forward for web sites that only consist of text. For Flash/Flex media, it is not so easy. Most of these “spiders” can't index into binary modules.

Recently Google has made strives in solving this issue. They have advanced the ability to index text in flash content. If all of your text content is embedded in your Flash/Flex media, your web content will be found in a search.

The problem is that most flash/flex web applications keep the text content external to the actual application. This allows the ability to change text without recompiling the application. External files can not be properly indexed in search engines alone [UPDATE: As of June 18, Google will index external content - google]. There are techniques to do this in a flash application. Kenny Bunch of Dreamsocket has a great article on Flash SEO.

In a typical Flex application, you may be using deeplinks for paging sections of your application and external text data. I will discuss a technique to improve the search results for Flex applications that have external text content with deeplink functionality. Note: For the most part, I am following Google guidelines.

Example Solution - "My Company"

Let's evaluate the content section of a example flex application. My application has three major sections: Home, About Us, and Clients. The “About Us” section has two sub-section Mission Statement and Company Location. The “Portfolio” section has two subsections as well, “Client List” and “Projects”.

Here is the hierarchy of the "My Company" site:

• Home
• About Us
  • Mission Statement
  • Company Location
• Portfolio
  • Client List
  • Projects

The company site has one page (index.html) that loads the Flex application(swf) and external files (xml, images, video, and stylesheet css). All of the text content for these sections are kept in external XML files.

In essence, we need to break out the sections into html pages. If possible, avoid duplication of content.

• Add a reference to the section in the title tag. This should always be unique on every page.
• The meta description and keyword attributes needs a unique and descriptive text.
• Each page needs to link to each other via a series of anchor html tags.
• Most importantly it needs to contain the particular text content that would pertain to the each page section. This does involve manually copying particular section from the xml to each
  html page, preferably into div tags.

Deeplinks are being used for paging ability. We need to make sure that the deeplink can be changed with the different page sections. Every page will reference the root of the site with the particular deeplink moniker. This way each page will open the correct section when it is found in the search. I will use javascript to direct the page deeplink back to the relative root.

document.location.href = "/#portfolio";

The search engine should ignore the javascript and parse or read the text content, the basis of the search text.

"My Company" example illustrates this functionality (right click application page to see and download source). SwfObject is used to reference the swf. The meta description and keywords are very general examples. Your project may involve much more thought into what information is used. It needs to be very detailed and unique.

With my "My Company" solution, I created html pages based on SEO concepts that can reference the Flex application. It should work as if nothing changed. The goal is to reference particular text content of web application, improving the search ability of the web site.

This solution does have one drawback. The text content is not centralized. You anticipate constant (monthly or weekly) changes are made to the external data. It will need to be changed in the particular page that references that particular content.

So a further discussion would be: Could we dynamically generate html pages that with the external data used? Of course. One idea is to use a server-side language like php or ruby to generate the site like we did with the static html solution.

Verification and Sitemap

To verify that your site will be viewed as expected by search engines, it should be viewable regardless of having the flash player installed or javascript enabled. The best way to check this is to view the site in a barebones a text-mode web browser like Lynx. This is a tool I used to check this: lynx viewer

Next, you will need to create a sitemap for referencing the content of your web application. For the "My Company" site I would created a sitemap with all of the html pages I found a great resource that automates the process: sitemaps.org. It also has some great information about what the sitemap consists of and what each attribute means. For the "My Company" site, I would create a sitemap with all of the html pages referenced.

Now submit your sitemap to a popular search engines (you may need to create an account). It may take up to a week to see real results.
Yahoo: Site Explorer
Google Web master tools: Webmasters

Note: The usage of these sources are beyond the scope of this article. I have found that the google webmaster tools are great for monitoring the progress of this functionality.

Summary

In this article, I gave some tips and a possible solution for getting your flex application noticed by the most popular search engines. It does take some trial and error to see results. In one project, it took some weeks of tweeking to the content to find the right results. I hope this article is helpful to you.

Tags: Deep linking, Flash, Flex, Google, Meta, SEO, sitemap, Yahoo
Posted in Flex, Technology

This entry was posted on Thursday, June 11th, 2009 at 1:22 pm and is filed under Flex, Technology. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.