Question

有人可以帮我解决如何在反应中使用动态值的元标记吗？

请参阅我的要求图片，

code screenshot

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

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

Answer 1

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

元标记在头部，但您的反应组件将在您的body标签中呈现。
考虑到搜索引擎优化部分，谷歌现在可以解析JS，所以你的标签会被阅读但是如果你认为雅虎仍然不能做到这一点（谷歌也真的不那么高效，面对太多关于处理搜索引擎优化的问题页面应用程序）
如果您的反应组件使用Link导航到我假设的其他组件，那么它就不会起作用，因为抓取工具会尝试直接与您联系。

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

如果您唯一关注的是元标记，那么您可以将元标记直接嵌入到html代码中，不在元素中。这确实有助于抓取工具查看元标记。

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

Answer 2

如果从服务器提供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 3

**无需安装Express Node和所有节点。
**仅添加react-helmat并必须在所有路由容器中添加Helmat-meta标签。（否则，它仍显示主页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>
    )
}

Answer 4

在您的反应应用程序中启用服务器端渲染时，可以使用react-document-meta npm模块实现这一点

请阅读此博客以获取更多信息 - https://samvikshana.weebly.com/blog/dynamic-meta-tags-in-react-components

Answer 5

有一个名为React-Helmet的软件包，可帮助您控制每条路线上的Your Head标签。头盔采用纯HTML标记并输出纯HTML标记。简直太简单了，而且对React初学者也很友好。

<Helmet>
     <title>{context.StoreName}</title>
     <meta name="theme-color" content={`${context.ThemeColor}`}/>
</Helmet>

参考-https://codeburst.io/how-to-control-head-tags-in-react-seo-friendly-8264e1194880

Answer 6

Create React App创建带有HTML，JS和CSS的静态包。它不可能为您提供动态的<meta>标记，因为结果HTML是提前创建的。

使用类似React Helmet之类的方法更改document.title是有意义的，但是除非您的应用是由服务器呈现的，否则更改<meta>标签是没有意义的。服务器渲染不是Create React App所支持的功能，因此，如果要使用它，则可能需要查看Next.js之类的替代方法。

也就是说，如果您不希望完全呈现服务器，而只需要更改<meta>标签，则可以按照此处所述手动进行操作。

我希望这会有所帮助！

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

6 个答案: