CODEWITHSUNDEEP
javascriptiframereactjs
Etai
Etai

Reputation: 1503

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

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.

Upvotes: 4

Views: 16641

Answers (3)

aij
aij

Reputation: 6521

There is a React component to render iframes: https://github.com/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>...

Upvotes: 0

Gyro
Gyro

Reputation: 1045

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');
    }

}

Upvotes: 10

Brigand
Brigand

Reputation: 86260

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.

Upvotes: 2

Related Questions