Ultimate Guide to iFrame SEO

Neil Patel
I hope you enjoy reading this blog post. If you want my team to just do your marketing for you, click here.
Author: Neil Patel | Co Founder of NP Digital & Owner of Ubersuggest
A graphic saying "Ultimate guide to iFrame SEO."

How do you encourage people to stay on your website?

Make your pages as exciting and engaging as possible.

iFrames are an easy and convenient way to make your pages interactive and fun. Grab the HTML code, add it to your site, and you’re good to go!

However, are iFrames SEO friendly? There’s a lot of debate as to whether you should use them or not.

In this post, I’ll review if iFrames are bad for SEO, how Google handles iFrames, and best practices for iFrames and SEO.

What is an iFrame?

An iFrame (or inline frame) is a piece of HTML code that lets you embed a piece of content within a webpage (known as the ‘parent page’).

Think of an iFrame like the picture-in-picture TVs you can get that allow you to watch two different shows at the same time!

You can use iFrames to embed content from trusted platforms into your website. By a trusted platform, I mean one that is secure, reliable, and well-known, like Google, YouTube, Facebook, or Microsoft.

I use iFrames in my articles to showcase relevant videos from my YouTube channel, meaning viewers can watch videos while staying on the blog.

Here you can see a YouTube video embedded into my article: Is it Better to Embed Videos or Link to Them?

Example of an iFrame: a YouTube video embedded in a blog article

And here is the relevant HTML code in the page’s source code, showing the iFrame.

Alt text: HTML code of blog article, showing where iFrame has been embedded

iFrames use JavaScript, a programming language that provides interactivity and functionality to sites.

Other ways you can use iFrames on your website include embedding:

  • A Google Map on your contact us page (helpful for local SEO)
  • Your social media feeds or posts
  • Your latest podcast episode or a Spotify playlist
  • A PDF document, like a menu or a brochure
  • An application or tool from a third-party provider
  • A newsletter signup or lead capture form
  • A dynamic ad banner, for example, from Google AdSense
Example of an iFrame: A catalog embedded on the Lego website

Are iFrames Bad for SEO?

Every element of your webpage can impact your SEO, and iFrames are no exception.

So, are iFrames bad for SEO? The answer is that it depends.

  • iFrames can reduce your page speed. This is because you’re effectively loading two websites at the same time.
  • iFrames can be a security risk. If the content inside the iFrame is compromised, this can put your website at risk, leading to a manual penalty or demotion in the search engine results.in the search engine results.

However, iFrames can be beneficial for SEO too. By embedding engaging content on your website, you’re enhancing the user experience, which can boost your search engine ranking.

The key to iFrame SEO impact is to ensure your iFrame content enhances the page experience rather than detracting from it.

An embedded Google Map on the Foursquare website

Take, for example, this listing page on the Foursquare website. The embedded Google Map is small, discrete, and doesn’t take anything away from the rest of the page.

We’ll look at iFrame SEO best practices later in this article.

How Google Handles iFrames

There are a lot of mixed messages about how Google handles iFrame content.

Some web developers will discourage organizations from using iFrames as they believe Google doesn’t crawl content inside them, or search engines prioritize iFrames over other content on a page. However, this isn’t entirely true.

Here’s the lowdown on Google iFrame SEO.

Google Doesn’t Crawl Content Inside iFrames: False

In the past, Google and other search engines struggled to crawl content included in iFrames. As a result, many websites used iFrames in their black hat SEO strategies to show different content to search engines and web users.

Over time, search engines have become more advanced and can now crawl content within iFrames. This means content within an iFrame can contribute to your search engine ranking, something to bear in mind when you’re running your next technical SEO audit.

It’s important to remember that while iFrame content can appear in the search engine results, it’s not guaranteed. It depends on:

  • How relevant the content in the iFrame is to the search query.
  • The title and description of the iFrame (we’ll look at this in more detail later).
  • Whether the iFrame can be crawled, for example, if it’s blocked by robots.txt or is behind a paywall.

Google Search Advocate John Mueller went on record on Reddit saying that if you want to guarantee something indexed is in the search engines, include it directly rather than using an iFrame.

Google Sees iFrames as Dangerous: False

Some people think iFrames are a security risk as cybercriminals can exploit them to compromise security on the embedded websites.

For example, let’s say a hacker wants to steal personal data from users of an online forum. They could inject malicious iFrames into user profiles, redirecting users to a fake login page, where they are tricked into providing their usernames and passwords.

Can iFrames be problematic in the wrong hands? Yes. However, you minimize the risk by only embedding iFrames from trusted sources. You can also enable the ‘sandbox’ attribute to minimize iFrame functionality, which we’ll look at in more detail later.

Google Prioritizes iFrames Over Other Content: False

Another myth I frequently hear concerning iFrame SEO is that Google crawls iFrame content before other content on the parent page. This can make some website owners reticent to use iFrame content as they believe Google will index it at the expense of their own content.

Search engine bots typically crawl the main content of a page first, like the images and text, as this information provides them with the most context. Then, additional elements like iFrames are analyzed.

Example of an embedded video and text on a webpage

So, on this video marketing blog page, a search engine bot would crawl the text and internal links before the embedded YouTube video.

Google Considers iFrames as Duplicate Content: False

Duplicate content in Google won’t necessarily tank your search engine rankings unless you’re copying massive amounts of information or doing it with malicious intent.

The good news is that Google doesn’t consider content contained in iFrames as duplicate content. This is because Google is smart enough to understand the original source of the content and attribute it accordingly.

Google Advises You Use iFrames Sparingly: True

While iFrames don’t affect SEO as much as you might think, Google still advises that you only use them when absolutely necessary. This is because they can slow down your page loading times, and it’s easier for web crawlers to access information directly on your website.

Add a couple of videos, a Google Map, social media share buttons, and enable Google Display Ads… the number of iFrames on a page can quickly add up! The power of videos and other engaging UX should be harnessed using the right amount of iFrames for SEO. So what are the iFrame SEO best practices?

iFrame SEO Best Practices

If you want to include iFrames on your website, there are some tweaks you can make to ensure your iFrames don’t harm your search engine rankings.

Here are some of my top recommendations for iFrame SEO. I’ve tried to make them as easy to understand as possible, so you don’t have to be a technical SEO consulting agency to understand them.

Utilize Lazy Loading

I mentioned that elements on a page are loaded depending on where they are in the HTML code. You can use lazy loading to override this and tell browsers to load iFrames at the last minute.

Lazy loading means that elements only load when they are needed. Let’s say you’ve got a YouTube video on your website. When you enable lazy loading, it will only load up when a user scrolls near it, helping improve the loading speed of your page.

To enable lazy loading, go into your HTML code, find your iFrame tag and add loading=”lazy” to it, like this.

<iframe src=”https://example.com/” loading=”lazy”>

</iframe>

Implement Descriptive and Keyword-Rich iFrame Content

While search engine crawlers like Google can index iFrames, any additional data you provide will increase the chances of your parent page ranking for the right keywords.

This means it’s essential to supplement your iFrames with descriptive information and relevant keywords.

For example, let’s say you have a Google Map on your contact us page. As well as the map, include your address directly on the page. This provides the search engines with further context and gives you a valuable local SEO boost.

Embedded Google Map with a crawlable address

Ensure iFrames Have Proper Titles and Descriptions

Did you know you can add a title and description to your iFrame? This can make your iFrame more SEO-friendly as you can use relevant keywords.

A title and description can also make your iFrame more accessible, as people using assistive technology like screen readers can understand what your iFrame contains.

Here’s how your title and description might look in your HTML code:

<iframe src=”https://www.example.com/content.html” title=”Example Title”

description=”Example Description.”

width=”500″ height=”400″></iframe>

Set Appropriate iFrame Attributes for SEO-Friendly Embedding

One of the great things about iFrames is that you can customize them to your specific needs. For example, you can edit the HTML to enable lazy loading, and add a title and description.

There are other iFrame attributes you can edit too, including:

  • Width and height to ensure your iFrame fits the design of your page.
  • Sandbox. Enabling the sandbox is a security feature that means your iFrame can’t access information about its parent page. Bear in mind that allowing this attribute may mean your iFrame doesn’t work as it should.
  • Allowtransparency, which sets the background to transparent.
  • Scrolling. This determines whether your iFrame can scroll vertically and horizontally.

Use the Noscript Tag to Provide Alternative Content

What happens if someone can’t access your iFrame content? For example, if they are using a browser that doesn’t support JavaScript.

They’ll just see a blank space where the iFrame could be. If this causes them to leave your site, this could lead to your SEO taking a hit.

An embedded video on a browser where JavaScript is disabled

In this scenario, you can use the noscript tag to provide alternative content that displays if JavaScript isn’t supported. For example, if you use Google Maps, you can show a static map image instead.

Use iFrame Content Sparingly

Too many iFrames on a page can slow page loading times and make your content hard to navigate.

While there isn’t a maximum amount of iFrames you can have on a page, it’s important to use them carefully. Think about the purpose of the iFrame and whether you can replicate the content directly on your page instead.

Also keep an eye on your page load speed; Google PageSpeed Insights is great for this. If your score drops, it might be time to reassess your iFrame usage.

Google PageSpeed Insights report for www.neilpatel.com

Are there any SEO-friendly iFrame alternatives

As you can see from the chart below, iFrame usage has dropped significantly from its peak four years ago.

Chart of iFrame usage, from 2013 to 2023

Over recent years, new alternatives to iFrames have come out that claim to be more secure, faster, and more SEO-friendly.

One of the best alternatives is AJAX. You can use AJAX to fetch data in the background and update a webpage without a full reload. While it can be faster, it can be hard to implement on a parent page without the proper technical knowledge. Not all browsers support AJAX, which means you need to have an alternative system in place.

You can also use JavaScript for embedding content into web pages. Like AJAX, it can dynamically load and update content. While JavaScript is great for giving you more control over your embedded content, it’s very complex, and its behavior may vary across different browsers.

Which alternative should you use? You need to consider your website platform, the browsers, and devices your site visitors use, and what you want to achieve.

FAQs

What is an iFrame and how does it affect SEO?

An inline frame (iFrame) is a snippet of HTML code that allows you to embed a page from another website on your webpage. For example, you can use iFrames to embed YouTube videos, Google Maps, or social media posts.
iFrames predominantly affect SEO in that they can increase page loading times. This can have a negative effect on your search engine ranking. 

AJAX vs iFrame SEO: Which is best?

AJAX is typically faster and easier to crawl than iFrames. However, iFrames are easier to implement and are supported by a wider range of browsers and devices.
It’s essential to consider the type of content you want to embed and the browsers your web visitors use.

How do search engines crawl and index content within iFrames?

Some people think that search engines cannot crawl and index content within iFrames, but they can. They do this the same way as regular web pages, by reading the content and storing information in the search engine index.

How should I use iFrames with good SEO in mind?

Here are my top tips for SEO for iFrames:
Edit your iFrame code to suit the design of your page and enhance the user journey.
Add a title and description to provide additional context to search engines.
Utilize lazy loading to load iFrames at the last minute.
Enhance the parent page with relevant keywords and additional information.
Use the Noscript tag to provide alternative content for browsers that don’t support JavaScript.
Minimize your use of iFrames to keep page speed high.

Conclusion

iFrames are an easy way of adding content to your website that users can engage with.

Still on the fence when it comes to iFrames? Think of them like you would keywords.

Using the right keywords in the right capacity can benefit your SEO but misusing them or stuffing your content full of them can have a negative effect.

The same logic applies to iFrames. If you use them in line with best practices, you have nothing to worry about.

I hope this article has answered all your questions about iFrame SEO. Whether you manage your SEO in-house or use a technical SEO agency, you’re one step closer to providing your target customers with content they want to see.

Do you use iFrames on your website, or do you avoid them? Let me know your thoughts in the comments!

Consulting with Neil Patel

See How My Agency Can Drive More Traffic to Your Website

  • SEO - unlock more SEO traffic. See real results.
  • Content Marketing - our team creates epic content that will get shared, get links, and attract traffic.
  • Paid Media - effective paid strategies with clear ROI.

Book a Call

Ubersuggest

Unlock Thousands of Keywords with Ubersuggest

Ready to Outrank Your Competitors?

  • Find long-tail keywords with High ROI
  • Find 1000s of keywords instantly
  • Turn searches into visits and conversions

Free keyword research tool

Neil Patel

About the author:

Neil Patel

Co Founder of NP Digital & Owner of Ubersuggest

He is the co-founder of NP Digital. The Wall Street Journal calls him a top influencer on the web, Forbes says he is one of the top 10 marketers, and Entrepreneur Magazine says he created one of the 100 most brilliant companies. Neil is a New York Times bestselling author and was recognized as a top 100 entrepreneur under the age of 30 by President Obama and a top 100 entrepreneur under the age of 35 by the United Nations.

Follow the expert:

Share

Neil Patel

source: https://neilpatel.com/blog/iframe-seo/