Search code examples
reactjsseoreact-i18nextreact-helmet

How to make meta tags dynamic depending on the language on the site in React APP? [React Helmet + i18next]

I am developing website with the use of React App (Create React App), react-i18next, React-Helmet. I tested my website on https://freetools.seobility.net/ and it told me that I don't have meta tags for title and description, however, I do have them. I can see these tags in browser, but the seoBot - couldn't. What about other search engine bots?

enter image description here

This is my index.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon/logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>

  </body>
</html>

This part of my JSON file:

{
  "meta": {
    "title": "Frequently asked questions",
    "description": "Find answers to frequently asked questions",
  }
}

This the code:

const [translation] = useTranslation("assortment");

 return (
        <div className={styles.page}>
            <MetaTags
                title={translation('meta.title')}
                description={translation('meta.description')}
            />
)


//<MetaTags> file

return (
       <Helmet>
            <meta charSet="utf-8" />
            <title>{title}</title>
            <meta name="description" content={description}/>
            {noIndex && <meta name="robots" content="noindex" />}
        </Helmet>
    );

Should I be worried that Googlebot or other search engines bot wouldn't fully load my page and would see my meta tags? What should I do?

Solution

  • You should use the right crawling mode, to ensure Seobility SEO Checker has JavaScript execution enabled.

    Here you find the right setting:

    SEO Check Crawling mode

    If you want to make sure that Google and other bots do not have problems rendering your page with JavaScript, think about server side pre rendering for bots.