I'm working on an application which supports both client and server-side rendering using Facebook's React JS framework.
I need to render an iframe, which has some html inside of it. The HTML is created using a script that I have access to.
However, I want the inner content to be rendered on the server, so that the HTML shows up in search engines. The problem is that for the inner content to be created, it normally needs to wait for the iframe to 'load', which does not happen on the server.
How can I do this?
Here's what I tried, which doesn't work:
render: function() {
return (
<div>
<iframe
ref="myIframe">
</iframe>
</div>
);
},
ponentDidMount : function() {
var iFrameNode = this.refs.myIframe,
frameDoc = iFrameNode.contentWindow.document;
frameDoc.write('<html><body style="margin:0px;"><div><script type="text/javascript" src="..."></script></div> ... more html');
}
Note that I'm adding the content on ponentDidMount because otherwise it gets 'erased' when the iframe loads.
I'm working on an application which supports both client and server-side rendering using Facebook's React JS framework.
I need to render an iframe, which has some html inside of it. The HTML is created using a script that I have access to.
However, I want the inner content to be rendered on the server, so that the HTML shows up in search engines. The problem is that for the inner content to be created, it normally needs to wait for the iframe to 'load', which does not happen on the server.
How can I do this?
Here's what I tried, which doesn't work:
render: function() {
return (
<div>
<iframe
ref="myIframe">
</iframe>
</div>
);
},
ponentDidMount : function() {
var iFrameNode = this.refs.myIframe,
frameDoc = iFrameNode.contentWindow.document;
frameDoc.write('<html><body style="margin:0px;"><div><script type="text/javascript" src="..."></script></div> ... more html');
}
Note that I'm adding the content on ponentDidMount because otherwise it gets 'erased' when the iframe loads.
Share Improve this question asked Aug 20, 2014 at 6:03 EtaiEtai 1,5031 gold badge11 silver badges15 bronze badges3 Answers
Reset to default 10A good way to do it is to use data URI scheme. It allows inserting html content to an iframe via the src attribute. Currently supported on all browsers except IE (partial support - no html option) - caniuse.
This will allow google search engine to read the content of the iframe on the server side.
So your code should be -
render: function() {
var frameSrc = browser.ie ? '' : 'data:text/html,<html><body style="margin:0px;">...more html">'
return (
<div>
<iframe
ref="myIframe"
src="{frameSrc}"
</iframe>
</div>
);
},
ponentDidMount : function() {
if (browser.ie) { //some browser detection library/code
var iFrameNode = this.refs.myIframe,
frameDoc = iFrameNode.contentWindow.document;
frameDoc.write('<html><body style="margin:0px;"><div><script type="text/javascript" src="..."></script></div> ... more html');
}
}
IFrames are sometimes used to display content on web pages. Content displayed via iFrames may not be indexed and available to appear in Google's search results. We remend that you avoid the use of iFrames to display content. If you do include iFrames, make sure to provide additional text-based links to the content they display, so that Googlebot can crawl and index this content.
- Google Webmaster Guidelines
So from a SEO standpoint, you either need to stop using iframes here or accept that it won't be indexed.
Clever tricks like putting it in the html, and then switching it to an iframe won't help because Googlebot uses JavaScript... unless you do useragent sniffing to send empty JavaScript files, but I don't remend that.
The direct answer is to use __dangerouslySetInnerHTML if !this.state.x, and in ponentDidMount setTimeout(() => this.setState({x: true}), 0), and inject the html into the iframe in ponentDidUpdate.
There is a React ponent to render iframes: https://github./svenanders/react-iframe
You can get it with npm install react-iframe, then use it like this in your React code:
import React from 'react';
import Iframe from 'react-iframe';
...
// In your render function:
<Iframe url="whatever.html" />
Unfortunately for me, I would actually prefer to render my server-generated HTML into a <div> rather than an actual <iframe>...