How to Use Iframes


iframes-1024x500 How to Use Iframes

Remember the websites where the main navigation did not scroll with the rest of the page? Yes, that age old system of using frames to lock one part of the page is seldom seen these days. With HTML5, the only kind of frame that can still be used in your website design is an Iframe or inline frame. Many web designers and SEOs recommend that Iframe should NOT be used in your website design. Is this argument valid? To find the answer to this, we should first understand what Iframes are used for, what they do, and how — if at all — they can be used in your website design effectively.

What do Iframes do?

In short, iframes allow you to include external content within your web page. If your website served advertisements from an advertising network, this would qualify as external content since it is not editorial content of your website. When you use an iframe to serve external content on your web pages, it is similar to have two browser windows on the same page — the primary winow showing the content from your web page and the secondary invisible window serving the external content.

When search engines visit your website, they look to crawl and index the primary content from your website and ignore any external content served using iframes on your web page. As a result, advertisements do not get disguised as content from your page and your page content does not get diluted by external content.

With the advent of newer technologies like JavaScripts, AJAX and Styles, the use of iframes has reduced over the years. Malicious sites have abused iframes using them to hide and serve malicious content causing security risks. Also, because the content served by the iframe is not accessible to search engines, there is a common blanket misconception among SEOs that iframes are not search engine friendly and should be avoided at all costs. However this is not entirely true.
If it was so SEO unfriendly, would Gmail have used iframes? Or other equally significant sites like Twitter, Facebook and Yahoo!?

When to use Iframes?

There are three main reasons why iframes still have a place in todays web design.

  • Unlike images, scripts or styles, iframes implement cross domain origin policy. What this means is that you can extract content or advertisements from other websites with relative ease and safety.
  • An iframe gives you much more flexibility and options about the type of content that you can serve in the iframe. For instance, if you wanted to display the contents of a PDF file within a part of your web page, you would be able to do that with an iframe.
  • There are times when you intentionally do not want search engines to crawl and index a part of your page content, an iframe can make this happen quite easily. Let’s say there was a subscription form or a login plugin that you didn’t want search engines to crawl. Serving it through an iframe would be one way to prevent the crawling of such content by search engines.

Contrary to the misconception, iframes do have a place in modern web design. However, they should not be used indiscriminately. When used the right way, an iframe can be a relatively simple way to serve external content on your website that will not be crawled by search engines.

Professional Web Design Services from Flying Cow Design

Flying Cow Design has a track record of over 20 years of professional web design. What differentiates us from most web design companies is that our focus is not only on web design, but on building a strong online presence for our clients. Understanding the changing search engine guidelines and being proficient in SEO has helped us build a strong web presence for many of our clients through a combination of our web design and internet marketing services. To see how we can help you build a strong web presence, write to us today!

fb50c5bf790872a8ecad33a6bd15d358?s=100&d=mm&r=g How to Use Iframes

CEO, Flying Cow Design
Attended University of Auckland
Lives in San Francisco Bay Area

October 18th, 2016


Need help with Web Design?

Write to us with your project details and we will get back to you shortly.


Related Articles
Self-hosted WordPress sites are versatile platforms for building a business. The secret to WordPress' flexibility
If you are a business owner looking to grow your business online, here are three
A payment gateway facilitates online credit card payment processing on your website. The software and
An iframe or inline frame is essentially a browser window set within the web page.
Content marketing creates organic traffic, but it requires sound strategy. Separating the two is like
When we look back over the last 10 years, it is amazing how corporate websites
When one mentions browsers, most instinctively think of Internet Explorer, Mozilla Firefox and Google Chrome.
Not often are CSS and typography used in the same sentence and in many ways,
It's rare to find a website to be completely free of errors. This is usually
What are web fonts? When designing for offline media like brochures, billboards, press advertisements, etc.,