Build 0.8.3.200911261311
24-January-2010 07:54 PM
SEO Generation Wizard
Overview
The SEO Generation Wizard is used with Progressive Enhancement. Progressive Enhancement is the layering of content in such a way that if you strip away any of the visual layers, a user is still presented with content. Progressive Enhancement is used to improve SEO support for full Flash sites by providing an HTML equivalent of the XML data that is used for the Flash site. Needless to say this only pertains to small to mid-size projects where a server-side solution is not in place. Should a server-side solution be used then a more appropriate solution would be to use XSLT rewrites on the server and serving those pages instead thus automating the entire process.
It's all about the data. This HTML generation could very easily be done manually through any HTML editor. That would mean copying the copy from the Flash XML to the HTML page. One might consider this but only if the certainty is there that the data won't change too often. Unfortunately as marketing these days is such a skill, the data will change and change quite often, be it for maintenance or target audience perfection. This is where this wizard saves countless of hours and even more so if the site is delivered in more than one market. Progressive Enhancement shouldn't be difficult to achieve and a tool like the SEO Generation Wizard helps this task tremendously. In today's era of devices, from desktop to mobile phones, the reach of a site has become even more important.
The REST Approach
It's worth pointing out that the REST approach should be used as a best practice when considering Progressive Enhancement. In essence this means having HREF's link to folders as oppose to the actual file names. The SEO Generation wizard makes use of this and therefore won't create unique files but instead an appropriate folder with an index.html file. Instead of the more traditional approach:
/index.html /about.html /news.html /contact.html
The REST approach will contain an index.html file within each sub-folder:
/ /about/ /news/ /contact/
How does it work?
The wizard uses a descriptor file and maps nodes from the language XML file to HTML tags. For example:
Language XML file<item id="title"><![CDATA[My Title]]></item>SEO Descriptor file
<htmlmap-body from="title" to="h1" />Output HTML file
<h1>My title</h1>
Input Fields Explained
SEO Descriptor
The SEO descriptor file. This file is used to describe the locale (data) XML to the wizard. See the SEO Descriptor Explained section for more detail on
the structure and features of this file.
<?xml version="1.0" encoding="UTF-8"?>
<seo-descriptor>
<xml-mappings>
<map nodeName="page" nodeNameAttr="id" />
<map compNodeName="component" compNodeAttr="id" />
<map metaNodeName="meta" metaNodeAttr="id" />
<map leafNodeName="item" leafNodeAttr="id" />
<map gaTrackNodeName="tracking" gaTrackNodeAttr="id" />
<map pageTitleNodeName="label" />
<map documentSWF="Main.swf" />
<map exclude="" />
<map navigation="home" navLabelAttr="navLabel" />
</xml-mappings>
<html-mappings>
<!-- Header -->
<htmlmap-header from="logoText" to="h2" class="logo" group="logo" />
<htmlmap-header from="hdbyline" to="h2" class="logoStrapline" group="logo" />
<!-- Body -->
<htmlmap-body from="title" to="h1" />
<htmlmap-body from="body" to="p" />
<htmlmap-body from="hero" to="img" class="hero" />
<!-- Share -->
<htmlmap-footer from="sharetitle" to="h2" class="shareTitle" />
<htmlmap-footer from="facebook" to="img" class="share" group="share" />
<!-- Footer -->
<htmlmap-footer from="copyright" to="href" class="tcs" group="tcs" />
<htmlmap-footer from="terms" to="href" class="tcs" group="tcs" />
<htmlmap-footer from="privacy" to="href" class="tcs" group="tcs" />
</html-mappings>
</seo-descriptor>
Language XML
The language XML file contains the data or copy for the site and should mimic a structure similar to the example shown below:
<?xml version="1.0" encoding="utf-8"?>
<locale>
<tracking>
<item id="gaTrackAccount"><![CDATA[UA-XXXXXXX-XX]]></item>
</tracking>
<meta>
<item id="title"><![CDATA[My Page Title]]></item>
<item id="description"><![CDATA[Some meta description for my page.]]></item>
<item id="keywords"><![CDATA[]]></item>
</meta>
<page id="home">
<item id="title"><![CDATA[My Home page title]]></item>
<item id="body"><![CDATA[Lorem ipsum doler et.]]></item>
<item id="navLabel"><![CDATA[Welcome]]></item>
<item id="logoText"><![CDATA[FWK SEO Wizard]]></item>
<item id="hdbyline"><![CDATA[Welcome to my site]]></item>
<assets>
<item id="hero" url="img/hero.jpg" title=""><![CDATA[]]></item>
</assets>
</page>
<component>
<item id="shareTitle"><![CDATA[Share:]]></item>
<share>
<item id="facebook"
url="img/share/facebook.gif"
href="http://www.facebook.com"
rel="nofollow">
<![CDATA[Facebook]]>
</item>
</share>
<item id="copyright"><![CDATA[© 2009 FWK]]></item>
<item id="terms" href="terms.html" rel="nofollow">
<![CDATA[Terms and Conditions]]>
</item>
<item id="privacy" href="terms.html" rel="nofollow">
<![CDATA[Privacy statement]]>
</item>
</component>
</locale>
Configuration XML
A configuration XML file describing at the very least the structure of the virtual pages the wizard will create. This must include a reference to
the page ID and the path it will take.
<?xml version="1.0" encoding="UTF-8"?> ... <page id="home" path="/" /> <page id="about" path="/about/" /> <page id="news" path="/news/" /> <page id="contact" path="/contact/" /> ...
Output Location
The folder to which the HTML pages will be created.
Index HTML Template
This XML file will be used to dictate the basic HTML page which will embed the Flash file and the generated content. Each file created by the wizard will use this file as a template replacing only what was specified by the descriptor. This template file contains tokens that will be replaced by values specified in the SEO Descriptor file.
<?xml version="1.0" encoding="UTF-8"?>
<template filename="index.html"><![CDATA[<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=UTF-8" http-equiv="Content-Type"/>
{metaData}
<title>{title}</title>
<link rel="stylesheet" href="{relative}css/styles.css" type="text/css" />
<link rel="image_src" href="facebook_preview.jpg" />
<script type="text/javascript" src="{relative}js/swfresize.js"></script>
<script type="text/javascript" src="{relative}js/swfobject.js"></script>
<script type="text/javascript" src="{relative}js/swfaddress.js"></script>
</head>
<body>
<div id="wrapper">
<div id="myAlternativeContent">
{header}
{navigation}
{body}
<div id="error">
For a richer experience please download the latest Flash Player. <br/><br/>
<a href="http://www.adobe.com/go/getflashplayer" rel="nofollow">
<img border="0" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
</a>
</div>
{footer}
</div>
</div>
<script type="text/javascript">
var id = swfobject.getQueryParamValue("id" );
var flashvars = { cc: "{cc}",
lc: "{lc}",
rootPath: "{relative}",
htmlRoot: "{htmlroot}",
xmlFile: "{relative}xml/gb-en.xml",
id: id,
module: "{deeplink}"};
var params = { allowscriptaccess: "always", allowfullscreen:"true" };
var attributes = {id: "myAlternativeContent", name:"myAlternativeContent"};
if ( swfobject.getQueryParamValue("detectFlash" ) == "" )
swfobject.embedSWF("{relative}{documentSWF}", "myAlternativeContent", "100%", "100%", "0.8.3.200911261311.200911261311.200911261311.200911261311.200911261311.200911261311.200911261311.200911261311", false, flashvars, params, attributes);
</script>
</body>
</html>
]]></template>
String tokens
{metaData}
This token will be replaced by three meta tags title, description and keywords as defined in the language XML file.
{title}
The title of the page based on the page ID as defined in the config XML and language XML file.
{header}
The header token will be replaced by all XML nodes that qualify to the SEO Descriptor mapping htmlmap-header.
{navigation}
The navigation token will be replaced by an unordered list of all the XML nodes that qualify to the SEO Descriptor xml-mapping with map navigation. In the following example the XML node with ID home with a child node that has an attribute called navLabel will be added to this unordered HTML list. The leafNodeName tells the wizard to only accept XML nodes with a name of item and the attribute should be called id.
<map leafNodeName="item" leafNodeAttr="id" /> <map navigation="home" navLabelAttr="navLabel" />
{body}
The body token will be replaced by all the XML nodes that qualify to the SEO Descriptor mapping htmlmap-body. Supported HTML tags for the body replacement token includes most single tags like h1 - h4, p with some special additions to the following tags:
<img>
Should the img XML node in the language XML file contain an href attribute the img tag will be wrapped with href.
<item id="logoHome" url="img/logo.jpg" href="./" />
HTML Output:
<a href="./"><img src="img/logo.jpg" /></a>
{footer}
{relative}
A relative path pointing to the root of the SWF file.
{htmlroot}
{cc}
The country code specified.
{lc}
The language code specified.
{deeplink}
The page ID for example "about", "news" or "contact" that would require a deeplink.
{documentSWF}
The name of the main swf file as specified in the SEO Descriptor file.
Using SWFAddress
By using the REST approach it means that when a user is presented with the Flash content, i.e. they meet the minimum requirement to view your Flash content, it means that deep linking would be required should a user navigate directly from a referer to a sub section of the site. For example, if a user searches for your site and clicks on the about link http://somedomain.com/about/, obviously the site should deeplink to the about section within Flash.
Example
Get Started with the Version Wizard »
Install
You can install this plug-in through the Eclipse Update Manager:
http://fwk.wezside.co.za/update