How to Dynamically Change Header Meta Tags for Link Previews using React.js, Node.js on Microsoft Azure

109 Views Asked by At

We need to dynamically change meta tags for some pages on our React.js Node.js app so that link previews show correctly.

We have an app hosted on Microsoft Azure Static Web App for the front end and Microsoft Azure App Service for the back end. So, index.jsx is on the Static Web App server, while the Node.js back end code is on the App Service server.

How would you go about implementing a server-side solution that dynamically changes the meta tags in index.jsx, which is on a different server, so that link previews work correctly for different pages?

For example, this is a great article, but how would you do this in our situation where the front and back ends are on different servers? https://dillionmegida.com/p/how-to-configure-meta-tags-in-react-app-dynamically

1

There are 1 best solutions below

1
On

This is the one you are looking for https://www.npmjs.com/package/react-helmet