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:

Calculate your mortgage rate

Calculating your mortgage rate was never easier; just enter the loan-amount and the duration below!

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:

hope this helps!

  • 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.

    • 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.

      • 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.

  • 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, …

  • 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” Thank you for the help.
    http://www.yellowbric.com if you want to check out the site. We're in Beta.

    • 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 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).

  • 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?

  • 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….

      • 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.

  • 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?

  • 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.

  • 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!

  • Leave a Comment

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