reactjs - 如何在react js中使用具有动态值的元标记？

Question

任何人都可以帮助我了解如何在 React js 中使用具有动态值的元标记吗？

请查看我的要求的图片，

我在这里使用额外的metatag html标签(因为react需要将完整的html包装在单个标签内，否则会引发错误)。我还可以使用 div/p 任何 html 标签，但是这是渲染 React 组件的正确方法吗？具有比元标记内更多的 html 标记。这对 SEO 有用吗？

请建议我任何其他手动使用元标记的好方法。

Answer 1

我发现有关您共享的代码的一些问题。

1. 元标记位于 head 下方，但您的 react 组件将在您的 body 标记中呈现。
2. 考虑到 SEO 部分，谷歌现在可以解析 JS，这样你的标签就会被读取，但是 bing 并且如果你认为雅虎仍然无法做到这一点(谷歌实际上仍然没有那么高效，在使用单一处理 SEO 时面临太多问题页面应用程序)
3. 如果您的 React 组件使用 Link 导航到其他组件(我认为在 SPA 的情况下)，它将无法工作，因为爬虫会尝试直接访问您的页面。

现在，如果您有一个带有单个组件的单页应用程序，您可以尝试 react-helmet ，但如果涉及多个组件和导航，我建议您进行预渲染，也许使用 phatom-js 或 pre-render.io(间接使用 phantomjs)。

如果您唯一关心的是元标记，那么您可以将元标记直接嵌入到 html 代码中，而不是不在组件中。这确实有助于爬虫查看元标记。

但是，如果您也希望爬虫看到您的内容，预渲染是我现在能想到的最佳解决方案。