ReactJS

Question

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>
      );
    },
componentDidMount : 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 componentDidMount because otherwise it gets 'erased' when the iframe loads.

Gyro · Accepted Answer

A 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>
      );
    },
componentDidMount : 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');
    }

}

Brigand · Answer

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 recommend 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 recommend that.

The direct answer is to use __dangerouslySetInnerHTML if !this.state.x, and in componentDidMount setTimeout(() => this.setState({x: true}), 0), and inject the html into the iframe in componentDidUpdate.

ReactJS - How to render iframe inner contents server-side, for SEO?

Tags:

javascript

iframe

Etai

2 Answers

Gyro

Brigand

Recent Activity

Donate For Us