ScottKing.com.au

SEO

Quitnow Site Launch

by on Jul.07, 2008, under CSS, Flash, JavaScript, SEO

This site I built for the Australian Government, I was given the requirment that the site would have to be built on top of a Lotus Notes CMS. For this reason alone I decided to absolutely separate the presentation layer into pure CSS and just have the Notes CMS server the content DIV’s. It worked a charm, the site looks great even though it is based on an aging CMS.

Check it out at:

http://www.quitnow.info.au

Leave a Comment more...

Launched: Switched On Media Search Engine Marketing

by on Jun.22, 2008, under CSS, Design, SEO

Today I’ve launched my latest build a web site for seaech engine specialists, Switched On Media. Being Search Engine Optimisation specialists it may come as no surprise that their site had to be fully S.E.O. and crawler freindly, this meant using strict xHTML and CSS for the layout and presentation layer.

Check it out at http://www.switchedonmedia.com.au

Design by Abbie Daven.

Leave a Comment :, , more...

Introduction – Advanced Flash SEO and Usability Tutorial

by on Jun.10, 2008, under ActionScript, CSS, Flash, PHP, SEO

Advanced Flash SEO and Usability Tutorial Introduction

The Problems associated with Flash SEO and Usability

Creating an entire Flash based web site is very common these days, yet there are still some major Usability problems inherited when an entire Flash based design is implemented.

No SEO and no deeplinking.

The first issue is that of Search Engine Optimisation or SEO, since search engines cant (yet) index the text used in your Flash movies it becomes virtually impossible to get good search visibility for your Flash site, and coupled with the inability to deeplink to specific content sections it becomes very hard to create targeted backlinks to your Flash site.

No browser back, forward or history support.

The second issue is the inability for Flash to work with the browsers back and forward butons in the main navigational bar and no history being recorded in the browsers history section.

No scrollbars for small windows.

Most Flash designers target their full screen flash sites to the 1024 x 728 monitor resolution, minus the browser chrome which equates to roughly 980 x 600 of actual design real estate. The problem is if a user is using a smaller resolution or has their browsers set to a smaller size window, Flash does not create scrollbars and thus clips off the parts of your website that do not fit on the available screen size.

No Analytics

There are now several excellent free online analtyics services for your traditional html based web sites and until recently theres been no way to harness such a service to track clicks and visitors around your Flash site.

The Solution

Fortunately there is a solution, or in fact several solutions for all of the above issues. In this tutorial I will show you how to combine all of these solutions to create a fully usable and backwards compliant browsing experience for your users.

  • Part 1. Setting up dynamic SEO tags for each page or deeplink in your Flash movie
  • Part 2. Deep linking to your Flash content and enabling those back, forward and history buttons in your browsers (coming soon)
  • Part 3. Add scrollbars for smaller browser windows and monitor resolutions (coming soon)
  • Part 4. Add Google Analtyics (coming soon)
  • Part 5. Flash alternate content, white hat SEO usage and case study: levis.com.au (coming soon)
  • Source code (coming soon)

Get Started >

Leave a Comment more...

Part 1. Dynamic SEO tags for your Flash site using PHP and SWFAddress

by on Jun.10, 2008, under ActionScript, Flash, PHP, SEO, Widgets

Part 1. Dynamic SEO tags for each page of your Flash site using PHP

The method we’re going to use to serve customized SEO tags such as meta description, meta keywords, page title, noscript content and alternative content will require that we add a little PHP to our SWFAddress Flash embed page that will check what the requested page URL is and embed the relevant SEO data for that page and deeplink to the requested page in your Flash site. We will then setup a 404 page not found handeler that calls our SWFAddress and PHP enabled Flash embed page.

Utilizing the 404 handler method will allow us to setup completely custom deeplink URL’. For an example, let use a classic “About Us” page using our 404 method we will be able to use a  search engine friendly URL such as

http://www.example.com/about#about

and have that URL serve SEO tags optimised for the “About Us” page and have our .swf deeplink to the relevent content page within our Flash document. Our PHP script will detect the keyword “about” in the last part of the URL and dynamically populate the title, meta description, meta keywrods, etc for the About Us section. This means you can use even more Search Engine friendly deeplinks such as:

http://www.example.com/about.html

or

http://www.example.com/personal/about-me/about/

Once we have completed our script all 3 About Us URLs above will be working deeplinks. Which ones you choose to use and submit to Search Engines is upto you.

For this step we’ll presume that the web site resides in the root directly of your URL, however it’s easy to set it up for sites based further down in the directory structure, just substitue your webites directory structure after any root (/) references we use.

Step 1.

Setup a PHP file that will serve as the index page for your flash and that will be used for embedding your .swf, however we wont embed the swf just yet. We will however setup the dynamic title, meta description, meta keywrods, etc based on the browsers current URL.

To dynamically serve the correct SEO tags to the correct pages, first we must find out which page the user is trying to view. We will do this by detecting the URL they have in the location bar, extracting the content-page name from the URL and storing that content-page name in a variable $requestedDeepLink using the getDeepLink() function below.

<?php
function getDeepLink(){
$requestedDeepLink=curPageURL();

$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,":80")+3);
if(strrpos($requestedDeepLink,"/")==strlen($requestedDeepLink)-1){
$requestedDeepLink = substr($requestedDeepLink,0,strlen($requestedDeepLink)-1);
}
$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,"/"));
$exclusions = array(".html", "/","index.php"); // URL extension exclusion list
$requestedDeepLink = str_replace($exclusions, "", $requestedDeepLink); // remove extensions eg: "about.html" becomes "about"
}

function curPageURL() {
$pageURL = 'http';
if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
$pageURL .= "://";
if ($_SERVER["SERVER_PORT"] != "80") {
$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
} else {
$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
}
return $pageURL;
}

$requestedDeepLink=getDeepLink();
echo($requestedDeepLink);
?>

Create a new PHP page and save it as index.php. Copy and paste the above code into that page and save.

Step 2.

Now we want to setup our 404 redirect function to call our new index.php script each time a 404 is detected. This means we can use our SEO friendly links such as http://www.example.com/example-only/about-me/about/ to serve the one index.php file and hence the one .swf.

This is how to setup a 404 redirect in IIS (apache .htaccess tutorial coming soon)

Open up your web site in IIS, RIght-click and go to Properties.

Right click and go to the “Custom Errors” tab.

Scroll down until you find 404 in the HTTP Error column, click it and Edit Properties

Now change Message Type to URL

And insert the abolsute path to the index.php files, if it’s in the root enter /index.php, if its in a directory enter /directory/index.php

Hit OK.

404iis 300x266 Part 1. Dynamic SEO tags for your Flash site using PHP and SWFAddress

Also, ensure that “check file exists” option is ticked in your PHP configuration in IIS while you’re here.

Hit OK again to apply the changes.

Now, if you try to browse on a non-existent URL on your website, IIS will pass the request to our index.php file and $requestedDeepLink will contain the content-page name requested in the last part of the browsers URL, for example if you browse to:

http://www.example.com/contact

contact 300x141 Part 1. Dynamic SEO tags for your Flash site using PHP and SWFAddress

You will see the content-page name “contact” is being echo’d to the screen by our script. Similarly if you change the URL to

http://www.example.com/any-SEO-friendly-url/contact-us/contact.html

you will get the same output.

contact2 300x141 Part 1. Dynamic SEO tags for your Flash site using PHP and SWFAddress

Step 3.

Great, now that we have a way to tell which content-page name has been requested by the user, or the Search Engine bot, we can serve specific content for that page.

To do this we wil setup a a few simple if statements that check the content-page name and populates some variables with our SEO tages for that specific content-page.

eg:

<?php
	function getDeepLink(){
		$requestedDeepLink=curPageURL();

		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,":80")+3);
		if(strrpos($requestedDeepLink,"/")==strlen($requestedDeepLink)-1){
			$requestedDeepLink = substr($requestedDeepLink,0,strlen($requestedDeepLink)-1);
		}
		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,"/"));
		$exclusions = array(".html", "/","index.php"); // URL extension exclusion list
		$requestedDeepLink = str_replace($exclusions, "", $requestedDeepLink); // remove extensions eg: "about.html" becomes "about"
	}

	function curPageURL() {
		$pageURL = 'http';
		if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
			$pageURL .= "://";
		if ($_SERVER["SERVER_PORT"] != "80") {
			$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
		} else {
			$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
		}
		return $pageURL;
	}

$requestedDeepLink=getDeepLink();

$title="Home";
$description="Meta Tag Description for Home";
$keywords="Meta Tag Keywords for Home";
$inPageContent="Some altenate content for non-flash users on Home";
$noscript="Some altenate content for non-javscript users on Home";
if($requestedDeepLink=="about"){
	// SEO Tags for About Me
	$title="About Me";
	$description="Meta Tag Description for About";
	$keywords="Meta Tag Keywords for About";
	$inPageContent="Some altenate content for non-flash users on About";
	$noscript="Some altenate content for non-javscript users on About";
}
if($requestedDeepLink=="contact"){
	// SEO Tags for Contact Us
	$title="Contact Us";
	$description="Meta Tag Description for Contact ";
	$keywords="Meta Tag Keywords for Contact ";
	$inPageContent="Some altenate content for non-flash users on Contact ";
	$noscript="Some altenate content for non-javscript users on Contact ";
}
?>

.

Step 4.

Now we can output those variables into our HTML page based on the requested content-page name from the requested URL.

We do this by inserting echo statements containing the SEO tags into the corresponding HTML tags like so:

<?php
	function getDeepLink(){
		$requestedDeepLink=curPageURL();

		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,":80")+3);
		if(strrpos($requestedDeepLink,"/")==strlen($requestedDeepLink)-1){
			$requestedDeepLink = substr($requestedDeepLink,0,strlen($requestedDeepLink)-1);
		}
		$requestedDeepLink = substr($requestedDeepLink,strrpos($requestedDeepLink,"/"));
		$exclusions = array(".html", "/","index.php"); // URL extension exclusion list
		$requestedDeepLink = str_replace($exclusions, "", $requestedDeepLink); // remove extensions eg: "about.html" becomes "about"
	}

	function curPageURL() {
		$pageURL = 'http';
		if ($_SERVER["HTTPS"] == "on") {$pageURL .= "s";}
			$pageURL .= "://";
		if ($_SERVER["SERVER_PORT"] != "80") {
			$pageURL .= $_SERVER["SERVER_NAME"].":".$_SERVER["SERVER_PORT"].$_SERVER["REQUEST_URI"];
		} else {
			$pageURL .= $_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"];
		}
		return $pageURL;
	}

$requestedDeepLink=getDeepLink();

$title="Home";
$description="Meta Tag Description for Home";
$keywords="Meta Tag Keywords for Home";
$inPageContent="Some altenate content for non-flash users on Home";
$noscript="Some altenate content for non-javscript users on Home";
if($requestedDeepLink=="about"){
	// SEO Tags for About Me
	$title="About Me";
	$description="Meta Tag Description for About";
	$keywords="Meta Tag Keywords for About";
	$inPageContent="Some altenate content for non-flash users on About";
	$noscript="Some altenate content for non-javscript users on About";
	$inContent=true;
}
if($requestedDeepLink=="contact"){
	// SEO Tags for Contact Us
	$title="Contact Us";
	$description="Meta Tag Description for Contact ";
	$keywords="Meta Tag Keywords for Contact ";
	$inPageContent="Some altenate content for non-flash users on Contact ";
	$noscript="Some altenate content for non-javscript users on Contact ";
	$inContent=true;
}
?>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	<title><?=$preTitle." ".$title?></title>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="Description" content="<?=$description?>">
	<meta name="Keywords" content="<?=$keywords?>">
</head>
<body>
	<div id="flashcontent">
		<?=$inPageContent?>
		<a href="http://www.adobe.com/go/getflashplayer">Click here</a> to download the latest flash player to view this site.
	</div>
	<script type="text/javascript">
		// <![CDATA[
		//INSERT YOUR SWF OBJECT EMBED CODE HERE
		// ]]>
	</script>
	<noscript>
		<?=$noscript?>
	</noscript>
</body>
</html>

Copy and paste the above code into index.php, save and browse to it on your server again.

Now if you go to:

http://www.example.com/about

or

http://www.example.com/about.html

or

http://www.example.com/another_SEO_friendly_url/about/

And view the HTML source, you will see the title and SEO tags for the About Me page.

If you go to:

http://www.example.com/contact

or

http://www.example.com/another_SEO_friendly_url/contact-us/contact.html

And view the HTML source, you will see the title and SEO tags for the Contact Us page.

Congratulations

You can create a Google compliant sitemap.xml containing all sorts of custom SEO friendly deeplinks to all of your “pages” or deeplinks within your Flash site and you can submit your deeplinks to all the other search engines out there.

Further Customisation

You can add redirects for different file extensions other then the default “.html” by adding them to the Array at this line:
$exclusions = array(“.html”, “/”,”index.php”); // URL extension exclusion list

eg: to redirect pages that end in a .aspx extension the Array would look like:
$exclusions = array(“.html”, “/”,”index.php”,”.aspx”); // URL extension exclusion list

12 Comments more...

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...