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.

49 thoughts on “5 tips to tackle the problem with iframes”

  1. 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
    • 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
    • I need scrolling on one page with an iframe and scrolling=”no” on all other pages.
      This works correctly on my site but the HTML5 validator gives me an error so I end up with many errors.
      “Seamless” is a new HTML5 tag but doesn’t work in my IE or Chrome.
      “Catch 22”
      I’m expecting Win10 will resolved these issues.

      Reply
  2. 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. 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
    • 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. 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
  5. 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
    • 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
  6. 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
    • 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
  7. 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
    • 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
      • 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.

        Reply
  8. 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
  9. 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
    • 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
      • 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).

        Reply
  10. 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
  11. 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
      • 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.

        Reply
  12. 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
  13. 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
  14. Aan de naam te herkennen vermoed ik wel dat je nederlandstalig bent. Ik ben echt werkelijk al jaren opzoek naar de oplossing voor het probleem: “wat als ze via zoekmachines rechstreeks naar de iFrame pagina gaan..”
    Na een zoveelste kleine website te maken voor iemand dacht ik toch even door te zetten ook al had ik alle hoop verloren. Maar EINDELIJK… het javascript dat me echt deed springen van vreugde. You are a GOD :p thx!
    In case you can’t speak dutch here’s a translation:
    Already for years i’m searching for the solution for following problem: “what if people open the iFrame page directly from a search query…” After makeing several little websites hope was long gone to find a solution, until now. Here the part you will understand eitherway… you are a GOD! :p thx!

    Reply

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.