如何在反应中使用动态值的元标记？

Question

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

请参阅图片了解我的要求,

我在这里使用额外的metatag html标签(因为react需要在单个标签内包装完整的html,否则会引发错误).我也可以使用div/p任何html标签,但这是渲染反应组件的正确方法吗？拥有额外的html标签而不是meta标签内部.这对SEO有用吗？

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

Answer 1

如果您从服务器提供 React 包，则可以在服务器上动态生成元标记。

本质上，在您的 public/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" />

然后在服务器上，您想用动态生成的信息替换这些字符串。这是使用 Node 和 Express 的示例路由：

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/

Answer 2

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

1. 元标记在头部,但您的反应组件将在您的body标签中呈现.
2. 考虑到搜索引擎优化部分,谷歌现在可以解析JS,所以你的标签会被阅读但是如果你认为雅虎仍然不能做到这一点(谷歌也真的不那么高效,面对太多关于用单页应用程序处理搜索引擎优化的问题)
3. 如果您的反应组件用于Link导航到我假设的其他组件,那么SPA就不会起作用,因为爬虫会尝试直接访问您的页面.

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

如果您唯一关心的是元标记,那么您可以将元标记直接嵌入到html代码中,而不是嵌入到组件中.这将真正帮助抓取工具查看元标记.

但是,如果您还希望抓取工具看到您的内容,预渲染是我现在能够想到的最佳解决方案.

Answer 3

** 不需要安装 Express Node 和所有..
** 只需添加react-helmat & 必须在所有路由容器中添加 Helmat-meta 标记。（否则它仍然显示主页元标记） ** React返回单个元素，因此您必须添加到父元素中，例如（div，form）

import { Helmet } from "react-helmet";
import MetaDataJSON from "./MetaDataJSON_File"; 

constructor(){
    this.metaDetails = {}; 
}

UNSAFE_componentWillMount(){
    let curPath = window.location.pathname
    this.metaDetails =  getMetaData(curPath);   
}

export const getMetaData = (pathname) =>{
  const metaObj = MetaDataJSON;      // import meta json and check the route path is in equal to your meta json file        
  let metaPath = Object.keys(metaObj);
  if (metaPath.indexOf(pathname) >= 0) {
    return metaObj[pathname]; 
  }else{
    return metaObj["/"]; 
  }
} 

// you must add in all component (where routing container)
render(){ 
    return(
        <div>
            <Helmet>
                <title>{this.metaDetails.title}</title>
                <meta name="description" content= {this.metaDetails.description}/>
                <meta name="keywords" content= {this.metaDetails.keywords} />
            </Helmet>
        <div>
    )
}