Google SEO Flash & Flash Tips/Techniques

Scott — Tue, 09 Mar 2010 08:38:08 +0000

Google SEO Flash

Google currently DOES index flash, however, I believe it is extremely unreliable. Clients have asked me to do some SEO work on their sites, little did I know, these sites were flash!

Most crawlers seem to have a hard time crawling flash and the #1 tip I can give for Flash SEO is: don't show search engine crawlers flash, show them alternate content!

The reasoning behind this technique:
1) Underlying HTML Content
2) Use javascript to load Flash
3) GoogleBot = No Javascript = Doesn't see flash, sees alternate content

For two of the sites I have worked on, I have used JQuery, JQuery SWFObject Plugin, and a base HTML site to get these sites indexed. Search engine crawlers do not have javascript, so we will use it to load our flash. If our client has flash and javascript, our client will see Flash. If they dont (Googlebot doesn't have Javascript) they will see our underlying HTML content. Let's take a look at this code:

Google SEO Flash Tips and Techniques

How To SEO Flash for Google

On your main page, write

, then wrap your Search Engine Optimized code in

As you can see, the content in the "altContent" div, is pure html which we can apply the following Basic SEO Techniques to. We have an empty div above with the id "flash". We will use JQuery & the SWFObject to load our flash file into our "flash" div. Since the flash loading is done using javascript, Search Engine Crawlers will not see the flash, but will see our optimized HTML content.

Download a copy of JQuery here: http://docs.jquery.com/Downloading_jQuery
and SWFObject plugin here: http://jquery.thewikies.com/swfobject/downloads
We will put all our files in the same directory for simplicity, you can put them in a seperate 'scripts' directory if you want to keep organized.

On our main page, we will add the script references (order is important! first load jquery, then the swfobject plugin):

Now, underneath this, we will add the function to load our flash file:

This code should be pretty self explanatory, but, let me explain:
Line 2: We are setting up a function to run when our document has been loaded.
Line 3:Check that the user has the flash plugin and it is enabled
Line 4: We are using the .flash() method of SWFObject to load content into the #flash div. (# stands for id . stands for class)
Line 5: We set the swf: parameter to our swf file
Line 6/7: We set the width/height
Line 9: Now that our flash has loaded, we set the display of the altContent div to none, which will hide it.

Since GoogleBot does not have javascript, the code to load the flash and hide the altContent will never run.
If a user has flash, the flash site will load. If not, they will see the html content.

Searching for my clients business name, they could not be found anywhere. Once I applied the technique above, they were #1 within a week (Search engines do take some time )

This technique is widely accepted. For some more reading, check out: Google Does Index Flash

Hope this article helps.
Comment if it did!

Professional Table Styling using CSS

Scott — Sun, 20 Sep 2009 02:20:30 +0000

On this blog, I have a post about using jquery to apply alternating table row coloring. Someone commented that they couldnt quite get it working and needed an example. So, while making the example for him, I figure it would be a good post to show how to style a table professionally with CSS.

So, were going to start with this markup:
Note: You only need to load jquery and jquery.scripts if you want to do the last part of this example.

Table Row Coloring Example

id	First name	Last name
1	Scott	Moniz
2	Bob	Barker

Alright, now that we have that done. We area going to create style.css and add a few rules.

Here is the table selector:
table{

border: 1px solid #ccc;
}

well....that doesnt look very good..YET.
Lets add a rule to the header. We'll add a background color.

table th{
background-color: #ccc;
}

Lets add a rule to the table data tags.
table tr{
border: 1px solid #ccc;
}

Now, lets see what we got so far.
Not too bad. You'll notice the headers are a little to close, and the borders dont look too great. Don't worry well fix that. Lets add another couple rules to table th and td.
table th{
border: 1px solid #000;
padding: 5px;
}
table td{
padding: 2px;
}

Alright..lookin good so far. Here's what you should have:
Lets take care of these ugly borders.

On our table selector we will add this rule:

table{
border-collapse: collapse;
}

If you look at the table, you'll notice that on the 2nd row there is a class="row2". We will now style that class.
table tr.row2{background-color: #EBEBEB;}

DONE. The final result looks like this.

You can always modify the styles as you wish.

Tip: Every 2nd row, add the class="row2" to the row to get the alternating row colors. Optionally, add text-align: center; to the table selector.
Here's the full CSS:
table{border: 1px solid #ccc;border-collapse:collapse; text-align: center;}
table th{background-color: #ccc; padding: 5px; border: 1px solid #000;}
table td{border: 1px solid #ccc; padding: 2px;}
table tr.row2{background-color: #EBEBEB;}

Keep reading for an easy way to alternate row colors when you have a lot of rows.
Alright, now, if your table has 20 rows, maybe even 50, or 100, adding row2 manually is really a pain...and I personally wouldn't do that. We will use jquery to color the alternate rows.

Find the and change it to . If you load the table you'll notice the alternate rows aren't colored anymore. We will now add a class to the table. So

should look like this

Now that our table is setup, we will use a jquery selector to color rows in any table that has the class altcolor.
You should have jquery.js and you should create a file named jquery.scripts.js.
Open jquery.scripts.js and add the following:

$("document").ready(function(){
$("table.altcolor tr:even").addClass("row2");
});

This loads when the webpage is ready
//Notice the selector ?
table.altcolor tr:even means any even row, in a table, that has the class "altcolor"
Now we just call addClass, which will add the class row2.
now, the class row2 is added to every even row in a table with the class altcolor.

Done.
If you don't get the same result, you might want to download the example source and check it out.

Download Table Styling Example

Tip: When using jquery to style alternate rows, check your table with javascript disabled.
For example, if you style your tables to have white text, and your row2 is supposed to apply a dark background to make the white text show up, if they have javascript disabled, they won't see the white text. Be careful and make sure your table looks good with and without javascript.

Easy Javascript Validation using JQuery

Scott — Sun, 13 Sep 2009 03:45:55 +0000

Now, there might be other tools out there, but this is how I do mine. I like to write stuff from scratch but I actually feel like this little script would make life easier for a lot of people. You're free to use this as long as you leave the copyright in there.

First download jQuery and this script: jquery.validator.js (Right click>Save As)
Next, add these lines.

When you create your forms create them like this.
The form must have an id, and it must have the class "validate".
Add the class 'req' for any fields that are required.
Coming soon: email, int verification, age, etc.


id="contactform" action="whatever_action_you_want.php" class="validate">
*
*

In your css add these
span.val{visibility: hidden; color: red; font-weight:bold;}

Thats it.

If you guys post comments and subscribe, I can let you know when i further develop this. It will include number verification, email verification, postal code verification. It's very simple and lightweight and will shave time off any project. File (Right click>Save As): jquery.validator

Embedding flash using SWFObject

Scott — Tue, 08 Sep 2009 10:09:53 +0000

Just to save some of you the headache . I spent a few hours on this today, and I couldn't figure it out, I've embedded flash many times before and I just couldn't figure out why this time it wasn't working.

Anyways

Using jquery found here: http://docs.jquery.com/Downloading_jQuery
and
jquery swfobject plugin found here: http://jquery.thewikies.com/swfobject/downloads

we can semantically embed flash.

Now a few things:

Make SURE these are in this EXACT order.
Load Jquery>Load its plugins>Load your javascript file.

Now on your page somewhere you will have the div you want to load flash into like so:

Open up jquery.myscript.js and type:

$("document").ready(function(){
       $("#myflashdiv").flash({
               swf: 'flash/myflash.swf'
        });
});

Directory Structure:

flash
  -myflash.swf
script
  -jquery.myscript.js
index.html

This assumes you have a flash folder, and the file myflash.swf in that folder.
The path in this case is NOT relative to the script your working in. Think about it this way:
the flash method probably uses document.write to output the correct object tag for your flash.
If your page is on the root of your site and the script is in scripts/jquery.myscripts.js you would think the source for the swf would be "../flash/myflash.swf". But think about that..in index.html if you look at the output it would say: src="../flash/myflash.swf", you should be able to see why thats wrong if you look at the above directory structure.

Anyways, if you didn't know swfobject behaves this way, this could take you quite some time to figure out.
Hope I saved you that time

Troubleshooting
Tip 1: Make sure the load order is : jquery, jquery.swfobject.js, then your script.
Tip 2: Make sure the src you're passing in is relative to the page you're embedding on, NOT relative to the script file you're working in.

Custom Javascript Alert and Confirm Dialog boxes

Scott — Tue, 21 Jul 2009 18:50:54 +0000

This article will teach you how to make Custom Javascript Alert and Confirm Dialog boxes, and change the button text on dialog boxes.

For the most part, custom alert and confirm dialogs are not possible because alert and confirm dialog boxes are handled by the browser, however, there is a great JQuery plugin that will let you customize your alert boxes. If you don't know JQuery, do not worry, because i'll take you through it step by step. This little customization can make your web application that much more professional.

This will show you a little tutorial on how to make the custom alert and confirm dialogs AND How to return values from a custom confirm dialog box. This is EXTREMELY important. I have seen a lot of tutorials on how to do this, but none of them talk about actually retrieving the value of the response in a custom confirm dialog box..

Custom Javascript Alert Dialog Boxes

Step 1 : Download JQuery

Click on Current Release, you can click Uncompressed if you want to inspect the code, but you should use minified version for production.

In our site, we will make a folder called scripts, and we will put the jquery.js file into this folder.
We will also make a new file in the same folder named jquery.scripts.js.

Step 2: Download jquery.alerts (Right click, Save as) and the css here: jquery.alerts.css
NOTE: This plugin is no longer supported by http://abeautifulsite.net/, so use it at your own risk.

We will put the jquery.alerts.js into the scripts folder, and the jquery.alerts.css into a styles folder.

Step 3: The Setup
In our webpage we will add the references to these file.

Once we have all these references in, we're ready to write some jquery.

Step 4: Open jquery.scripts.js
Type

$("document").ready(function(){

});

This sets up a function to be run when our document is ready.

In this document.ready function, type
alert('jquery loaded');

Refreshing your webpage, you should see an alert saying "jquery loaded", if you see this, you have setup jquery correctly. If you do not, check the steps above, or hit CTRL+F5, this does a cache refresh and requests a new copy of all the javascript and css files.

We will add a button to our site.

In our document ready function, we will hook up a handler to handle the "click" event of this button.

$("document").ready(function(){
$("#customAlert").click(function(){
alert('this is an alert');
});
});

If you refresh your webpage (CTRL+F5) and click the button, you should see a normal javascript popup.
Now, change the alert to jAlert.
jAlert('this is a custom alert', 'this is a custom title');

Upon refreshing the page, and clicking the button, you should see a custom grey alert box. The styles can be modified by editing jquery.alerts.css.

If you'd like to read on Custom confirm dialog boxes, please continue reading.
By this point, jquery and the jquery alerts plugin and css should be setup.
Follow the above tutorial until you get to the actual jAlert method.

Comment if this helped!

Custom Javascript Confirm Dialog Boxes

Now, we will do a Custom Javascript Confirm Dialog.
The confirm function looks like this
jConfirm('msg', '[title]', [callback function]);

$("document").ready(function(){
$("#btnID").click(function(){
jConfirm('Would you like Ice Cream', 'msgBox Title', function(r){
if(r){
alert('you replied yes!');
}else{
alert('you replied no!');
}
}
});
});
This is the basic implementation of custom confirm boxes, however you can still customize these a little further.

Changing Javascript Alert Button Text

Before calling jAlert or jConfirm, you can set the button text.

$.alerts.okButton="OKAYYYYYYYYYY";
$.alerts.cancelButton="CANCELLLLLLLLLL";

This is also useful for localization.
For example in an english jquery.scripts.js you can have.

$.alerts.okButton = "yes";
$.alerts.cancelButton = "no";

And in a french jquery.scripts.js you can have

$.alerts.okButton="oui";
$.alerts.okButton="non";

Hopefully this helped you add that little extra touch.
For reference, here are the 2 methods, only the msg parameter is required.

jAlert('msg', '[title]', [callback function]);
jConfirm('msg', '[title]', [callback functoin]);

There you have it!
Please comment if this was helpful
Goodluck with your custom javascript!

Using javascript to opening a new window W3C Validation target="_blank" alternative

Scott — Thu, 18 Jun 2009 02:05:29 +0000

Google!
Perfect way to open a new window right? WRANG! (End of the world flash reference ...look it up)

Your webpages may not pass W3C validation because your still using target="_blank".
This article will show you how to use javascript or jquery to open a new window, and have your webpages pass W3C Strict Validation.

Anyyyyyyyyyyyways, using the target attribute of the a tag was a perfectly valid way of opening a link in a new window. However, this currently does not pass certain XHTML Validations. I assume you found this blog post because you need to validate and target="_blank" isn't passing.

This solution will open your link in a new window.
Google New Window!

What this does is use window.open, and passes the links href attribute as the url.
The reason for "return false", is so that the base web page does not open the link as well.

Another cool alternative is to use JQuery...ya I know this is javascript but if you have jquery already loaded you can add this to your document.ready function.

$(document).ready(function(){
$("a.newWin").click(function(){
window.open($(this).attr("href"));
return false;
});
});

Google

Any link with the class newWin will now open in a new window.

Both these methods validate to XHTML Strict and are easy to implement.

Enjoy.

The Infinite Loop - Beginner's SEO, Beginner C# & JQuery Tutorials » Javascript