Frontal SEO

From Frontal Wiki

Jump to: navigation, search

Contents

Introduction

SEO (search engine optimization) is the general process of creating web content that's easily analyzed by search engines, like Google and Bing, for inclusion in their search indexes. Traditionally, this has been a problem for rich media applications because converting them to HTML or text has been either a manual or very limited automated process. But these limitations don't exist with Frontal. Because Frontal closely parallels HTML, converting it into meaningful HTML is easy and straightforward.

Frontal offers two ways to convert Frontal content into HTML for improved search engine indexing. The first is the SEO Converter, which executes a manual conversion process for a given URL. You can find it in the SEO tab of the Workspace. Or, you can automatically convert Frontal content into HTML via the Frontal SEO Module. (Note that the SEO Module currently supports the Apache web server only.) We actually use the SEO Module on frontalcode.com to optimize search indexing for the overall site, including any Workspace files you choose to share with the public.


The Conversion Process

Conversion involves several steps. It begins with an HTML page.


The HTML Page

A given HTML page is analyzed for special 'frontal' tags, which indicate where Frontal content should be pulled from, and where it should be inserted into the HTML page itself. Here, for example, is the frontalcode.com home page (edited for clarity): 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>Welcome to Frontal</title>
    <script type="text/javascript" src="scripts/swfobject.js"></script>
    <script type="text/javascript">
        swfobject.embedSWF ( "frontal_renderer.swf", "flashcontent", "100%", "100%", "9.0.115" );
    </script>
</head>
<body>
    <div id="flashcontent">
        <a href="http://www.adobe.com/go/getflashplayer">
            <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
        </a>
        <frontal src="frontal_document.xml" />
    </div>
</body>
</html>

Notice that in the div with the id "flashcontent", there's a peculiar tag: 

    <frontal src="frontal_document.xml" />

It's this 'frontal' tag that the SEO Module is looking for. But before we discuss what's done with this tag, let's first look at where it's placed in the HTML page and why.

In this example, we're using the SWFObject JavaScript library, which embeds Flash content within HTML pages, to embed the Frontal SWF into the page. SWFObject uses a common technique to display alternate HTML content if the browser can't play the Flash movie (e.g., there's no Flash Player plug-in, the plug-in is too old, or JavaScript isn't enabled). If the Flash movie can't be played, SWFObject does nothing, and the alternate HTML content is shown. If the movie can be played, SWFObject deletes the alternate content and replaces it with the Flash movie. Because search engines aren't capable of playing the Flash movie, they always see the alternate content.

So in our example, SWFObject removes the alternate content in the "flashcontent" div and replaces it with the Flash movie embed tags, which allows us to run the Frontal SWF. If SWFObject isn't functional, the alternate content in the "flashcontent" div will be shown, which is why we placed our 'frontal' tag inside of it.

As a technical aside, Frontal actually uses a customization of the SWFObject library. This customization keeps the alternate content in both an HTML noscript tag and an HTML comment. It does this to prevent the browser from parsing it and putting images in the load queue that would just slow down the loading of the Frontal renderer.


The 'frontal' Tag

When the SEO Module finds a 'frontal' tag, it parses it as an XML document, so the XML must be valid XML for the module to be successful. For example, be sure to use "<frontal />" or "<frontal></frontal>" and not "<frontal>". This tag may have the following attributes:

  • src: Where to find the Frontal document. Typically this is "frontal_document.xml", in which case the SEO Module will look for a file named "frontal_document.xml" in the same directory as the HTML page.
  • urlParam: If the location of the Frontal document is in a URL parameter of the page, then set this attribute to that parameter. For example, if the URL is "http://www.mydomain.com/?siteDefn=frontal_document.xml" then you'd set urlParam equal to "siteDefn". If the SEO Module doesn't find this parameter in the URL, then it'll fall back to the value of the "src" attribute.
  • encoding: Set the encoding of the Frontal document. The default is 'windows-1252'.
  • outputEncoding: Set the encoding of the HTML document. The default is 'UTF-8'. For the Windows code page, use 'cp1252'.
  • baseDir: With this attribute, you may set the base directory that the SEO Module will use to find the Frontal document. This may be necessary if the HTML page includes an HTML 'base' tag and the SEO Module is running integrated with the Apache server.
  • escapeComments: Set this attribute (to any value) if HTML comments in the result should be replaced with '__escaped_start_comment__' and '__escaped_end_comment__'. This is useful if the results are being stored in an HTML comment.

As an alternative to the "src" and "urlParam" attributes, the Frontal document may also be embedded directly into an HTML page via the 'frontal' tag. For example, here's a Frontal document embedded in a 'frontal' tag for conversion: 

<frontal>
    <!-- This is the Frontal content. -->
    <video src="video.flv" />
    <text>Hello, world.</text>
</frontal>

This is convenient if the Frontal document is being posted to a CGI script, for example, and so doesn't exist in a separate file.


Flattening the Frontal Document

The next step in the conversion process is to read the Frontal document, and to "flatten" it. In this step, any 'include' tags are parsed, and if they have a "rel" attribute of "inline" or "alt", then the file referenced by their "src" attribute is read and used to replace the 'include' tag. So after this step, we'll always have a single Frontal document.


Inlining the Frontal Document

Because Frontal styles are different from CSS and may include attributes, we need to run the Frontal document through the Frontal library to parse it, apply all style sheets, and then output the results. That is, after this step, a Frontal document that looked like this: 

<style><![CDATA[
    .test
        {
            background-color: blue;
            @someAttribute: someValue
        }
]]></style>
<div class="test" />

will cause the 'div' tag to look something like this: 

<div class="test" someAttribute="someValue" style="background-color: blue;" />

It's also during this phase that we use the 'alt' tag contents and the "alt altContent" attributes to aid in SEO conversion. Additional information is added as well to aid in the conversion of managed elements into elements identifiable by anchor names, and to ensure that deep links will appear as HTML links.


Conversion to HTML

Now the SEO Module may perform the conversion to HTML:

  • document, style, template, include, manager, script, transitioner and alt tags are now ignored. Their information has been gleaned and direct output isn't necessary.
  • 'video' tags with deep-link cue points are written out as HTML links.
  • Likewise, deep-linked 'manager' tags will have links added for their managed elements.
  • Internal anchor links are added between markers and the elements they're marking.
  • 'text' tags are converted to 'span' tags.
  • A few style translations are done.
  • The remaining Frontal tags and their contents are added to the conversion results.


Updating the HTML Page

Finally, the HTML page is altered to include the HTML conversion of the Frontal document. It's included between two HTML comments to indicate where the conversion occurred: 

<!-- Start of Frontal SEO Conversion Results. Do not edit this comment line. -->
...
<!-- End of Frontal SEO Conversion Results. Do not edit this comment line. -->

It's important to preserve these comments in case the page need be passed through the SEO Module again, in which case the module will remove the prior results before doing the conversion.


Is HTML Conversion of the Frontal Language Necessary for SEO?

The reason the process described above works is because Frontal is text-based and already very closely related to HTML. So then an obvious question is, why even do the conversion process? Won't Google be able to read the Frontal document and index it directly?

The answer is that the HTML conversion isn't necessary and Google will read and index the Frontal document directly without it. The problem is that Google hasn't made it very clear how it indexes Flash data files and experience shows that it doesn't seem to do it extremely well. So until the Frontal language is fully supported by the search engines, we help them along with this HTML conversion process.


previous | next
Retrieved from "http://www.frontalcode.com/wiki/index.php/Frontal_SEO"
Personal tools
Get Adobe Flash player