Crawlers do not see my meta tags created by React Helmet

Question

Crawlers do not see my meta tags created by React Helmet

94 Views Asked by a55le At 23 February 2024 at 15:20

Good afternoon, please tell me what the problem is, I created SEO for my React site using React Helmet, so when I log in to the browser or Devtools, , I see, but if I share a link or check meta tags through services for checking meta tags, then I only see meta tags set in index.js . I've seen a couple of similar problems with other users of the react-helmet library before, what's the problem?

Original Q&A

There are 1 best solutions below

**Kyle Xyian Dilbeck** · Answer 1 · 2024-02-23T16:07:30.550000

This is because you are using react without a framework, on its own React is SPA (single page application) and does client-side rendering. So when crawlers visit the page THEY DO NOT LOAD JAVASCRIPT INITIALLY - Crawlers first run through what is rendered and then if there is time they will attempt to load js. (but if it takes longer than a second or so they will stop crawling and you'll get a bad first paint score as well which highly affects seo ranking)

If you are just using react by itself then it will always just crawl index and potentially will slowly be able to get the other pages but this will also give your site a bad score because it takes longer to load and crawl

SOLUTION:

use SSR (server side rendering) such as next.js....this will completely solve your issueand is recommended by official React documentation because now when bots crawl everything will be pre-rendered allowing them to traverse pages without running javascript..

This is one of the reasons why react docs say that they are no longer supporting npx create-react-app(which creates an app without a framework) and tell you to use a framework like nextjs, gatsby etc...see documentation here: https://react.dev/learn/start-a-new-react-project

plus with frameworks like nextjs you no longer need to use helmet etc and can simply add a _document.js file to the specific page folder

Next.js _document.js example:

// pages/_document.js
import Document, { Html, Head, Main, NextScript } from 'next/document';

class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          <meta charSet="UTF-8" />
          <meta
            name="description"
            content="Your description here"
          />
          {/* Add more meta tags as needed */}
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

IMPORTANT NOTE IF USING A TUTORIAL:

If you are following a tutorial that uses npx create-react-app then scrap your code and look for an up-to-date tutorial. (in regard to next make sure you are only following things that use next 13+...14+ is best but 13 is okay)

Crawlers do not see my meta tags created by React Helmet

There are 1 best solutions below

SOLUTION:

Next.js _document.js example:

IMPORTANT NOTE IF USING A TUTORIAL:

Related Questions in REACTJS

Related Questions in REACT-HELMET

Trending Questions

Popular # Hahtags

Popular Questions