4

I tried the react-helmet.I used React router and I want to change the title when route changes. With react-helmet I was able to change the title in the tab and console but sadly not in the source. I want to change the title in the source code also as it is very important for seo. In /public/index.html

<title>My Title</title>
<meta name="description" content="This is main page"/>

In src/app.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import {Helmet} from "react-helmet";
import Home from './Components/Pages/Home/';

function App() {
  return (
   <Router>
    <Helmet>
         <meta charset="utf-8" />
   <title>My title</title>
   <meta name="description" content="This is main page" />
        </Helmet>
      <Switch>
        <Route path="/home">
          <Home></Home>
        </Route>
        </Switch>
        </Router>
        );
        }
        export default App;
In Home.js 

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

function Home() {
  return (
  <div>
           <Helmet>
         <meta charset="utf-8" />
   <title>Home Title</title>
   <meta name="description" content="This is home page" />
        </Helmet>

  </div>
  );};
Subreena
  • 158
  • 1
  • 1
  • 10

5 Answers5

2

If you're looking for SEO, then create-react-app is not the solution here. Even if you share your page on social media, it won't show the metadata. You have to do server-side rendering for that. To read about server side rendering, do check here

https://medium.com/@yudhajitadhikary/client-side-rendering-vs-server-side-rendering-in-react-js-next-js-b74b909c7c51

Prateek Thapa
  • 4,829
  • 1
  • 9
  • 23
1

Use React helmet to change your website title description. It also helps with SEO. https://www.npmjs.com/package/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>My Title</title>
                <link rel="canonical" href="http://example.com" />
            </Helmet>
            ...
        </div>
    );
  }
};
MD. Sani Mia
  • 272
  • 1
  • 7
  • As I mentioned earlier. I have added react helmet to the website. The title changes in the tab and console but not in the source code. And the source code is important for seo. So can you tell me how can I change the title in the sourcecode also? – Subreena Sep 22 '20 at 17:16
  • Read the question again, to give an answer. @RS Sani – Muntasir Aonik Sep 22 '20 at 17:45
  • @Subreena I am pretty sure Google handles JavaScript-modified titles properly for SEO purposes/ – Constantin Feb 02 '21 at 18:10
0

You can change the title simply by doing document.title = '...'.

I put this in a useEffect for every top level component.

Google and Bing evaluate JS so will give no SEO disadvantage for setting the title in JS. However, other search engines might.

mousetail
  • 7,009
  • 4
  • 25
  • 45
0

you should use context in react ( useContext hook ) and in every page you will going to set that title in variable named pageTitle of something which is declared in your app context finally you can use helmet package and place it in your title tag.

milad jamali
  • 11
  • 1
0
import React from "react";
 
class Application extends React.Component {
   state={
   title:"dynamic title"
  }
  componentDidMount(){
    document.title = this.state.title
  }
  render () {
    return (
        <div className="homePage"></div>
    );
  }
}
Huseyinekh
  • 1
  • 1