Flash & SEO, A Home Run for Barefoot - Part 2
Dr. B. | Wednesday, June 14, 2006
This post will describe more details about how Barefoot accomplished a high level of search engine optimization (SEO) with a recent all-Flash web site, Pitch In For Baseball. (The previous article is here.) One unique aspect of this site is not only that the content is indexed in search engines, but that the links that are returned by search engines take you into subsections within the all-Flash web site. Typical all-Flash web sites don't provide this level of access into the content.
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_, so "1_2" points to the content for section 1, subsection 2.
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:Notice, the first URL above passes a section ID and subsection ID directly, while the second URL uses an easily readable, SEO-friendly path.
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 understand how we achieve this, it's important to understand SWFObject at a high level. SWFObject is the premier method of embedding Flash applications into web pages. It is a very well-crafted Javascript library that optimizes process of determining the Flash Player version of the current browser, and hiding all that complexity from Flash developers.
To use SWFObject, you place a
Now, back to our application. Once the controller has retrieved the HTML content, it puts it into the
With this content in 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
Doug Smith, Senior Developer, Barefoot
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:Notice, the first URL above passes a section ID and subsection ID directly, while the second URL uses an easily readable, SEO-friendly path.
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 understand how we achieve this, it's important to understand SWFObject at a high level. SWFObject is the premier method of embedding Flash applications into web pages. It is a very well-crafted Javascript library that optimizes process of determining the Flash Player version of the current browser, and hiding all that complexity from Flash developers.
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 <DIV> block of the home page URL. Search engines start there, and can find and index every other page. You can see all of this if you view http://www.pitchinforbaseball.com with Javascript turned off -- Firefox makes that very easy. 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=true to 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
0 comments
Post a Comment
« Home