ReactJS - 如何为 SEO 渲染 iframe 内部内容服务器端？答案

【问题标题】：ReactJS - How to render iframe inner contents server-side, for SEO?ReactJS - 如何为 SEO 渲染 iframe 内部内容服务器端？
【发布时间】：2014-10-13 09:33:30
【问题描述】：

我正在开发一个使用 Facebook 的 React JS 框架同时支持客户端和服务器端渲染的应用程序。

我需要渲染一个 iframe，它里面有一些 html。 HTML 是使用我有权访问的脚本创建的。

但是，我希望在服务器上呈现内部内容，以便 HTML 显示在搜索引擎中。问题是要创建内部内容，通常需要等待 iframe '加载'，这在服务器上不会发生。

我该怎么做？

这是我尝试过的，但不起作用：

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

请注意，我在 componentDidMount 上添加内容，否则在 iframe 加载时它会被“擦除”。

【问题讨论】：

标签： javascript iframe reactjs

【解决方案1】：

有一个 React 组件可以渲染 iframe：https://github.com/svenanders/react-iframe

您可以使用npm install react-iframe 获取它，然后在您的 React 代码中像这样使用它：

import React from 'react';
import Iframe from 'react-iframe';
...
// In your render function:
<Iframe url="whatever.html" />

不幸的是，我实际上更愿意将服务器生成的 HTML 呈现为 <div> 而不是实际的 <iframe>...

【讨论】：

【解决方案2】：

一个好方法是使用data URI scheme。它允许通过 src 属性将 html 内容插入 iframe。目前支持除 IE 以外的所有浏览器（部分支持 - 无 html 选项） - caniuse。

这将允许谷歌搜索引擎在服务器端读取 iframe 的内容。

所以你的代码应该是 -

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

}

【讨论】：

数小时以来一直试图弄清楚如何在<iframe> 中引用变量。谢谢你的代码示例:)

【解决方案3】：

IFrame 有时用于在网页上显示内容。内容通过 iFrame 显示的内容可能未编入索引且无法显示在谷歌的搜索结果。我们建议您避免使用 iFrames 来显示内容。如果您确实包含 iFrame，请确保为它们显示的内容提供额外的基于文本的链接，因此 Googlebot 可以抓取此内容并将其编入索引。

-Google Webmaster Guidelines

因此，从 SEO 的角度来看，您要么需要在此处停止使用 iframe，要么接受它不会被索引。

将其放入 html，然后将其切换到 iframe 之类的巧妙技巧将无济于事，因为 Googlebot 使用 JavaScript……除非您通过用户代理嗅探来发送空 JavaScript 文件，但我不建议这样做。

直接的答案是使用 __dangerouslySetInnerHTML if !this.state.x, and in componentDidMount setTimeout(() => this.setState({x: true}), 0), 并在 componentDidUpdate 中将 html 注入 iframe。

【讨论】：

感谢您花时间回答，但这是不正确的。使用 setTimeout 对服务器端渲染完全没有帮助，虽然谷歌写了“可能没有被索引”——这绝对是可能的，但它不是自动的。网站管理员指南与开发人员指南不同，因为我们开发人员实际上可以对此有所作为。
确保验证 Gyro 的方法确实有效（在修复明显错误之后）。