Explain Codes LogoExplain Codes Logo

Are iframes considered 'bad practice'?

web-development
best-practices
seo
security
Anton ShumikhinbyAnton Shumikhin·Jan 29, 2025
TLDR

IFrames are meant to serve a purpose, which is embedding external content. They should, however, be used sparingly and not for whole-page layouts, to maintain SEO optimization and usability. The following is an ideal snippet for embedding a YouTube video without affecting overall page performance:

<iframe src="https://www.youtube.com/embed/videoID" allowfullscreen></iframe>

Appropriate uses of iframes

Safeguarding content security

IFrames are best utilized in circumstances when you need to embed external content, such as YouTube videos or Google Maps, also for sandboxing user-generated content, which contributes to the overall site security.

Situations where only HTML is allowed

There may be specialized situations where an iframe is your sole option. For example, doing background data processing using XmlHttpRequest or implementing automatic file uploads, and of course, only HTML is accessible.

//tell the iframe to work hard but not too hard 😅 <iframe src="..."></iframe>

♨️ Note, you also might need to communicate with the embedded content within an iframe. However, due to the cross-domain scripting limits it might not be possible.

IFrame drawbacks

SEO considerations

A core factor to consider before heading down the iframe route is SEO. Remember, search engines might not index the content within iframes, potentially leading to lost traffic.

The UX factor

Having an iframe as a centerpiece of your site's layout might adversely impact the user experience. Design integration can often be better achieved using other methods.

<!-- An iframe walks into a FORMAT tag and says, "Hey buddy, can you spare some design?" 😂 --> <iframe src="..."></iframe>

Potential security risks

IFrames come with certain restrictions and also pose security risks if they are not managed properly. Hence it's essential to understand these challenges before deciding to use an iframe.

Code, meet best practice

IFrames, as Google's usage demonstrates, can improve browser history navigation. But always remember to consider the security implications.

Align with best practices

Aside from the main purpose, you should also ensure that your iframe aligns with web development best practices and adheres to the Service Level Agreements (SLAs) for its parameterized content.

Perception factor

An overreliance on iframes may be perceived as amateurish or outdated, as modern web development often favors APIs and AJAX.

Consider other options

Before deciding on an iframe, take a moment to analyze other modern web technologies such as Web Components, AJAX, or server-side includes for content embedding. This can often provide a more seamless experience, both visually and functionally.