Andrew P Watson

Web Developer

Create valid xHTML-Strict, Search-Friendly iFrames Using jQuery

Sun, 07/11/2010 - 19:57

Web Developers continue to argue whether it’s really that important to validate every website using the “Strict DOCTYPE”, or if valid website markup code is really even that important. While this is a discussion for another time, I try to publish every site I author in valid, Strict xHTML. I believe standards are made for a reason, and if you wish to write good code – just follow the standards.

Occasionally I find the need for a page element that is not considered valid xHTML-Strict markup. One big one that has come up is the good ole’ “iFrame” tag. Granted you can always change the DOCTYPE to “Transitional” and still have valid code, or you can use the “Object” tag to get the same results and be valid. In the past I’ve done both of these, but I’d rather use the Strict DOCTYPE and let’s face it; “Object” tags simply do not play nice across browsers.

Also, sometimes you want to embed xHTML strict iFrame Vimeo videos, or Amazon iFrames that are SEO-friendly. I’m sure there are other ways to display this sort of external web content (ajax, CURL), but I’ve yet to find any useful when building simple pages. Regardless, I found what I think is a MUCH better solution to including iFrame content, both technically speaking and considering Search Engine Optimization (SEO; search bots don’t like iFrames).

Note: This outline is designed for people with at least a little to moderate web design and developing experience. Also, this technique is a workaround that is Search Engine friendly for use when iFrame content is inevitable. It should be noted that iFrames are not valid elements for a reason and should be filtered out if possible. While this will allow your pages to “validate”, it’s really just tricking the browser.

Step One: Setting up jQuery to run on your site

I won’t get into a big rant about jQuery, but lets just say that it is probably the best thing to happen to JavaScript since, well, JavaScript. For those who don’t know what jQuery is, or what it does, it can basically be summed up like this:

  • jQuery is a crazy-powerful, free JavaScript library that once included on your page, allows web developers to enhance and manage their pages, using JavaScript, in a way that is much less technical or demanding than compiling advanced scripting knowledge and well… doing all the work yourself. Once again, god bless open source! ;)

Download jQuery

Use the link above to visit the jQuery download page. Scroll down until you see “Current Release” heading and select a file to download (I use the “minified” version personally). Save the file to your website code base. If you are not sure where to save it, a common convention is to make a “scripts” or “includes” folder in your website root where all shared files go. It’s not a bad idea to do a backup first.

Also – Because I don’t want to muck with the contents of the jQuery file, I always create an additional JavaScript file for custom functions that I write (using jQuery) to handle data on my pages. I call this file something like “functions-custom.js” and include on my page as well. Just make sure to place it after the main jQuery script call so the browser gets jQuery first, as it is the brains here that my functions (loaded second) depend on.

Once you have the jQuery file saved and the custom function file created, you simply need to add it them to the <head> of your xHTML Strict page – in the same way you would add any JavaScript file:

	<script type="text/javascript" src="path/to/where/you/put/jquery-1.2.6.min.js"></script>
	<script type="text/javascript" src="path/to/where/you/put/functions-custom.js"></script>

Note: It may go without saying, but you need to update the path in the code above to point at the appropriate files.

With that complete, you are now including both the jQuery JavaScript library and your custom file on your page and can begin to see what it can do.
Step Two: Creating the custom function to do all the work

The issue: We have an iFrame we want to use on our page but:

  • Iframes are not valid xHTML Stict Markup.
  • Iframes are SEO bottlenecks.

The Solution:

  • Send the markup to the browser using valid code, then use javascript to dynamically insert the iFrame code after the page is downloaded
  • Because most search bots don’t parse JavaScript, they receive the original valid markup with SEO-friendly urls to the iFrame content.

The Code:

Place this in your “functions-custom.js” file you made above:

	$(document).ready( function() {
		// create xhtml strict friendly iframe
		$('a.iframe').each(
			function (i) {
				$(this).replaceWith("<iframe src='" + this.getAttribute("href") + "'  frameborder='0' scrolling='no'></iframe>");
			}
		);
	});

Place this in your xHTML Strict page where you want the Iframe to display (anywhere a link tag can be placed and still validate):

	<a href="Link to my iframe content" class="iframe"  >View my Iframe Content</a>

With everything above in place, you should now be able to load your page and see the iFramed content. If not, just review above to be sure you have it set up correctly.

Step three: Understanding what the heck is happening.

Ok, first lets look at the link. The only really important thing to notice here is the class declaration:

	<a href="Link to my iframe content" class="iframe" >View my Iframe Content</a>

The class is needed because when the page loads and the JavaScript fires, any link on the page with a class of “iframe” will be converted into an iFrame with the content of the iFrame being the “href” of the link (see below). Because the jQuery functions will only fire after the page is sent to the browser, if you view the page source you will actually see the “a” tag and not the “iFrame” tag. This makes the link SEO-friendly because search bots will scan the xHTML markup of the page and generally not parse the JavaScript. Thus seeing the normal link tag, not the dynamically generated iFrame that the link tag was “replaced with” after the jQuery ran.

Note: Tools like Firebug will show you the “compiled source” of a page, allowing you see the “final” markup creating the page after all JavaScript has been run in the browser. You will see the iframe tag in the compiled source.

Now, if all that makes sense let’s look at the function we added to the functions-custom.js file. There are two main components to it. The first part (below) is needed for most any actions that require jQuery to run. It basically tells the browser to wait until the page is loaded and jQuery is prepared to run. Once it is ready, the items inside will fire.

	$(document).ready( function() {
		// some functions and stuff to run once jQuery is ready
	});

In some sense, it’s practical to consider the “$(document).ready( function() {” the header and the “});” the footer of your custom scripts. As mentioned, this tells the browser to wait until jQuery is ready and then run anything between those lines.

The custom code we wrote to create the iFrame(s) is:

	// create xhtml strict friendly iframe
	$('a.iframe').each(
		function (i) {
			$(this).replaceWith("<iframe src='" + this.getAttribute("href") + "'  frameborder='0' scrolling='no'></iframe>");
		}
	);

To really understand the functions and options you really need to read up on, and tinker with jQuery. To summarize, the function outlined above will:

  • Scan the document for all links that have the class “iframe” and loop through results – $(‘a.iframe’).each
  • Replace each instance with an iFrame tag, using the original link’s “href” as the iFrame location – $(this).replaceWith

Summary

This method will send SEO-friend, valid xHTML-Strict code to the browser. Once loaded, the jQuery-powered function actually replaces specific links (tagged with class=”iframe”) with the iFrame tag – problem solved.
Suggested Reading

jQuery Documentation

Cheers!
-a

Comments

Thanks Andrew. Great idea and nicely laid out instructions. Before coming across your site I was faffing about <object classid… and conditional comments of IE your solution works perfectly. You are a star!

I hope more folks find this tutorial – I spent way too long failing with other tutorials before I found this one. I want to learn jQuery, but right now I don’t have time, I simply just need something that works, right now, and I’ll learn later when I have time –> this is exactly what you’ve provided. Explained well, does what it says in the . Thanks for this!

Really good, cheers. Got me out of a jam integrating a client billing platform into their site with branding, header, nav and footer intact. You made me look good, thanks!

Hi, Really good. But after rendering an iframe by replacing A href, i have a form which gets submitted and then results are populated in iframe replaced previously in place of a href. Now, my problem is that this iframe is not SEO friendly, any ideas ? Regards, Ujjwal Soni

Hey Andrew, thanks a lot for your suggestions! First I’ve thought to handle the code server-side, but as the iFrame is accessed by Javascript anyway, this solution is much better. BTW, same problem is Googles +1 button, it’s also not compatible with Strict mode … Achim

Hi Andrew Thank you for the great example, I am using cufon font replacement, which requires the strict dtd for you to manipulate line heights (a bug in cufon), this allows me to have all my pages validate for the client. I would otherwise use transitional dtd, but I am forced not to. This is a great reason to use jQuery Thank you

This is an awesome tutorial. Thank you for your hard work in explaining step-by-step instructions to implement this simple solution. Thanks

Thanks for providing this great example. It was very easy to follow. It's possible I got something wrong so please let me know if I have... When I check my browser history, then select one of the pages that was previously in the iframe... the browser takes me to that content.html but does not include any of the navigational elements from the index.html. Is there a way to handle this in an SEO friendly way?

Add new comment

By submitting this form, you accept the Mollom privacy policy.
Google