5 tips to tackle the problem with iframes
Iframes have always been frowned upon by web-purists (confession: myself included). But things are never black and white and sometimes iframes can be the best solution for a problem (you could substitute “‘iframes” with “Flash” in the previous 2 sentences, but that’s another discussion). So here are 5 quick tips which might lessen some of the SEO- and usability-problems associated with the use of iframes;
1. Google loves doesn’t hate iframes done right!
Although Google is rather vague about the subject, iframes and SEO do not have to be mutually exclusive. But you will have to make sure it’s your main page that shines in search results, not the iframe-content. The main page (where the iframes are defined) has to be more then a mere placeholder for one or more iframes. Migrate as much information (titles, description and other text) from the iframe-content to your main page, which should describe what goes on in the iframe(s). Use the iframe title-property and insert alternative content between opening and closing iframe-tags. A quick example:
<h2>Calculate your mortgage rate</h2>
<p>Calculating your mortgage rate was never easier; just enter the loan-amount and the duration below!</p>
<iframe src=”http://page.url/iframe-container-page1″ … title=”Calculate your mortgage rate here”>Your browser does not seem to handle frames properly, but you can calculate your mortgage rate <a href=”http://page.url/iframe-container-page1″>here</a></iframe>
2. Own the stage
Avoid visitors viewing the iframe-content out of the context of the main page (e.g. because they followed a link in search-results). Add javascript to the iframe-content to check if it is accessed stand-alone and redirect to the main page (or explain and provide link to the main page) if that is the case.
if(self.location==top.location) top.location.replace('http://contain.er/page-url/here');
3. Don’t draw blanks
When a visitor clicks a link at the bottom of a long page inside an iframe and the target is a shorter page inside the same iframe, then he/she will see a blank page which is … well not very usable, no? The (hackety-hack) solution; tell the browser to scroll to the top of the iframe each time a new page in it is loaded, by calling the function below (with the iframe id as parameter) when the iframe’s onLoad event fires:
<script>
var firstrun = new Object();
function frameMagic(el) {
if (typeof firstrun[el] === ‘undefined’) { firstrun[el]=true; }
else { document.getElementById(el).scrollIntoView(); }
}
</script>
<iframe id=”iframe” onLoad=”frameMagic(‘iframe’);”>
Update: the above code has been updated heavily, check my frameMagic.js blogpost
4. Your users really do need scrolling=”auto”!
Help your visitors access all iframe content no matter what configuration they’re using: don’t disable the iframe scrollbars! Disabling them will render the iframe partially inaccessible for some of your users, because the size your iframe-content needs depends on things outside your control such as operating system & versions (e.g. font & screen resolution), browser (e.g. css-implementation) and browser configuration (e.g. non-default font-size). Instead define a reasonable iframe-width and height, make the iframe-content width flexible (fluid) and let the browser decide if a vertical scrollbar is needed.
Update: squeezeFrame.js might be a solution to your scrollbar-woos
5. Smart sizing without scrollbars
If you really really really don’t want scrollbars, if you want your iframe to adapt to the size needed by the iframe-content automatically and if you’re not afraid to experiment; there are some nifty javascript-solutions that allow the iframe-content to communicate the required height to the main page. Check out Framemanager (stand-alone, has some issues though) and the JQuery-postmessage iframe-example (which does everything in javascript, which isn’t really ideal from an accessibility point of view).
Conclusion: iframes aren’t necessarily evil (either), but you’ll have to make a small effort to render them somewhat SEO- and user-friendly.
jillkocher
3 Mar 10 at 21:11
Thanks for this, Frank. There’s a surprising lack of specifics on iframes and SEO. Most seem to have just written them off. I’ve struggled with iframes because the content inside the iframe seems to be visible to Google sometimes and not others. Until I can puzzle it out (or find someone else who has strong evidence) I’m leaning toward placing no navigation or potentially keyword-rich content inside iframes. It’s just not worth the risk.
frank
4 Mar 10 at 11:29
hello jill; it is indeed important to optimize the main page (including keywords/text relevant to the iframe) and to “de-optimize” the iframe-content, but one could also block access to iframe-content-pages (phew, that’s a mouthful) for spiders by adding them to the robots.txt-file off course.
Marco Demaio
22 Aug 10 at 12:42
This is definitely a great article.
The Google link http://www.google.com/support/webmasters/bin/answer.py?hl=en&answer=34445 you provided, also suggest another very interesting article about frames/frameset. You might be interested in reading that too.
It’s etremely SMART the way you suggest to use Javascript to redirect iframe to the container page. By using the Javascript location.replace method instead of a simple redirect you get the HUGE ADVANTAGE to redirect to the content page without compromising the BACK BUTTON functionality.
If we did a simple location redirect, the user experience would be compromised immediately in the moment he clicks the BACK BUTTON, because he would have to click it back twice in a very fast way otherwise the browser would keep him on the same page by redirecting continuously to the container page.
Thanks so much for sharing such an interesting article.
We really need Pro webmaster like you at the new incoming Stackexchange site: http://webmasters.stackexchange.com/questions/2267/do-we-still-need-to-avoid-using-frame-iframe-for-good-seo (same model of Stackoveflow, you are probably aware of these type of sites.
frank
23 Aug 10 at 21:34
thanks for the feedback, i’m already on stackoverflow, but i’ll come by the ‘pro webmaster’-stackexchange as well one of these days to see how you guys are doing
Ali
2 Sep 10 at 01:35
Thanks frank. is good
Marco Demaio
2 Sep 10 at 15:25
Frank, FYI there is a small mistake in your post. If someone uses the code you suggest at point #1 “Your browser does not seem to handle frames…here” and conteporarely places in the IFRAME the javascript code you suggest at point #2 to redircet IFRAME to container page, a poor guy not able to see IFRAME would get redirected back and forth from the container page to the IFRAME.
frank
2 Sep 10 at 15:50
in theory you’re right Marco, but in reality normal users won’t see the link but only the iframe.
there are only a few browsers (lynx and w3m i guess) that don’t display iframes and those that don’t generally don’t do javascript either
sachin
11 Feb 11 at 12:11
nice, you can also use iframe’s name attribute fro solving google rebot search problem
FJ Sonnex
18 Mar 11 at 13:16
I am not into the workings of PC systems & I sometimes get blank iframes in web pages.I guess I have somehow chosen a wrong setting in error .How can I correct this error?
Sorry if this is not really related to your discussion. I would be pleased for any guidance.
Regards FJ Sonnex
frank
18 Mar 11 at 13:19
Well, I’m not sure I’ll be able to help, but what browser are you using and what URL do you encounter the problem on?
How To: Social Plugins | Reverence Media Consulting
29 Jul 11 at 01:54
[...] IFrames are HTML tags that allow other pages to be embedded as a frame within another page. These are quick and easy to implement, but carry accessibility and SEO concerns. [...]
How To: Social Plugins
29 Jul 11 at 18:42
[...] IFrames are HTML tags that allow other pages to be embedded as a frame within another page. These are quick and easy to implement, but carry accessibility and SEO concerns. [...]
Ben
28 Dec 11 at 03:10
for #2 where on the iframed page would you place the following exactly: “if(self.location==top.location) top.location.replace(‘http://contain.er/page-url/here‘);”?
Our website http://www.rock.fm uses iframes for our player content and slideshows…
frank
28 Dec 11 at 06:54
that should go in the head-section of your html ben;
<html><head><script type="text/javascript">if(self.location==top.location) top.location.replace(‘http://contain.er/page-url/here‘);</script> ...</head><body>...</body></html>ben
28 Dec 11 at 15:55
well thank you sir!
frank
28 Dec 11 at 16:00
you’re most welcome, have a great end-of-year!
ben
28 Dec 11 at 19:35
you too!