How to update meta tags in React.js?

后端未结

关注

 9  850

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:48

You can use react-meta-tags. It allows you to write title and other meta tags in a declarative way and in normal jsx format, which will be moved to head (Check server usage on the doc).

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

You may also like to check react-helmet if you have an advanced use case.

0 讨论(0)

北海茫月

2020-12-28 12:58
You almost definitely want to use:

React Helmet

In contrast to react-meta-tags it can nest <Helmet>s and so you can define your meta tags deep within your app - like <title>s that should override each other. And in contrast to react-document-meta you can define things using jsx (and nest things).

This seems to be the solution that the community almost exclusively uses - 600,000 weekly downloads vs the 6,000 given in other solutions. "Helmet takes plain HTML tags and outputs plain HTML tags. It's dead simple, and React beginner friendly." - and has support for server-side rendering.

Here's an example, adapted from the front page:
```
<Parent>
    I'm a parent
    <Helmet>
        <title>My Title</title>
        <meta name="description" content="Helmet application" />
    </Helmet>
 
    <Child>
        I'm a child
        <Helmet>
            <title>Nested Title</title>
            <meta name="description" content="Nested component" />
        </Helmet>
    </Child>
</Parent>
```
outputs:
```
<head>
    <title>Nested Title</title>
    <meta name="description" content="Nested component">
</head>
<Parent>
    I'm a parent
    <Child>
        I'm a child
    </Child>
</Parent>
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

小鲜肉

2020-12-28 12:58

Not sure if this is the answer you were looking for but I was searching for how to update the info your react app shows when you preview the link in some other app. Every solution I tried wasn't working with github pages and react (react-helmet, react-meta-tags, react-document-meta). What ended up working was that you can edit the index.html located inside the public folder to change this info. Include this somewhere in the head:

<!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" />

Example from https://ogp.me/

0 讨论(0)

上一页 1 2

How to update meta tags in React.js?

React Helmet