In Part 1 of this series, I introduced Video SEO, Flash Video, and the importance of using SWFObject to provide alternative content for accessibility and SEO purposes. I explained why you would want to provide alternative content for your flash video projects and how to utilize SWFObject to accomplish this.
In Part 2, we're going to dig into some code and walk through a tutorial for using SWFObject 2.1. Let's jump in.
Providing Alternative HTML Content in 8 Steps Using SWFObject:
I'm going to walk you step by step through setting up SWFObject 2.1 using static delivery. So without further ado, let's optimize some video content! For the example we'll work on today, I'll show you how to provide a sample transcript of your video using SWFObject 2.1.
1. Download SWFObject 2.1:
2. Review the SWFObject Download:
3. Set Up Your Working Directory:
Since the directory you created in the previous step will be your template for each swfobject project you create in the future, you don't want to overwrite the original files. So, let's make a copy of the directory for testing purposes. Just copy the directory and then paste it so you have a duplicate of all the files. You can rename your new directory something like "reelseo" for our test project. If you have your own flash video player (SWF) that you want to use during this test, simply drop it in this new directory along with your flash video file (FLV). If you simply want to use the files provided in the download instead of your own files, then you should be good to go. Also, if for some reason you overwrite the original swfobject files, you can always re-download them from the Google Code Project.
4. Adding a Reference to the SWFObject Library:
Open index.html in your new directory, which is the sample html file for SWFObject using static delivery. You will use this file as the starting point for your own implementation. Check the source code and notice the following line of code in the head of the document (between the <head> and </head> tags):
5. Editing Your Code and Adding Your Alternative HTML Content:
Let's add your alternative content (the sample transcript of your video file) and edit the filename and dimensions of your own flash video player. If you jump down in your code into the <body> of your document, you will notice a series of nested object tags. This is the standards compliant markup that static publishing utilizes in order to provide your alternative html content. The first thing we should do is edit the name of the SWF file to reflect your own flash video player (only if you are using your own flash movie. If not, then just follow along and keep "test.swf" as the filename). Remember, you will be entering the name of your flash video player (SWF) and not the flash video file itself (FLV). You will need to change the name in the following lines of code:
<param name=”movie" value=”test.swf” />
<object type=”application/x-shockwave-flash" data=”test.swf” width=”300″ height=”120″>
In the code below this paragraph, you will see that I changed the filename to "samplevideo.swf”. For this example, we'll change the dimensions to 400×300, which is the size of my sample flash movie. If your video player has different dimensions, definitely change the height and width in the code (again, in two locations where you see height and width attributes). Note, the SWFObject download includes a sample file named "test.swf”, so if you want to run the page using that flash movie instead of your own flash video player, then you should be good to go. Just keep "test.swf" as the filename of the flash movie along with default dimensions (300×120).
<object id=”myID" classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”400″ height=”300″>
<param name=”movie" value=”samplevideo.swf” />
<object type=”application/x-shockwave-flash" data=”samplevideo.swf”width=”400″ height=”300″>
6. Add Your Video Transcript:
Now we'll add your sample video transcript as the alternative html content. You will notice a <div> tag with nested object tags in the code. Inside the object tags, you will see the text "Alternative Content" in an H1 tag and then a link to download the flash plugin in a paragraph tag. This is where you should add your transcript. You can use any html markup here to provide your content. So for our example, we might add a subheading as an H2 tag and then a series of paragraph tags for the transcript. Note, I used an H2 and not H1 since my own webpage would already contain an H1 that's outside of SWFObject (probably as the title of the video). In addition, you should also include a link to download the flash plugin so users can easily visit adobe.com to find the plugin and return to see your flash content, if needed. You can view my edited sample code below:
<object id=”myID" classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”400″ height=”300″>
<param name=”movie" value=”samplevideo.swf" />
<object type=”application/x-shockwave-flash" data=”samplevideo.swf" width=”400″ height=”300″>
<h2>Sample Video Transcript Subheading:</h2>
<p>First paragraph of dialogue from our video.</p>
<p>Second paragraph of dialogue from our video.</p>
<p>Third paragraph of dialogue from our video.</p>
<p><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></p>
7. Register Your Flash Movie (SWF) with the SWFObject library:
Now that we've added our alternative html content, let's register our flash movie (SWF) with the SWFObject library. In the code we just edited above, you will see an id attribute of "myID” for the first object tag you come across. Let's change that to something unique for our sample project. I changed the attribute to id=”videoID”. See the code below:
<object id=”videoID” classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ width=”400″ height=”300″>
Now we need to register that id with SWFObject. In the head of your document, you will see the following code:
swfobject.registerObject(”myId”, "9.0.0″, "expressInstall.swf”);
Change "myID" to our unique id of "videoID”. Also change "expressinstall.swf" to false (without using quotes for false):
swfobject.registerObject(”videoID”, "9.0.0″, false);
The Code Explained:
- The first argument is the id of the outer tag we just renamed. If you change the id in future projects, you'll need to change it here as well.
- The second argument contains the required version of the flash plugin. So, if you require flash 9, then you would add 9.0.0 (or whichever major.minor.build you are targeting).
- The third argument is optional and is used to activate Adobe Express Install. Express Install will display a standard dialog box when the required plugin is not installed. You can also customize this dialog if needed (the source code is included in the download). I typically don't utilize express install due to some buggy behavior I've seen, but you can read more about it in the SWFObject documentation and make your own decision. That's why you will see false as my third argument in the code listed above.
8. Test Your Project:
That's it, you should be good to go! Simply launch index.html in a browser or upload your test folder to your web server and then test the page. A quick way to test out your alternative content is to change the required plugin to a version that's not released yet, like 18. Reload the page and you should see your alternative content. Then change it back to the actual required plugin and you should see your flash video player and FLV playing (or test.swf if you chose to use the default files that were included in the download).
You can view a sample page I created here: http://www.hmtweb.com/swfobject/reelseo/index.html
That wasn't so hard, right? Now you have a killer video clip with alternative html content to boot. Also, you'll now have the ability to rank for queries associated with your video clips.
Now wouldn't it be great if there was a tool to help you build the necessary code for SWFObject? Well there is, but I didn't want to bring it up until now. Iwanted you to get a good feel for what's going on under the hood. In my opinion, knowing exactly how something works in code enables you to troubleshoot problems that arise much easier than starting with an automated solution.
Now that you have a solid grounding in how SWFObject works, I'll introduce the SWFObject Code Generator. If you are interested in using the code generator, you can download the files from the Google Code Project. I recommend using the Adobe AIR application, but there is an html version too. Once you install the application and launch it, you will see a form for entering all of the necessary information covered in this tutorial. You can click the "Generate" button and the application will generate the code for you. And since you walked step by step through this tutorial, you will know exactly what each field means!
Let's quickly review what we covered in this two part series on SWFObject. I've introduced Video SEO, SWFObject, static and dynamic publishing of flash content, and the SWFObject Code Generator. We've also covered why you would want to provide alternative html content when publishing flash video on your site, and how the search engines can pick up that content when you use SWFObject. Now is the fun part. You get to use this technique for your own flash video projects. So go ahead and optimize your videos today, upload your finished product, and see how the engines pick up your content the next time your site gets crawled. I recommend testing different types of alternative content and analyzing how each works for your specific website. Then you can adjust your implementation as necessary. Again, just make sure you incorporate other Video SEO best practices when adding flash video to your website.
Now go and optimize your video clips!
Thanks again to Glenn for this excellent series of posts! Obviously Glenn knows his stuff and we thank him tremendously for taking the time to write this excellent tutorial for ReelSEO.com readers.