我在React项目中有我的 index.html 页面，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Bucard | Digital Business Card</title>
<meta name="title" content="Bucard | Digital Business Card">
<meta name="description" content="Bucard - Description for bucard" />
<meta property="og:title" content="Bucard | Digital Business Card" />
<meta property="og:image" content="http://m.digital-card.co.il/zedka/152/images/icon.png" />
<meta property="og:description" content="Bucard - Description for bucard" />
<meta property="og:url" content="https://bucard.co.il/" />
</head>
<body>
<div id="root"></div>
</body>
</html>
还有我的 react-helmet 部分，该部分存在于组件中，其自身的路径位于url上：
<Helmet>
<title>{"Digital card of " + this.state.card.Name}</title>
<meta name="title" content={"Digital card of " + this.state.card.Name} />
<meta name="description" content="Description for the react-helmet section" />
<meta property="og:title" content={"Digital card of " + this.state.card.Name} />
<meta property="og:image" content="http://m.digital-card.co.il/friedman/249/images/icon.png" />
<meta property="og:description" content="Description for the react-helmet section" />
<meta property="og:url" content={"https://bucard.co.il/digitalCard/" + this.state.card.ShortID} />
</Helmet>
现在，这里的问题是唯一替换此处的标签是标签，但没有<meta>标签被替换</strong>。</p>
<p>我没有服务器端渲染，我有服务器端（node.js）和返回一些值的json的函数，这些值是我在react应用程序中渲染的。</p>
<p>我搜索了将近2个星期，但仍无法解决，这对我的项目非常重要。
试图将<code>data-react-helmet=true</code>置于不同的情况，但仍然无法正常工作。</p>
<p>有人可以帮我解决这个问题吗？非常感谢：）</p>
</div>
<div class="answer-list">
<h4>2 个答案:</h4>
<div class="hr-line-dashed"></div>
<p>答案 0 :(得分：1)</p>
<div class="answer markdown-body">
<p>我遇到了同样的问题。并如下解决。</p>
<p>在您的服务器文件（比如 server/index.js）中，添加
在 ReactDOMServer.renderToString 之后 consthelm = Helmet.renderStatic()。我的代码看起来像：</p>
<pre><code>onCreated</code></pre>
<p> 并添加以下函数。这是为了更新带有头盔标签的 html 内容。</p>
<pre><code>onRendered</code></pre>
<p>这可能对你有帮助:)</p>
</div>
<div class="hr-line-dashed"></div>
<p>答案 1 :(得分：0)</p>
<div class="answer markdown-body">
<p>对于没有SSR（服务器端呈现）的SPA，从机器人的角度来看，您的head标签位于dist / public文件夹中的static index.html文件中。要添加将动态元素从head标签投放到bot的功能，您可以：</p>
<ul>
<li>使用预渲染服务</li>
<li>或者使用next.js在服务器上呈现页面（或页面的一部分），以便机器人可以对此进行爬网</li>
<li>查看SSR的其他解决方案</li>
</ul>
<p>您可以阅读-<a href="https://github.com/nfl/react-helmet/issues/489" rel="nofollow noreferrer">https://github.com/nfl/react-helmet/issues/489</a> </p>
<p>一种对我有用的方法：</p>
<ol>
<li> <p>将流量定向到节点服务器</p>
</li>
<li> <p>运行一个节点服务器，该服务器返回index.html文件并传递头标记。</p>
<pre><code>return res.render('index', {
headTags: ReactDOMServer.renderToStaticMarkup(tags),
})
</code></pre>
</li>
</ol>
<p>在这里，标签是由元，标题等元素组成的数组。您可以在前端使用相同的代码来获取<strong>头盔</strong>的头部标签。</p>
<ol start =“ 3”>
<li> <p>在index.html中，您可以使用车把读取从节点服务器传递来的head标签并在head部分中打印head标签。</p>
<pre><code><head>
{{{
headTags
}}}
...
</head>
</code></pre>
</li>
</ol>
<p>并且要使用车把作为引擎，请将其添加到您的节点服务器</p>
<p> <code>app.engine('html', handlebars.engine);</code> </p>
</div>
</div>
</div>
<div class="right">
<div style="height:400px">
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-6263610230477973" data-ad-slot="2820756182"
data-ad-format="auto" data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div style="height:20px"></div>
<div class="releated-question-wrapper">
<div class="header">
相关问题
</div>
<div class="hr-line-dashed"></div>
<ul>
<li>
<a href="/q/44073960">单元测试反应头盔代码</a>
</li>
<li>
<a href="/q/48209375">从反应头盔站点获取Open Graph元标记</a>
</li>
<li>
<a href="/q/52690820">反应头盔的目的是什么？</a>
</li>
<li>
<a href="/q/54070913">SSR中不会覆盖头盔元标记</a>
</li>
<li>
<a href="/q/56355643">反应头盔未更新元标题标签</a>
</li>
<li>
<a href="/q/60467530">反应头盔在视图页面源中未显示元标记，但在检查元素中显示</a>
</li>
<li>
<a href="/q/61873505">反应传单更新标记</a>
</li>
<li>
<a href="/q/62965054">反应<头盔>不更新元</a>
</li>
<li>
<a href="/q/63161102">反应，标记maxTag不更新</a>
</li>
<li>
<a href="/q/64184706">反应头盔不更新元标记</a>
</li>
</ul>
</div>
<div class="releated-question-wrapper">
<div class="header">
最新问题
</div>
<div class="hr-line-dashed"></div>
<ul>
<li>
<a href="/q/68614764">我写了这段代码，但我无法理解我的错误</a>
</li>
<li>
<a href="/q/68614678">我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？</a>
</li>
<li>
<a href="/q/68614175">是否有可能使 loadstring 不可能等于打印？卢阿</a>
</li>
<li>
<a href="/q/68614313">java中的random.expovariate()</a>
</li>
<li>
<a href="/q/68614125">Appscript 通过会议在 Google 日历中发送电子邮件和创建活动</a>
</li>
<li>
<a href="/q/68615109">为什么我的 Onclick 箭头功能在 React 中不起作用？</a>
</li>
<li>
<a href="/q/68615123">在此代码中是否有使用“this”的替代方法？</a>
</li>
<li>
<a href="/q/68614097">在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化</a>
</li>
<li>
<a href="/q/68614427">每千个数字得到</a>
</li>
<li>
<a href="/q/68615239">更新了城市边界 KML 文件的来源？</a>
</li>
</ul>
</div>
<div class="">
</div>
</div>
</div>
<div>
<script>
var host = window.location.host;
if (host == "www.thinbug.com") {
(function () {
var bp = document.createElement('script');
var curProtocol = window.location.protocol.split(':')[0];
if (curProtocol === 'https') {
bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
}
else {
bp.src = 'http://push.zhanzhang.baidu.com/push.js';
}
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(bp, s);
})();
}
</script>
</body>
</html>