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:

You're doing vibe coding wrong: Here's how to do it right. A LogRocket article

You’re doing vibe coding wrong: Here’s how to do it right

Vibe coding isn’t just AI-assisted chaos. Here’s how to avoid insecure, unreadable code and turn your “vibes” into real developer productivity.

Chizaram Ken
Oct 28, 2025 ⋅ 11 min read

Exploring spec-driven development with the new GitHub Spec Kit

GitHub SpecKit brings structure to AI-assisted coding with a spec-driven workflow. Learn how to build a consistent, React-based project guided by clear specs and plans.

Emmanuel John
Oct 28, 2025 ⋅ 7 min read

The different ways to use CSS :has(), with examples

The CSS :has() pseudo-class is a powerful new feature that lets you style parents, siblings, and more – writing cleaner, more dynamic CSS with less JavaScript.

Daniel Schwarz
Oct 24, 2025 ⋅ 7 min read

Kombai AI: The AI agent built for frontend development

Kombai AI converts Figma designs into clean, responsive frontend code. It helps developers build production-ready UIs faster while keeping design accuracy and code quality intact.

Jude Miracle
Oct 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

Would you be interested in joining LogRocket's developer community?

Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.

Sign up now