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:

Using Llama Index To Add Personal Data To Large Language Models

Using LlamaIndex to add personal data to LLMs

LlamaIndex provides tools for ingesting, processing, and implementing complex query workflows that combine data access with LLM prompting.

Ukeje Goodness
Jul 23, 2024 ⋅ 5 min read
JavaScript logo on top of violet background

Exploring essential DOM methods for frontend development

Learn four groups of DOM methods and their uses to create responsive and dynamic webpages. A helpful DOM reference table is also included.

Chimezie Innocent
Jul 23, 2024 ⋅ 12 min read
Playwright Adoption Guide: Overview, Examples, And Alternatives

Playwright adoption guide: Overview, examples, and alternatives

Playwright has become one of the leading technologies for writing end-to-end tests for modern web apps thanks to its rich and intuitive API.

Antonello Zanini
Jul 22, 2024 ⋅ 15 min read
Exploring The Javascript Registry For Javascript Module Management

Exploring JSR for JavaScript module management

JSR is designed to serve as a registry for both JavaScript and TypeScript packages, and an upgrade to the features provided by npm.

Oyinkansola Awosan
Jul 19, 2024 ⋅ 8 min read
View all posts

19 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. 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.

Leave a Reply