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!

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

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

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

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

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

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

  • 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
  • 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
  • Kevin InTervento

    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
  • Carpatzi Homes

    Very helpful tutorial, thanks for taking time to post !
    Although it’s fairly difficult to read for beginners (n00bs), it contains quality information. You should also include some advice for wp platforms. I’m not sure whether to include the social media iframes on header, on separate pages or on the single.php. My index looks like this . Any information would be a big thanks.

    Reply
  • Leave a Reply

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

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