React Helmet

Question

我正在使用react.js中的单页应用程序，那么在页面转换或浏览器后退/前进上更新元标记的最佳方法是什么？

Answer 1

您可以使用react-meta-tags。它允许您以声明方式和正常的jsx格式编写标题和其他元标记，这些格式将被移动到头部（检查文档上的服务器使用情况）。

import React from 'react';
import MetaTags from 'react-meta-tags';

class Component1 extends React.Component {
  render() {
    return (
        <div class="wrapper">
          <MetaTags>
            <title>Page 1</title>
            <meta id="meta-description" name="description" content="Some description." />
            <meta id="og-title" property="og:title" content="MyApp" />
            <meta id="og-image" property="og:image" content="path/to/image.jpg" />
          </MetaTags>
          <div class="content"> Some Content </div>
        </div>
      )
  }
}

如果您有高级用例，也可以查看react-helmet。

Answer 2

我在旧项目中使用了react-document-meta。

只需定义元值

即可

const meta = {
    title: 'Some Meta Title',
    description: 'I am a description, and I can create multiple tags',
    canonical: 'http://example.com/path/to/page',
    meta: {
        charset: 'utf-8',
        name: {
            keywords: 'react,meta,document,html,tags'
        }
    }

并放置

<DocumentMeta {...meta} />

在回报中

Answer 3

您还可以通过以下方式提供页面标题和元标记说明。

在index.html文件中放置描述元标记，如下所示。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<title>Dynamic Page title here</title>

在你的.js文件或render（）方法下面的.jsx文件中，为这样的页面写下页面标题和元描述。

render()
{
document.title ="Welcome | here is your page title to display"; 
document.getElementsByTagName("META")[2].content="Your description about the page or site here to set dynamically";

return(
    <div>Page content</div>
);
}

Answer 4

您可以使用文档查询并更新它们的值。

const setTitle = title => {
    const el = document.querySelector('title');
    el.innerText = `${el.text} | ${title}`;
  };

const setDescription = desc => {
    const el = document.querySelector("meta[name='description']");
    el.setAttribute('content',desc)
  }

Answer 5

根据官方React Doc - Title and Meta Tags，您也可以使用我们的React Helmet

Answer 6

在其他答案和评论中也提到了它，但值得重点介绍-您几乎肯定要使用：

React Helmet

这似乎是社区几乎完全使用的解决方案-每周下载600,000，而其他解决方案提供了6,000。 “头盔采用纯HTML标记并输出纯HTML标记。这简直太简单了，而且对初学者很友好。” -并支持服务器端渲染。

Answer 7

非常好用的React Helmet使用示例：

https://dev.to/guimg/dynamic-document-head-with-react-helmet-28o6

一个简单的想法是，您可以根据动态/内部页面的内容使用<Helmet></Helmet>组件块来更改元标记，例如：

<Helmet>
  <title>Dynamic title with some {variable}</title>
  <meta name="description" content="Dynamic meta description with some {variable}" />
</Helmet>

Answer 8

不确定这是否是您要找的答案，但是我在搜索如何在其他应用程序中预览链接时更新您的react应用程序显示的信息。我尝试过的每个解决方案都无法使用github页面并做出反应（react-helmet，react-meta-tags，react-document-meta）。最终起作用的是，您可以编辑index.html文件夹内的public来更改此信息。将此内容放在头部：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/IMDB.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <title>IMDB</title>
    <meta property="og:audio" content="http://example.com/bond/theme.mp3" />
    <meta property="og:description" 
      content="Sean Connery found fame and fortune as the
               suave, sophisticated British agent, James Bond." />
    <meta property="og:determiner" content="the" />
    <meta property="og:locale" content="en_GB" />
    <meta property="og:locale:alternate" content="fr_FR" />
    <meta property="og:locale:alternate" content="es_ES" />
    <meta property="og:site_name" content="IMDb" />
    <meta property="og:video" content="http://example.com/bond/trailer.swf" />

https://ogp.me/中的示例

Answer 9

首先，如果您不需要动态数据，则只需编辑public/index.html。

对于动态数据，React团队recommends可以使用react-helmet

import React from "react";
import { Helmet } from "react-helmet";

class Application extends React.Component {
  render () {
    return (
        <div className="application">
            <Helmet>
                <meta charSet="utf-8" />
                <title>React app</title>
                <meta name="description" content="React application" />
            </Helmet>
            ...
        </div>
    );
  }
};

或使用占位符并在服务器端替换它们：

<html lang="en">
  <head>
    <meta property="og:title" content="__OG_TITLE__" />
    <meta property="og:description" content="__OG_DESCRIPTION__" />
  </head>
</html>

Answer 10

正如 create-react-app docs 提到的：

<块引用>

如果需要根据内容动态更新页面标题，可以使用浏览器document.title API。对于更复杂的场景，当您想从 React 组件更改标题时，您可以使用第三方库 React Helmet。

一个简单的例子：

function App(){
  document.title = "Home";
  return (
   <div>...</div>
  )
}

如何在React.js中更新元标记？

10 个答案:

React Helmet