Embedding content through an iframe

A client requested to embed important content on the website that didn’t live in the CMS. The reason is quite logical. In theory, you can create one component and use it across all subdomains or even multiple domains. It's even possible to create a page with another tool outside of the CMS and still use it on your website.

The technology doesn’t even need to match with the technology used in the website where the iframe will be embedded. The code doesn’t need to live inside the same repository or be managed by the same company.

However, the code of these components or pages isn’t set up to be shared. Therefore it needs to be loaded within an iframe and that causes issues with design, content, accessibility, navigation and performance.

Design

There is a big chance the design doesn’t match if you add a part of another website into your own. Things like a color mismatch, different fonts, and a different layout are a real possibility. Because the content lives inside an iframe, you don’t have any control over this embedded layout. This results in a mismatch in breakpoints and container sizes, creating an inconsistency in your layout. All of these issues combined, could result in a different look and feel, and therefore reduce trust in the brand and create a bad user experience.

Content

An even bigger issue occurs when the embedded component/page contains text or images. Nowadays, bots are smart enough to scan the content of iframes. This doesn’t mean it’s taken into account for your SEO score. The source of the content inside the iframe is not from your website and therefore, the content is not assigned to your domain. In short, your site won’t be found on searches that match the embedded content. The common rule therefore is that if the content is relevant to your site, don’t add it through an iframe.

Accessibility

Currently, not all screen readers or other assistive technologies handle iframes like the other content on the page. Scenarios of people getting stuck inside an iframe are not uncommon. It’s true that most of the time, this is not the fault of the iframe but the contents of the iframe. Therefore it’s very important to configure an iframe correctly. Without that, users can run into unscalable typography or non-scrollable content. This could mean it’s impossible to read the content or difficult to navigate to another section of the page.

Links

Links inside an iframe could be a reason people with assistive touch technologies are getting stuck inside an iframe, but it’s also a very bad user experience for those without. When the content of an iframe contains a link, the iframe will navigate, not the page. This means the iframe will update to show the linked page, instead of navigating the whole page away to the new location. Issues like unexpected content, duplicate navigation can be very confusing for a user. Because the page itself doesn’t navigate, the URL doesn’t update. Therefore bookmarking or sharing the new page will become impossible. With that, the back button of the browser will also become useless.

Performance

The last point concerns the performance, especially the loading time. When a page contains content embedded through an iframe, not only the source of the page but also the page within the iframe needs to load. When the page is done loading, it loads not one, but two pages. This increases the loading time and the time before a user can start interacting with the page. From a performance point of view, an absolute no-go!

Conclusion

Based on the topics described above it’s clear that embedding content on your page through iframes can cause issues. It’s likely the design of the embedded content will mismatch the current design because you don’t have any control over the content inside the iframe. The content inside an iframe is not added to your SEO score and users with assistive technologies can get confused by it. For all users, it gets confusing when the embedded content contains links. When navigating with one of those links, the iframe will navigate, not the page itself. Performance is also an issue since you load two pages instead of one.

Embedding pages or part of a page through an iframe looks like an easy solution, but there are pitfalls to it. Unfortunately the best solution depends wholly on both the embedded page and the host page. There’s no one-size-fits-all solution and you or your development partner should dive into the specifics to come up with an alternative to an iframe embed.