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

时间:2016-08-19 07:46:46

标签: reactjs meta-tags

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

请参阅我的要求图片,

code screenshot

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

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

6 个答案:

答案 0 :(得分:5)

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

  1. 元标记在头部,但您的反应组件将在您的body标签中呈现。
  2. 考虑到搜索引擎优化部分,谷歌现在可以解析JS,所以你的标签会被阅读但是如果你认为雅虎仍然不能做到这一点(谷歌也真的不那么高效,面对太多关于处理搜索引擎优化的问题页面应用程序)
  3. 如果您的反应组件使用Link导航到我假设的其他组件,那么它就不会起作用,因为抓取工具会尝试直接与您联系。
  4. 现在,如果您有一个包含单个组件的单页应用,您可以尝试react-helmet ,但如果涉及多个组件和导航,我建议您进行预渲染,也许使用phatom-js或pre-render.io(间接使用phantomjs)。

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

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

答案 1 :(得分: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/

答案 2 :(得分:2)

**无需安装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>
    )
}

答案 3 :(得分:0)

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

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

答案 4 :(得分:0)

有一个名为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

答案 5 :(得分:0)

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

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

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

我希望这会有所帮助!