Emulate xHTML-Strict, Search Friendly iFrames Using jQuery
February 18th, 2010
Web Developers continue to argue whether it’s really that important to publish 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. I’m sure there are other ways to display this sort of web content, but I’ve yet to find any useful. Regardless, I found what I think is a MUCH better way to display web page iFrame content, both technically speaking and considering Search Engine Optimization (SEO; search bots don’t like iFrames). I wanted to share in case someone else finds himself or herself in the same situation.
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.
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!
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:
$(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>");
}
);});
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
Cheers!
-a