I'm creating a full ReactJS app (without Next.JS so it's full Client Side Rendering) and I'm facing some issues (or at least questions) about SEO and dynamic meta tag.
The base of ReactJS is to inject HTML inside a root element included in one HTML Page index.html.
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="My Description"/>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
When using library like react-helmet, the metadata are copied after the first rendering of the page. So when somone is visiting my web page, he should see new metas.
<meta name="description" content="My NEW Description"/>
But, Google, Facebook, Twitter will not work that way I suppose. The "My NEW Description" will only be seen if all the script is run.
I think they just look at the initial index.html.. This is also confirm when we use Open Graph checker, they only see the initial meta tags.
So my question is basically:
- Does
react-helmetreally helps for SEO - Does Google are waiting for script execution ?
- Except Next.JS, what are our possibility for dynamic meta tags in SPA ?
ReactJS is massively used so I guess Google figures a way to index these websites.
For a pretty long time google registers all client-side renders including changing meta-tags with React-helmet. You can check your website in https://search.google.com/search-console/about and make sure all titles are being displayed normally