Question 214556 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – React Helmet for multiple pages

My client wanted a React website but he wants each pages’ meta title and description “to be custom written so that when someone types in the company name, the sub tabs under home say About, Contact, etc with their own description”.

I’m finding little documentation and/or examples of using React Helmet with multiple pages. I have a Home.jsx file, About.jsx, etc. How would I get each page to have specific metadata with Helmet?

Thank you for any info!

I haven’t tried because I can’t see any documentation of my issue

Tags:

3

Answers


  1. 0

    If I understood correctly, I think a headless website would be a good approach for your case.

    There are various ways to implement that, but using headless CMS like Contentful, Prismic, or Sanity, etc. is recommended.

    Once you choose a headless CMS, then you can fetch the data from it using your favorite JavaScript Server-side rendering frameworks such as Next.js, Gatsby, Nuxt.js, or whatever through GraphQL queries.

    If React Helmet is required, then you can choose a React-based framework like Gatsby or Next.js.

    You can separate the workspaces based on the companies and then use the variables in your environment separately.

    Initially, you need to have a custom React Helmet component that can be used globally.

    You can import that component in your initial layout as a HOC and pass static props or similar ones to that component.

    Login or Signup to reply.
  2. 0

    If your question is about changing document.title and meta tags, all react-helmet really does is look at its children components, map those to objects, then update the DOM (it’s a little more complex, but that’s the idea). So on non-root views, you would do something like this:

    const About = () => (
  <div>
    <Helmet>
      <title>About</title>
      <meta name="description" content="I am an about page" />
    </Helmet>
    {/* other About page content here */}
  </div>
)

    Of course you could pull those strings in from config or wherever if you need to.

    The problem you’ll face though is what’s actually rendered in the HTML (for SEO) — for that, you’ll need server-side rendering. You can use the server-side usage of react-helmet, or pass a variable to the view engine or templating or whatever (depending on how the server is set up, assuming there is a server). If you’re strictly serving static files (like from an S3 bucket), you’ll need to look into prerendering.

    If your question is about building out menus based on user (client) provided data later on, you absolutely will need a server, and maybe a CMS.

    Login or Signup to reply.
  3. 0

    install react-helmet-async

    wrap App component inside tag

    will be imported into any page component where you want to implement the meta tags

    Learning React Helmet!

    …and other meta tag implementations.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search