我有我的 index.html react项目中的页面如下:
<!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 Helm 部分，它存在于组件中，它的路径在 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> .<br>我没有服务器端渲染，我有服务器端(node.js)和返回一些值的 json 的函数，我在我的 react 应用程序中渲染。<br>我搜索了将近 2 周，但还没有解决这个问题，这对我的项目非常重要。<br>试过也放<code>data-react-helmet=true</code>在不同的情况下，仍然无法正常工作。<br>谁能帮我解决这个问题？非常感谢 :)</p>
</div>
<div style="margin-top: 20px;">
<p>
<strong><font size="5">最佳答案</font></strong>
</p>
</div>
<div id="answer">
<p>对于没有 SSR(服务器端渲染)的 SPA，从机器人的角度来看，您的 head 标签位于 dist/public 文件夹中的静态 index.html 文件中。要添加将动态元素从 head 标签提供给机器人的功能，您可以:<br><li>使用预渲染服务 </li><li>或者，使用 next.js 在服务器上呈现您的页面(或页面的一部分)，以便机器人可以抓取 </li><li>查看 SSR 的其他解决方案 </li><br>您可以阅读 - <a href="https://github.com/nfl/react-helmet/issues/489" rel="noreferrer noopener nofollow">https://github.com/nfl/react-helmet/issues/489</a><br>一种对我有用的方法:<br><li>将您的流量定向到节点服务器<br> </li><li>从此节点服务器返回您的 index.html 文件并传递头标签。<pre><code>return res.render('index', {
headTags: ReactDOMServer.renderToStaticMarkup(tags),
})
</code></pre> </li><br>在这里，<strong>标签 </strong>是一个 HTML 元素数组，例如 <code><meta/>, <title/></code>等等<br>奖励:您可以导入相同的 <strong>标签 </strong>前端模块获取 <strong> 的头部标签 Helm </strong> .<br><li>在您的 index.html 中，您可以使用 Handlebars 读取从节点服务器传递的头标签并在头部分打印头标签。<pre><code><head>
{{{
headTags
}}}
...
</head>
</code></pre> </li><br>并将 Handlebars 用作引擎，请将其添加到您的节点服务器<code>app.engine('html', handlebars.engine);</code></p>
</div>
<div style="margin-top: 20px; margin-bottom: 40px;">
<p style="font-size: 20px;">关于html - React Helmet 不更新元标记，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/64184706/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/64184706/
</a>
</p>
</div>
</div>
<div class="text-center" style="margin-top: 40px;">
<h3 style="font-size: 18px;">
<span>上一篇：<a href="/article/7722317" title="python - SuperCollider 不启动 DotFox">python - SuperCollider 不启动 DotFox</a></span>
</h3>
<h3 style="font-size: 18px;">
<span>下一篇：<a href="/article/7722319" title="c# - 反射仅在 Blazor-State-Management 中的第一次调用时成功">c# - 反射仅在 Blazor-State-Management 中的第一次调用时成功</a></span>
</h3>
</div>
</div>
<div style="width: 100%; margin-top: 30px;">
<p>
<font style="font-size: 20px;"><strong>相关文章：</strong></font>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/7801653" title="html - dcterms.date 表示什么？">html - dcterms.date 表示什么？</a>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/5447454" title="javascript - 通常只执行一次 javascript 的有效方法(通过 cookie)？">javascript - 通常只执行一次 javascript 的有效方法(通过 cookie)？</a>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/2308163" title="javascript - 在不重定向的情况下在 DIV 中加载页面">javascript - 在不重定向的情况下在 DIV 中加载页面</a>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/4635708" title="php - 使用 PHP 格式化从数据库获取的大文本">php - 使用 PHP 格式化从数据库获取的大文本</a>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/5819099" title="javascript - 文本组件给定不同组件中的行数">javascript - 文本组件给定不同组件中的行数</a>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/6767281" title="http-headers - 缓存控制最大年龄元标记未注册">http-headers - 缓存控制最大年龄元标记未注册</a>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/141584" title="android - 视口(viewport)元标记在 iPhone 和 Android 中不起作用">android - 视口(viewport)元标记在 iPhone 和 Android 中不起作用</a>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/4361380" title="html - 如何使 HTML 文本框占满页面宽度">html - 如何使 HTML 文本框占满页面宽度</a>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/8222762" title="javascript - 单击“添加”时动态表单无法正常工作">javascript - 单击“添加”时动态表单无法正常工作</a>
</p>
<p style="margin: 0 auto; margin-top: 5px;">
<a href="/article/7753015" title="reactjs - 如何使用 react 在父事件上调用子方法？">reactjs - 如何使用 react 在父事件上调用子方法？</a>
</p>
</div>
</div>
</div>
<div class="footer text-center" style="float: left; width: 100%; margin-top: 40px;">
<p>
<font color="gray">©2024 </font><a href="/"><font color="gray">IT工具网</font></a>
<a href="/article/7294988" rel="nofollow"><font color="gray">联系我们</font></a>
</p>
</div>
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?d26f2298d3a7fe583e547d2101e22936";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6220481272339728"
crossorigin="anonymous"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/static/js/highlight-10.1.2.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
$("code").each(function(){
var codeHTML = $(this).prop("innerHTML");
var newCodeHTML = codeHTML.replace(new RegExp("</.*>", "g"), "");
newCodeHTML = newCodeHTML.replace(new RegExp("<", "g"), "<");
$(this).html(newCodeHTML);
})
</script>
</body>
</html>