2021-07-20
2045
#create react app#react
Angelo Faella
59116
Jul 20, 2021 ⋅ 7 min read

Adding dynamic meta tags to a React app without SSR

Angelo Faella Software engineer who loves to create things and solve problems.

Recent posts:

next js environmental variables

How to configure Next.js environmental variables

Learn how to manage environment variables in Next.js, which influence how an application behaves in different contexts and environments.

Joseph Mawa
Apr 25, 2025 ⋅ 9 min read
useActionState in React

useActionState in React: A practical guide with examples

Discover how React’s useActionState Hook makes it easier to handle user actions, especially form submissions and async state changes.

Rishi Purwar
Apr 25, 2025 ⋅ 5 min read
three js vs babylon js

Three.js vs. Babylon.js: Which is better for 3D web development?

Compare two libraries that support creating 3D experiences in the browser. Learn how to get started with each, their core features, and key differences.

Elijah Asaolu
Apr 24, 2025 ⋅ 7 min read
how to use the Next.js Image component to optimize images

How to use the Next.js Image component to optimize images

Explore automatic image optimization using Next Image, the built-in image optimization solution for Next.js.

Adebiyi Adedotun
Apr 23, 2025 ⋅ 7 min read
View all posts

23 Replies to "Adding dynamic meta tags to a React app without SSR"

      1. Hi, there is no SSR here. The React app renders totally on the client side, it is just served by a Node/Express backend that makes some changes to the static part of the HTML page.

        1. react-helmet does not solve the SEO and social problems as the crawlers and social servers do not execute the react scripts so you do not get the dynamic meta tags.

    1. Great question, Andrew! While it might seem counterintuitive, the article demonstrates a way to set up dynamic metadata tags without full-fledged server-side rendering (SSR). By using a lightweight Node/Express server, you can inject metadata dynamically into the section before serving the page. This approach is particularly useful for React-based projects, including mobile app development platforms, where traditional SSR might not be feasible. It’s a smart workaround to improve SEO while maintaining app performance. Hope this clarifies!

    1. Hi, unfortunately a Node/Express app can’t be served from an S3 bucket. You have to use an EC2 instance or other solutions to host Node applications.

  1. I am hosting my app on heroku , uploaded build and server folder but met-tags not updating when i am opening posts page as you did.
    Yes it is working when i am trying on local and using ngrok for public and then pasting that url in https://www.heymeta.com/ i am getting meta-tags with updated data

    Please explain is there anything which should be done to host this application

    1. Hi, during development you can work on on the app by running “npm start” as you usually do on a React app, no build needed. If you want to test meta-tags, yes you have to create a build.

    1. Yes, My react router is not working now, I think we need to config our webpack to load the actual data after injecting meta tags.

  2. For anyone viewing this in 2024, I encourage you to let go of the outdated method and embrace ‘next.’ The current approach falls far short of being effective.

  3. Anyone can still read the previous solution in 2024, and it continues to work well. However, you now have the opportunity to use Next.js instead. In my project, I previously used the earlier approach, but now I need to achieve the same result using Next.js.

    1. I totally agree. Back then this was a valid solution, now I use Next.js to solve SEO-related problems like this one.

  4. The article “Adding dynamic meta tags to a React app without SSR” provides a practical approach to enhancing SEO in React applications that don’t utilize server-side rendering. By serving the app through a Node/Express backend and injecting dynamic meta tags into the section before sending the response, developers can ensure that web crawlers accurately index their pages. This method is particularly beneficial for applications with multiple routes requiring unique meta information, such as blogs or e-commerce sites. Implementing these strategies can significantly improve search engine visibility and the quality of link previews on social platforms.

Leave a Reply