This article enables you to add the meta tags dynamically from your react component. Meta tags are very significant in many cases, for example when we want to define the preview of react pages on social sites like Facebook or Twitter then we need to add og (open graph) meta tags.
Following example shows how to add these og meta tags dynamically when using server side rendering.
This is achieved by using npm module react-document-meta.
Following example shows how to add these og meta tags dynamically when using server side rendering.
This is achieved by using npm module react-document-meta.
Install npm module
Index.ejs
As shown above, Index.ejs is one html root page in which all the react components are rendered
<%-reactMetaComponent-%> This is the place holder for dynamic meta tags which are pushed from server side renderer.
Following are React Component and Server Side Request Handler code snippets
This line of code in RequestHandler.js is very important which replaces meta tags on client side when server side rendering is enabled
const reactMetaComponent = DocumentMeta.renderToStaticMarkup();
<%-reactMetaComponent-%> This is the place holder for dynamic meta tags which are pushed from server side renderer.
Following are React Component and Server Side Request Handler code snippets
This line of code in RequestHandler.js is very important which replaces meta tags on client side when server side rendering is enabled
const reactMetaComponent = DocumentMeta.renderToStaticMarkup();
MyOgComponent.js
RequestHandler.js - This is the server side request handler which enables Server Side Rendering