如何在服务器端呈现iframe内部内容，用于SEO

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

本文关键字：用于 SEO 内部 iframe 服务器端      更新时间：2023-09-26

我正在开发一个使用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加载时，它会被"擦除"。

一个很好的方法是使用数据URI模式。它允许通过src属性向iframe插入html内容。目前支持除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有时用于在网页上显示内容。内容通过iframe显示的内容可能无法被索引，无法显示谷歌的搜索结果。我们建议您避免使用iframe显示内容。如果你确实包含了iframe，请确保为它们显示的内容提供额外的基于文本的链接谷歌机器人可以抓取和索引这些内容。

- Google网站管理员指南

所以从SEO的角度来看，你要么需要停止在这里使用iframe，要么接受它不会被索引。

聪明的技巧，比如把它放在html中，然后切换到iframe不会有帮助，因为Googlebot使用JavaScript…除非您使用useragent嗅探来发送空JavaScript文件，但我不建议这样做。

直接的答案是使用__dangerlysetinnerhtml如果!this.state.x，并在componentDidMount setTimeout(() => this.setState({x: true}), 0)，并注入html到组件diduupdate的iframe

有一个React组件来渲染iframes: 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>…

相关文章：