4 reasons you should avoid iframe and code embeds whenever possible

Sometimes, websites provide you with code snippets you can paste into your site to add functionality. We’ve previously shared with you why some code snippets won’t work with WordPress, but even if your code will work with WordPress, that doesn’t make it a good idea. Plugins exist to allow you to embed iframes in your website and many other code snippets will work out of the box, but you could run into problems. Here are some things to consider before you embed code from other sources into your WordPress site.

Security issues

When you embed code from another website into yours, you have to trust that it will work as intended and doesn’t have anything extra to compromise the privacy of your users. It would be incredibly easy to add code to an iframe that could track your users or use exploit your site for malicious reasons. Even if the code is harmless, tracking your users could create privacy issues for you with European users because of the GDPR.

Multiple scroll bars

Even if you embed content from a trustworthy website and privacy isn’t a concern, embedded code can create visual issues. If you embed an iframe into your website, you have to specify a certain size for the frame. Dynamic content won’t move everything down on the page properly. And if the “box” you’ve created for the iframe is too small, the iframe will have its own scroll bars This leads to a scroll bar in the iframe and a separate one for the whole page. On mobile where scroll bars are often invisible, this makes for even more confusion for users as they will scroll through the iframe when dragging on it and scroll through the rest of the page when dragging elsewhere on the page. It’s a confusing user experience.

Mobile issues

Speaking of the confusion that can come for mobile users with embedded iframe, and embedded code can create other issues for mobile. Most websites are responsive, meaning they respond — or render differently — on different-sized devices. The problem with embedding code into another site is that it doesn’t receive data from the browser to tell it what type of device is viewing it, so embedded code will almost always load as if the device is a desktop computer — even when loaded on mobile. Have you ever wondered why embedded code looks really small on mobile devices? There’s your answer.

SEO issues

Your SEO also takes a hit when you embed code into your website. Search engine “spiders” read you site’s code to determine what content is there, and they may not read embedded iframe or JavaScript content correctly. That means search engines may miss any content you have in embedded code.

Alternatives

WordPress can embed content from many websites with just a link. Here’s a list of 14 of them. These links are guaranteed to be safe to embed into your site and will display properly on mobile devices. If you’re trying to embed content from another site, see if that site has a plugin you can use. If the plugin is reputable, it should avoid the security issues that can come from embedded code, and if the plugin is coded properly, it should display properly on all devices as well.

Comments