How to update meta tags in React.js?

后端未结

关注

 9  849

I was working on a single page application in react.js, so what is the best way to update meta tags on page transitions or browser back/forward?

相关标签:

9条回答

渐次进展

2020-12-28 12:33

You can use the document query and update their values.

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)
  }

0 讨论(0)

北荒

2020-12-28 12:36
As create-react-app docs mentioned:

If you need to dynamically update the page title based on the content, you can use the browser document.title API. For more complex scenarios when you want to change the title from React components, you can use React Helmet, a third party library.

A simple example:
```
function App(){
  document.title = "Home";
  return (
   <div>...</div>
  )
}
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

失恋的感觉

2020-12-28 12:37

Firstly if you don't need dynamic data you can just edit public/index.html.

For dynamic data the React team recommends to either use 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>
    );
  }
};

Or using placeholders and replacing them server-side:

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

0 讨论(0)

半阙折子戏

2020-12-28 12:39

According to the official documentation React Doc - Title and Meta Tags, you can also use React Helmet

0 讨论(0)
发布评论:

提交评论
- 加载中...

忘了有多久

2020-12-28 12:40

I've used react-document-meta in an older project.

Just define your meta values

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'
        }
    }

and place a

<DocumentMeta {...meta} />

in the return

0 讨论(0)

一向

2020-12-28 12:42

You cand also give the page title and meta tags description in the following way.

place a meta tag of description in your index.html file like this.

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

in your .js files or .jsx files below the render() method write the page title and meta description for the page like this .

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>
);
}

0 讨论(0)

1 2 下一页