In this tutorial, you will learn how to easily add page meta-data onto your pages when building a ReactJS application. The worst way to add meta-data onto a page is to write some code within one page and then simply 'copy and paste' that code everywhere you need to use it. Instead, when adding meta-data onto a page we want a nice clean and centralised way to manage updating page meta-data. We want to follow a technique that avoids duplication and ideally, saves us from having to write something from scratch! One great way to achieve this goal is through the use of React Helmet. In this tutorial, you will learn about React helmet, what it is and how you can use it within your application. Sound good?
React Helmet
When it comes to dealing with page meta-data and ReactJS you do not have to re-invent the wheel yourself. There's a package you can download from NPM called 'React Helmet' that is widely used within the React community. I have personally used React Helmet on pretty much every ReactJS project that I have worked on (including enterprise-level e-commerce stores) and I definitely recommend it. React Helmet is a fairly straightforward component. You can install React Helmet via NPM or YARN using this command:
After React helmet is installed, you can start to use it within your application. In the teams that I have worked with, after installing React helmet, we found it beneficial to wrap the JSX required to render the head section of the page within its own component. This goes against how a lot of the online tutorials demonstrate how to use React helmet. Most of the online examples show the JSX written within main app.js file. This approach isn't ideal. In the project's I've worked on, we tend to create a 'MetaTags' component that wraps all the helmet stuff. An example of how a MetaTags component could look is shown below:
After the mark-up in a shared component, you can then simply import it onto any page you require, like so:
Assuming you get this code working and you run the app, after loading the page, if you opened your browser’s elements inspector, the title and meta elements in the head section should be set. If you pass meta-data into the MetaTags component you should see that data rendered on the page. If you don't supply anything then the default values will be used instead. This is a good approach to adopt. Your page will always have some meta-data as long as you import the MetaTags component into your page/template.
Rendering MetaTags On The Server
To get the meta-tag data to render server-side for SSR needs is also possible. This will allow the page meta-data to be indexed by a web crawler. To do this, you can then use React helmets renderStatic() function. There are lots of ways of rendering SSR for your application. For a crude example, I will use ReactDOMServer. he ReactDOMServer object enables you to render components to static markup. It's this static mark-up that a web crawler can index!
That gives you a very quick whistle-stop tour of React helmet. I definitely recommend that you check it out. Happy Coding 🤘
