An iFrame is an HTML tag that allows you to insert an external HTML document into your website. The use of this tag is a great advantage when we want to share large elements without affecting the performance of our website, an example is when we want to insert videos. The performance of our website would be affected if we insert a heavy video hosted on our server on our website, if we use an iFrame to display a YouTube video, loading time is reduced. It may take a while to load since your website makes a call to the external site to display the content, but this process is done in less time than if it were to call a video that is stored by your web host. The same happens with other types of content such as Google Maps maps or PDF documents.
iFrames and SEO
One of the most common doubts when using iFrames is if this affects SEO. For example, if we use it to show another website within our WordPress, this content Google would not count as duplicate content. Google bots see that the source URL is different from the one they are crawling and understands them as different sites.
Google also cannot consider that the use of iFrames is a way of doing a little recommended and punishable practice called Cloacking, a tactic that shows
visitors to a web page content different from that shown in search engine results. .
In the same way that it will not affect us negatively, it will not benefit us in any positive way. The content embedded with iFrames is not attributed to the page that contains it, but to the source URL defined by the tag.
How to embed iFrames in WordPress
Keep in mind that the iFrames that we want to insert must use the same transfer protocol as the one we use on our website. If HTTPS is used on our website, we can only embed pages or content from other HTTPS sites. The same happens if we use HTTP, we can only embed pages or content from sites with the HTTP protocol.
1. Add iFrames in WordPress to embed a web manually
The basic code to add an iFrame of an HTML consists of the opening and closing of the tag, the src attribute to indicate the URL to embed.
The code would look like this:
Other parameters that can be used to customize the iFrame are the width and height attributes to indicate the width and height of the frame that will contain the embedded content. The value of these parameters can be indicated both in percentages and in pixels or by combining both.
To define a frame 960 pixels wide and 720 pixels high, the code would look like this:
|1||<iframe src=”//www.iframecode.com” width=”960” height=”720” ></iframe>|
To define a frame 100% wide and 60% high, the code would look like this:
|1||<iframe src=”//www.iframecode.com” width=”100%” height=”60%” ></iframe>|
To define a frame 100% wide and 720 pixels high, the code would look like this:
|1||<iframe src=”//www.iframecode.com” width=”100%” height=”720” ></iframe>|
To insert it into a page or WordPress post, open the editor in code view (HTML mode) and put the iFrame code where you want to insert the frame, it’s that simple.
2. Add YouTube iFrames
One of the biggest uses of iFrames is to embed YouTube videos. The video platform provides the embed codes necessary for you to embed videos with the iFrame tag in WordPress.
To do this, click on Share under the player. A window will open with different sharing options, click on “Incorporate”.
This option displays an HTML snippet adding the video to an iFrame. Just copy and paste it into the WordPress editor in HTML mode.
If you want to vary the size, you just have to change the value of the width and height parameters. If you want to know more about the parameters of the YouTube player you can visit the YouTube developer guide .
3. Add Facebook Posts
If we want to insert a Facebook post in a WordPress post or page, click on the three-dot menu in the upper right corner of the message you want to embed on the web.
Among the options that appear, click on “Insert” and copy the code, then paste it into the WordPress editor in HTML mode.
4. Add iFrames with plugin
If you are not very skilled working with the editor in HTML format you can always resort to using a plugin to be able to insert the iFrames. In this case you can use the freemium Avanced iFrame plugin , its use is very simple and it has more than 60,000 activated installations that together with the fact of being updated makes it a very reliable plugin.
Locate the plugin from the WordPress repository in ” Plugins> Add New ” and enter the name of the plugin in the search engine. Once installed, installed and activated, create or edit an entry or page and you will see that a new button “Add Advance iFrame” appears. This button inserts a shortcode where we define the url that we want to add as an iFrame.
By way of advice I will tell you that as long as you can dispense with the use of plugins better. Remember that excessive use of plugins can slow down your WordPress as well as being a gateway for hackers if they are not updated regularly.
The use of iFrames will help you not to affect the performance of your WordPress when displaying videos since you avoid having to host them on your server. In addition, the use of iFrame is not considered a copyright infringement so it is a totally legal method to share content from other websites.
Has this article been useful to you? Do you have any questions about how to insert an iframe in WordPress? Leave us your comment or question through the comment form below.