Flash & SEO, A Home Run for Barefoot - Part 2
Dr. B. | Wednesday, June 14, 2006
To start, each "page" or sub-section of content is stored in HTML in a content manager. In our case, we're using a custom solution we developed using MySQL and JSP. This HTML includes CSS to format the text, along with links that can navigate within the site and external to the site.
Each "page" within the site is indexed using a section & subsection reference. The structure is
The site is architected in a Model-View-Controller pattern. So, all content is accessed by passing data to a single controller.
The controller can interpret URLs to view pages in two forms:
The controller parses URLs in either of these two forms so it can locate the correct HTML content from the database.
To match the SEO-friendly URLs with the section/subsection scheme, all of the possible paths are stored in multi-dimensional arrays. The controller searches the arrays to find the position of the section and subsection within the arrays. In the above example, it would locate "step_up_to_the_plate" as the third item in the SECTIONS array, and "pitch_in_some_green" as the third item in the SUB_SECTION array for the chosen section. (That's where we get is=2, iss=2, zero-based indexing).
Once the section & subsection IDs are determined, the controller retrieves the HTML content from the database. We then move to rendering the retrieved content inside the Flash, and in HTML for indexing by search engines.
To use SWFObject, you place a
<DIV>block on the HTML page where you'd like the Flash to display. If the user has the correct version of Flash Player and all is well, the Flash application will replace any content you put into the
<DIV>. Otherwise, content in the
<DIV>will display and the user will not see the Flash. This includes "users" of the web page like search engine spiders and other automated processes.
Now, back to our application. Once the controller has retrieved the HTML content, it puts it into the
<DIV>block where the Flash will display if the user has the right version of the player installed. It also passes the input section and subsectionID as flashVars to the SWFObject instance which will render the Flash if all is well. The Flash application will then append the section and subsection IDs to a URL that reads the HTML from the content manager into an HTML text field within the Flash.
With this content in the
<DIV>of each unique URL, we create a site map that includes every possible link, and embed that into the
Another detail is that links within the HTML content need to work correctly whether clicked inside the Flash or in the HTML-only version. To accomplish this, all links to other sections within the site use full URL structure above, like
/pifbweb/ui/step_up_to_the_plate/pitch_in_some_green/. If the content is being retrieved from Flash, we append a parameter
&switchLinksToFlash=trueto the URL which tells the controller to change all these URLS from standard links to an asfunction call. In this way, all links inside the Flash call an internal function that animates the section/subsection change without reloading the whole Flash application.
Doug Smith, Senior Developer, Barefoot