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

问题描述：

任何人都可以帮助我有关如何使用meta标签动态值在反应JS？如何在动态js中使用具有动态值的元标记？

请参阅图像我的要求，

code screenshot

我在这里使用额外的元标记HTML标签（因为反应需要换其他的单个标签它引发错误内完整的HTML）。我也可以使用div/p任何html标签，但这是正确的方式来呈现反应组件？有额外的HTML标签，而不是在meta标签中。这将工作的搜索引擎优化？

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

答

我可以看到有关您分享的代码的几个问题。

元标签在头部，但您的反应组件将呈现在您的身体标记。
考虑到SEO部分，谷歌现在可以解析JS，所以你的标签会被阅读，但如果你认为雅虎仍然不能仍然这样做（谷歌也真的不是那么高效，面对太多关于处理SEO与单页面应用程序）
如果您的反应组件使用Link导航到其他组件，我假设它会出现SPA的情况，因为抓取工具尝试直接联系您的页面，所以无法正常工作。现在

，如果你有一个单一组分的单页的应用程序，你可以尝试react-helmet，但如果涉及多个组件和导航，我建议你去预渲染，也许使用phatom-JS或预-render.io（它间接使用phantomjs）。

如果您唯一关心的是元标记，那么您可以将meta标记直接嵌入到您的html代码中，而不是中的组件。这确实有助于抓取工具查看元标记。但是，如果您还希望抓取工具查看您的内容，则预渲染是我现在可以考虑的最佳解决方案。

答

这可以使用反应文档的元NPM模块时，在启动服务器端渲染来实现你的反应程序

阅读这篇博客的更多信息 - https://samvikshana.weebly.com/blog/dynamic-meta-tags-in-react-components

答

如果您服务您从一个阵营捆绑服务器，您可以在服务器上动态生成元标记。

从本质上讲，你的公共/ index.html文件，你想用一个可识别的字符串替换元数据：

<!-- in public/index.html --> 
<title>$OG_TITLE</title> 
<meta name="description"  content="$OG_DESCRIPTION" /> 
<meta property="og:title"  content="$OG_TITLE" /> 
<meta property="og:description" content="$OG_DESCRIPTION" /> 
<meta property="og:image"  content="$OG_IMAGE" />

然后在服务器上，要替换这些字符串与动态生成的信息。下面是与节点和快递为例路线：

app.get('/about', function(request, response) { 
    console.log('About page visited!'); 
    const filePath = path.resolve(__dirname, './build', 'index.html') 
    fs.readFile(filePath, 'utf8', function (err,data) { 
    if (err) { 
     return console.log(err); 
    } 
    data = data.replace(/\$OG_TITLE/g, 'About Page'); 
    data = data.replace(/\$OG_DESCRIPTION/g, "About page description"); 
    result = data.replace(/\$OG_IMAGE/g, 'https://i.imgur.com/V7irMl8.png'); 
    response.send(result); 
    }); 
});

从本教程在这里拍摄：https://www.kapwing.com/blog/how-to-add-dynamic-meta-tags-server-side-with-create-react-app/

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

相关推荐