I have a client-side rendered React site for which I would like to implement the react-helmet-async module (version 1.0.7).
My situation in my React app:
/public/index.js:
<head>
<title>My title in the index file</title>
...
So for some pages I would like to have a different page title.
Attempt:
In contrast to the example the module provides, I don't have an app.js file in my client-side React repository. Therefore, what I did is I added the following to the page for which I would like a unique page title:
import { Helmet, HelmetProvider } from 'react-helmet-async';
render() {
return (
<div data-page="page11">
<HelmetProvider>
<Helmet>
<title>New title</title>
</Helmet>
</HelmetProvider>
... continues with what I already had in the render code block ...
The result: on the web browser's tab, it shows the unique page title when visiting that specific page, and the generic page title for other pages. So that's perfect. **However, when I look at the source code it always contains only the generic page title; also when visiting the specific page. So that's not what I want (I'm implementing the unique page titles for SEO, and crawlers I assume will take the page title from the source code.)
What should I do to properly implement this node module?
Because it is a client-side rendered React app, and not server-side rendered, it is impossible to change the source code. It only changes in the DOM. If you want to change the source code to ensure search engines will properly process the new title, you have no choice but to pre-render / server-side render the React app.
Here a fuller explanation is given: https://github.com/nfl/react-helmet/issues/213