SEO

Using iFrame: SEO and Accessibility Points

IFrame (inline frame) is an HTML element that makes it possible to embed another HTML document inside the main one. It has become one of the most popular ways to embed interactive and multimedia content inside the block of text.

Thus, many people use it and many of them are wondering how SEO-friendly this HTML element is. So let’s overview the SEO and accessibility of an iframe:

1. SEO:

Points to remember:

  • The content in an iframe is not considered part of the parent page.
  • The page within an iframe may be spidered and indexed (or it may be not) but no PR is definitely passed.

Here’s a nice comment by JohnMu on Google indexing iFrames (found via forum discussion):

I wouldn’t count on content which you are including as an iframe on being crawled and indexed within the context of your pages… If you want to make sure that they aren’t indexed at all, you may want to use “noindex” robots meta tags…

  • If you want to pass PageRank to the source page, add href=”direct-link-of-the-source-here” between <iframe></iframe> tags (mind that it is believed but actually no confirmed that a link within an iFrame passes PageRank. If you really want the source page to accumulate some PR, be sure to add a direct link to the page before or after the iframe element).

Here’s a good example of SEO-friendly iFrame usage:

iframe seo 01 Using iFrame: SEO and Accessibility Points

The iFrame source code looks as follows:

iframe seo 03 Using iFrame: SEO and Accessibility Points

Google’s text version has the following in place of the iframe (the iframe is rendered as a direct link):

iframe seo 02 Using iFrame: SEO and Accessibility Points

2. Accessibility

Points to remember:

  • A screen reader will normally turn the iFrame into a link to the source page (like Lynx) (unless they have a better alternative like text, see the last point here);
  • Links within the iframe element are accessible via the keyboard as if the content were within the web page containing the iframe.
  • To make an iFrame accessible, include a text description right within the iFrame (in this case, browsers that do not support frames, will display the text in bold in place of the iframe):

<iframe src=”http://sourcesite.com/sourcepage.html” width=”50%” height=”XX”><p>Your text describing the iframe content goes here. <a href=”http://sourcesite.com/sourcepage.html”>View the content of this iframe</a> within your browser.</p>
</iframe>

Note: title=”" attribute can also be effective for this.

More available iFrame attributes can be found here.

3. Usability

  • The text description works good for those who have frames disabled.
  • Scrolling: most usability issues of iFrames have something to deal with scrolling. Let’s discuss it in a little bit more detail here:

scrolling=”auto” (this is the best option to use: vertical and horizontal scroll bars display only if the content cannot adequately be displayed within the specified size dimensions of the iframe);
scrolling=”yes” (both vertical and horizontal scroll bars appear regardless of whether they are needed)
scrolling=”no” (scroll bars are disabled no matter what);

4. Examples of Creative Usage:

1. Embed a Puzzle

ProProfs allows to create crosswords and puzzles and embed them right to your page. I find it a great way to entertain and engage your readers.

You can see a few examples in my recent post with a couple of SEO puzzles. For a sliding puzzle you can use an image from Google search, direct URL or your computer. The result looks like this:

iframe puzzle Using iFrame: SEO and Accessibility Points

2. Embed a Mind Map

A mind map is a great way to visualize your post content. Mind Meister is my favorite mind-mapping utility that allows to embed a mind map in an iframe:

iframes mindmap Using iFrame: SEO and Accessibility Points

3. Embed a Google Element

Google uses iFrames to allows users to embed the following Google content types:

  • Google calendar;
  • Conversation element;
  • Custom search;
  • Google maps;
  • Google news;
  • Presentations;
  • Spreadsheets;
  • YouTube news:

iframe google element Using iFrame: SEO and Accessibility Points

f8d69258525dec38624a29eb3d570d8c 64 Using iFrame: SEO and Accessibility Points
Ann Smarty is the blogger and community manager at Internet Marketing Ninjas. Ann's expertise in blogging and tools serve as a base for her writing, tutorials and her guest blogging project, MyBlogGuest.com.
f8d69258525dec38624a29eb3d570d8c 64 Using iFrame: SEO and Accessibility Points

You Might Also Like

Comments are closed.

7 thoughts on “Using iFrame: SEO and Accessibility Points

  1. More than just the questions and answers are protected by <a href=”http://www.mcsa-70-

    270.com”>MCSA Exam. We also guarantee success from using any of our <a href=”http://www.mcsa-

    70-270.com”>MCSA Exam
    such as the labs and scenarios. The CompTIA study guide is also covered, making the entire

    combination of 70-270 Certification
    a perfect CompTIA study pack and ultimate learning tool.

  2. I realize this article is pretty old but I have a related question that I cannot seem to answer. Is there a way to embed a pdf file within a portion of the page and retain the ability for google to index the content? From your article, it doesn’t sound like it is a possibility with an iframe; are there any other options? The pdf’s I’d like to embed are inspection reports which combine text and photos, and quite a bit of formatting, so converting them would be a nightmare.

    Thanks!

  3. Is it good to add an iframe for the links at the bottom of the page, those links you don’t need to index but they have to be there, like privacy police, etc.?