reactjs React Helmet未更新 meta标记

hl0ma9xz 于 2023-01-12 发布在 React

关注(0)|答案(3)|浏览(145)

我有我的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-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>

现在，这里的问题是这里唯一替换的标记是标记，但是没有任何标记被替换。
我没有服务器端渲染，我有服务器端（node.js）和返回一些值的json的函数，我在react应用程序中渲染。
我找了将近两个星期，但是仍然不能解决这个问题，这对我的项目非常重要。我也试过把data-react-helmet=true放在不同的情况下，但是仍然不起作用。
有没有人能帮我弄清楚这一点？非常感谢：）

reactjs

来源：https://stackoverflow.com/questions/64184706/react-helmet-not-updating-meta-tags

3条答案

按热度按时间

7gcisfzg1#

对于不带SSR（服务器端呈现）的SPA，从机器人的Angular 来看，head标记位于dist/public文件夹中的静态index.html文件中。要添加从head标记向机器人提供动态元素的功能，您可以：

使用预渲染服务
或者使用next.js在服务器上呈现页面（或页面的一部分），以便机器人可以抓取它
寻找其他SSR解决方案

您可能会看到-https://github.com/nfl/react-helmet/issues/489
一种对我有效的方法：
1.将流量定向到节点服务器
1.从这个节点服务器返回您的index.html文件并传递head标记。

return res.render('index', {
  headTags: ReactDOMServer.renderToStaticMarkup(tags),
})

这里，tags是一个HTML元素数组，如<meta/>, <title/>等。
额外的好处：你可以在前端导入相同的tags模块来获得Helmet的head标签。
1.在index.html中，您可以使用handlebar读取从节点服务器传递过来的head标记，并在head部分打印head标记。

<head>

  {{{
    headTags
  }}}
  ...
</head>

要使用handlebar作为引擎，请将其添加到节点服务器
app.engine('html', handlebars.engine);

赞(0）回复(0）举报 2023-01-12

xzabzqsa2#

我遇到了同样的问题。并解决了它如下。
在服务器文件（比如server/index.js）中，在ReactDOMServer. renderToString之后添加const helmet = Helmet.renderStatic（）。

const app = ReactDOMServer.renderToString(<App />);

const helmet = Helmet.renderStatic()
const indexFile = path.resolve('./build/index.html');
  fs.readFile(indexFile, 'utf8', (err, data) => {
     let updated = data.replace('<div id="root"></div>', `<div id="root">${app}</div>`);
     return res.send(updateHtmlContent(updated, helmet));
  }

并增加如下函数，用 Helm 标签更新html内容。

function updateHtmlContent(app, helmet) {
      return `
        <!DOCTYPE html>
        <html lang="en">
          <head>
            ${helmet.title.toString()}
            ${helmet.meta.toString()}
          </head>
          <body>
            <div id="root">
              ${app}
            </div>
          </body>
        </html>
      `
    }

这可能会帮助您：）

赞(0）回复(0）举报 2023-01-12

epggiuax3#

要使用React-Helmet meta标签，您应该先在public/index.html中添加meta标签。

<html lang="en">
  <head>
  ...
     <meta
        name="description"
        content="Create personalized beer labels for you or your company; for parties, weddings and more! Do you need stylish, self-designed brands with your own message. Our custom beer or wine labels are durable and waterproof."
     >
     <meta
        name="keywords"
        content="beer label, wine label, cider label, jam label, create your own, order labels online, home brewer, label your beer batches, stickers, label, decal, wine labels, jam labels, word template, free shipping, brewed beer, custom labels"
     >
  ... 
  </head>

它对我起作用了！请确保您在项目的公共文件夹中的index.html上写入 meta标记。

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs React Helmet未更新 meta标记

3条答案

相关问题

热门标签

最新问答