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:

Fix over-caching with dynamic IO caching in Next.js 15

Next.js 15 caching overhaul: Fix overcaching with Dynamic IO and the use cache directive.

David Omotayo
Aug 6, 2025 ⋅ 10 min read
LLMs are facing a QA crisis here’s how we could solve it

LLMs are facing a QA crisis: Here’s how we could solve it

LLM QA isn’t just a tooling gap — it’s a fundamental shift in how we think about software reliability.

Rosario De Chiara
Aug 4, 2025 ⋅ 7 min read

Windsurf vs. Cursor: When to choose the challenger

Windsurf AI brings agentic coding and terminal control right into your IDE. We compare it to Cursor, explore its features, and build a real frontend project.

Chizaram Ken
Jul 31, 2025 ⋅ 9 min read

The CSS if() function: Conditional styling will never be the same

The CSS Working Group has approved the if() function for development, a feature that promises to bring true conditional styling directly to our stylesheets.

Ikeh Akinyemi
Jul 30, 2025 ⋅ 12 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