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.

45 thoughts on “5 tips to tackle the problem with iframes

  1. jillkocher

    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.

    Reply
    1. frank Post author

      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.

      Reply
  2. Marco Demaio

    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.

    Reply
  3. Marco Demaio

    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.

    Reply
    1. frank Post author

      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 :-)

      Reply
  4. FJ Sonnex

    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

    Reply
    1. frank Post author

      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?

      Reply
  5. Pingback: How To: Social Plugins | Reverence Media Consulting

  6. Pingback: How To: Social Plugins

  7. Ben

    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…

    Reply
    1. frank Post author

      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>

      Reply
  8. Flo

    Hi guys,
    Im trying to insert this iframe in my website…

    Unfortunately, the tag messes all the page content and everything gets deleted after the iframe, including widgets. Any idea what the problem might be? Millions of thanks.

    Reply
    1. frank Post author

      Hi Flo; I see 2 possible problems in the HTML:

      1. the email-link is not formatted correctly, maybe change <a href="mailto:info@imagineafrica.co.uk">info@imagineafrica.co.uk</onClick="javascript: pageTracker._trackPageview ('mailto/info');"/a> into <a href="mailto:info@imagineafrica.co.uk" onClick="javascript: pageTracker._trackPageview ('mailto/info');">info@imagineafrica.co.uk</a>
      2. the iframe is closed, but in an XHTML-kind of way, which might break things. try to change <iframe style="WIDTH: 598px; HEIGHT: 255px" ... scrolling="no" /> into <iframe style="WIDTH: 598px; HEIGHT: 255px" ... scrolling="no"></iframe>

      hope this helps!

      Reply
      1. Flo

        Hi Frank. Many thanks for your reply. I have tried closing the iframe in the way you suggested but my system deletes the and reverts itself to the old text. Any ideas why? Thanks

  9. Flo

    Hi Frank. Its been designed by RedTechnology. Could it be that they set it up in such a way, that iframes are not supported?
    Also, I have tried to replace the iframe tag with object, but a big chunk of our customers might not see the slideshow, as the object tag is not supported by IE8 and older versions. Are there any alternatives? Manythanks.

    Reply
    1. frank Post author

      I think you can nest object and iframe, similar to how embed-tags (which might work as well, actually) were put inside object tags.

      If that doesn’t work, I would advise you to contact RedTechnology and ask why the iframe-tag gets closed differently.

      Reply
      1. Rene

        Hello frank within my webpage i use transform and scale to put a live snapshot of a external website on my own page.
        the only problem is i do not want people to open a link within this live snapshot but to open the site through a external link. Do you know how to handle this.

  10. Jim Schultz

    Thanks for the interesting article.
    However, I didn’t find it helpful in diagnosing/solving my iframe issue: I am updating our site design and am trying to use the iframe along with the HTML 5 tag to place a meeting announcement on every page [www.wiscosh.org/beta] along with a constantly updated news feed. It seems fine until I check it on my WP7 where I get 3 or 4 repeats of the “meetings” page within the iframe/ area. Any thoughts on why? Did I mess up my code? Is this just a WP7 IE thing? When I check it in IE9 [Windows 7] it displays correctly as it does in FF, Opera, …

    Reply
    1. frank Post author

      That indeed seems like a problem in WP7 specifically Jim, although to be honest iframes on mobile can be a pain in the neck. If you do want to support WP7 (and mobile browsers in general), I’d advise to try to start with the simplest of code, something like <iframe src="http://url.to/your-page"></iframe> and see if/ how that works and try to build on that?

      Reply
  11. Sarkari Naukri

    Thanks Frank for the iFrame tips , yesterday when i was added Div frame to one page it started to mess up with custom code, but now i figured out. Thanks for the help!

    Reply
  12. Andrew

    Frank, great post. I have a quick question. Which of these iframe structures is correct to allow the SEO engine to read the alt code?

    iframe width=”220px” height=”394px” frameborder=”0″ scrolling=”no” src=”http://www.visionbakery.com/deliver-project-teaser/251″ alt=”VisionBakery Crowd Funding Germany Film”>alt=”VisionBakery Crowd Funding Germany Film”</iframe

    Thank you for the help.

    http://www.yellowbric.com if you want to check out the site. We're in Beta.

    Reply
    1. Andrew

      Of course the page didn’t like the code in the message. Basically if I’m adding “alt=keyword1 keyword2 keyword3″ into the iframe code, does it go inside the where the src=”….” goes or does it go between the closing > and the opening and the <iframe but it seems wrong to me for some reason. Just making sure I have it right. Thank you again.

      Reply
      1. frank Post author

        The “trick” here is that browsers that everything between the opening is seen by Google, but not displayed by browsers that support iframes. So adding alternative content in there makes sense, but you should test if Google likes it that way (this blogpost is over 3 years old).

  13. M. Farfarowa

    I tried using meta tags and your java script solution but it still isn’t working for me .

    if(self.location==top.location) top.location.replace(‘http://velenservices.com/index.html’);

    This is the code I inserted. What am I doing wrong?

    Reply
  14. Devan

    Hi sir..i need a help…when i added a link in iframe..its automatically redirecting ….means blasting out from the iframe…can you give me code to stop this redirection…
    I needed 5 iframes on my site so i need to stop the redirection…
    Can you give me the iframe code….

    Reply
    1. frank Post author

      you could sandbox the iframe, but then no javascript in there will work any more, so I’m afraid there’s no good solution.

      Reply
      1. Devan

        Please tell me in detail…how i could sandbox the iframe…as i am not expert in using iframes!!!!
        Please help me…

  15. buzios

    Hello,

    I followed all of your tips about iframe, it’s working fine except for one bug. I couldn’t detected, could you give me a hand?

    frames are on this page, try open a camera:
    http://www.toembuzios.com/index.php/cameras

    Apparently is working fine, but when you push in another cam inside lightbox, all content goes up 4 or 5 pixels.

    Appreciate some help.

    Mauro

    Reply
      1. buzios

        Yes, definitely it is in lightbox. when I decrease the lightbox size, the “jump” became smaller also, maybe 1px.
        I think now it’s aceptable, almost imperceptible, but I will keep trying find final solution.
        Thank you anyway, and thanks for the artilcle.

        Mauro.

  16. Edward Jones

    Thanks this post has been very informative, but I still have a problem. I have not programmed in quite sometime. I am using iframe code (see below) to display a page on my main website. I just cannot get it to stop redirecting outside of my site. I used the code you posted above but still no luck. Like I said its been years since I programmed. Can you help?

    Edward

    Reply
    1. frank Post author

      Afternoon Edward. Pages in iframes cannot be stopped from being iframed, you can only stop this from happening if you own the page you’re trying to embed.

      Reply
  17. Alex Bashinsky

    Thank you for posting this. Yes, there are definitely SEO-related issues about the use of iframes (I am thinking of utilizing it) but it’s good to know that it’s not necessarily all bad if done right.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>