React Helmet

Every developer aspires that his website should appear at the top of the search results pages in a browser. Unfortunately, there are certain instances where the search engine crawler cannot prove to be reliable. This problem occurs because of the inability of the browser to render JavaScript. This means that SPA build on the React or Angular platform cannot favor the search engine crawlers. This is one of the most significant issues the developers face to bring their pages to the top of the webpage. So, to solve the problem, Server Side Rendering may be used, but it generally has limitations to adapt. This is where React Helmet comes to the rescue.

What is React Helmet?

React Helmet can be termed as the document head manager for React-based applications. Using it, it becomes very easy for developers to update meta tags present on the server-side and the client-side. This library can be termed perfect for applications where SEO plays a crucial role. It is also a media-friendly library with different dependencies and features that make its usage easy in any React app. We will study all the aspects in this tutorial and see how you can add React Helmet into your project.

Setup

Before moving any further, we need to install React Helmet using the traditional and most effective npm approach. We will first initialize a new React project using some commands and start the development process when the server is ready.

To install and initialize React Helmet, follow the below command.

Ensure that the system port 3000 is occupied, and then you can get straightforward head over to http://localhost:3000 and see your app.

Newly Created React App

We might have known that, like most SPAs available, our application will have a default <head> element. This can be easily verified if we move to the browser for inspection and press F12 in Chrome or use Ctrl+Shift+C in the Firefox browser. Analyzing the content on Chrome, we might see what the <head> element looks like.

  <head>      <meta charset=”utf-8″>      <link rel=”icon” href=”..//favicon.ico”>      <meta name=”viewport” content=”width=device-width, initial-scale=1″>      <meta name=”theme-color” content=”#000000″>      <meta name=”description” content=”Web site created using create-react-app”>      <link rel=”apple-touch-icon” href=”..//logo192.png”>        <link rel=”manifest” href=”..//manifest.json”>        <title>React App</title>    <style type=”text/css”>     <!– CSS –>    </style>  </head>  

There’s another way to manage the <head>. This is done by updating the public/index.html directory but should not always be an alternative since it is a bad practice. After this step, we need to install and make use of React Helmet in our project.

Installation and Setup

React Helmet can be installed into your React project through Yarn or npm using the command given below.

The next is to follow the process of importing the Helmet component. Once done, we can easily add elements to the <head> of the document. See how the following step is implemented in the below code snippet.

  // src/App.js    import React from “react”;  import “./App.css”;  import { Helmet } from “react-helmet”;    function App() {    return (      <div className=”App”>          <Helmet>          <html lang=”en” />          <title>React Helmet Tutorial</title>          <meta name=”description” content=”Tutorial for React Helmet” />          <meta name=”theme-color” content=”#E6E6FA” />        </Helmet>          <header className=”App-header”>Title will be React Helmet   Tutorial</header>      </div>    );  }  export default App;  

As soon as the above code snippet is updated to the directory src/App.js file, we will notice the changes in our React application.

In this code snippet, to keep the understanding level easy, we have used only <title>, <html> and <meta> tag elements for description and some amount of theme color is also used for the other elements like base, meta, link, script, etc. These elements are generally treated as the children of Helmet. Below is the example where we can see the attributes that have been defined for the body tag and html tag.

   <Helmet>          {/* html attributes */}          <html lang=”en” />            {/* body attributes */}          <body className=”dark” />            {/* title element */}          <title>React Helmet Tutorial</title>            {/* base element */}          <base target=”_blank” href=”https://blog.logrocket.com/” />            {/* meta elements */}          <meta name=”description” content=”Tutorial for React Helmet” />            <meta name=”theme-color” content=”#E6E6FA” />            {/* link elements */}          <link rel=”canonical” href=”https://blog.logrocket.com/” />  </Helmet>    // src/Child.js    import React from “react”;  import { Helmet } from “react-helmet”;  function Child() {    return (      <div>        <Helmet>          <title>Child Component Rocks!</title>        </Helmet>       {”  “}  This time title will be  Child Component Rocks!       </div>    );  }  export default Child;  

Note: There is ambiguity in the above example because we may not know whether the preference would be given to the Child or Parent.

To clarify this, the preference is given to the child component. Consider the below code:

  // src/Child.js    import React from “react”;  import { Helmet } from “react-helmet”;  function Child() {    return (      <div>        <Helmet>          <title>Child Component Rocks!</title>        </Helmet>       {”  “}  This time title will be  Child Component Rocks!       </div>    );  }  export default Child;  

Now, to import the child component, i.e. the Child.js file, to the parent component, i.e. App.js file, we must not forget to change the document’s title according to the child component. But, it is also important to understand that the metadata and the theme color cannot be overwritten. The demonstration for the same is shown in the code snippet given below.

  // src/App.js    import React from “react”;  import “./App.css”;  import { Helmet } from “react-helmet”;  import Child from “./Child”;  function App() {    return (      <div className=”App”>        <Helmet>          <title>React Helmet Tutorial</title>          <meta name=”description” content=”Tutorial for React Helmet” />          <meta name=”theme-color” content=”#E6E6FA” />        </Helmet>          <header className=”App-header”>          Title will not be React Helmet Tutorial <Child />        </header>      </div>    );  }  export default App;  

Another instance to consider here is that the one occurring later will always be given the utmost preference between two child components. For instance, consider two child components <Child1> and <Child2>, then the <Child2> will be given the preference and vice-versa. The demonstration to support this statement is given below.

  // src/App.js  import React from “react”;  import “./App.css”;  import { Helmet } from “react-helmet”;  import Child1 from “./Child1”;  import Child2 from “./Child2″;  function App() {    return (      <div className=”App”>        <Helmet>          <title>React Helmet Tutorial</title>          <meta name=”description” content=”Tutorial for React Helmet” />          <meta name=”theme-color” content=”#E6E6FA” />        </Helmet>        <header className=”App-header”>          Title will not be React Helmet Tutorial             <Child1 />          <Child2 />        </header>      </div>    );  }  export default App;  

It is evident from the above code that the title will be set according to the <Child2> component. If the order is reversed, then the <Child1> will be set to the preference. This can be shown using the code snippet shown below.

   <header className=”App-header”>          Title will not be React Helmet Tutorial           <Child2 />          <Child1 />  </header>  

React Helmet with SSR integration

As we previously discussed, React Helmet is mostly nominated to be the best partner for app rendering residing in the server-side of the application; you can easily refer to the terms by setting up a sample React SSR application. Thus, in the application’s server-side code, just after the ReactDOMServerr’s renderToString or renderToStaticMarkup, we need to apply the method of render static in the Helmet. To illustrate how it is done, consider the below code snippet.

  // server/index.js  import React from “react”;  import { renderToString } from “react-dom/server”;  import express from “express”;  import App from “./src/App”;  import { Helmet } from “react-helmet”;  const app = express();      app.get(“/*”, (req, res) => {    const app = renderToString(<App />);    const helmet = Helmet.renderStatic();      const html = `    <!DOCTYPE html>    <html ${helmet.htmlAttributes.toString()}>      <head>        ${helmet.title.toString()}        ${helmet.meta.toString()}        ${helmet.link.toString()}      </head>      <body ${helmet.bodyAttributes.toString()}>        <div id=”root”>          ${app}        </div>        </body>    </html>  `;      res.send(html);  });  app.listen(8000);  

It is important to understand that in every Helmet property, there is a method of toString(). This method is mainly used inside the HTML string. It is also an instance of Helmet’s render static that generally returns with all the properties covered like the script, link, title, etc., and all of these properties have default toString() method contained in them.

It might not always be a good option to work synchronously to proceed with the React Helmet’s SSR implementation. If we are open or bound to make asynchronous requests like streaming, the React Helmet would lead to potential threats and errors. Hence, to cope up with this issue, we use the react-helmet-async method. This method solves this problem by forking React Helmet explicitly. To install it, we need to run the following terminal command in the node environment.

After running this command, we need to be assured to keep everything except just using HelmetProvider so that the React tree gets encapsulated on both the server-side and the client-side. The simple demonstration for this is shown below.

  // src/App.js  import React from “react”;  import “./App.css”;  import  {Helmet, HelmetProvider } from ‘react-helmet-async’;  function App() {    return (      <HelmetProvider>      <div className=”App”>        <Helmet>          <title>React Helmet Tutorial</title>          <meta name=”description” content=”Tutorial for React Helmet” />          <meta name=”theme-color” content=”#E6E6FA” />        </Helmet>        <header className=”App-header”>          Title will be React Helmet Tutorial         </header>      </div>      </HelmetProvider>    );  }  export default App;  

React Helmet & React Router

React Helmet works great if the application being build uses React Router for routing. One hook associate with it is that we need to use React Helmet with every Router, so the routes remain intact, and this can be demonstrated using the below code snippet.

  // src/App.js  import React from “react”;  import { Helmet } from “react-helmet”;  import { BrowserRouter, Switch, Route, Link } from “react-router-dom”;  import Home from ‘./Home’  import About from ‘./About’  export default function App() {    return (      <div>        <BrowserRouter>          <Switch>            <Route exact path=”/”>              <Home />            </Route>            <Route path=”/about”>              <About />            </Route>          </Switch>        </BrowserRouter>      </div>    );  }  Where Home.js is:    // src/Home.js  import React from “react”;  import { Helmet } from “react-helmet”;  import {  Link } from “react-router-dom”;    const Home = () => (    <div>      <Helmet>        <title>Home</title>      </Helmet>      <h2>Home.</h2>      <Link to=”/about”>About</Link>    </div>  );    export default Home  And About.js is:    // src/About.js  import React from “react”;  import { Helmet } from “react-helmet”;  import {  Link } from “react-router-dom”;    const About = () => (    <div>      <Helmet>        <title>About</title>      </Helmet>      <h2>About.</h2>      <Link to=”/”>Home</Link>    </div>  );  export default About;  

This is how routing is done using React Helmet and React Router, and also, the method can be used as many routes as possible.

Conclusion

In this tutorial, we learned how to install, set up and use React Helmet. React Helmet is a powerful library mainly used as the document head manager that brings our SEO to the top of the web page. It is small and convenient to use, and if the application is built with the intent to remain at the top charts, it outlasts better than any library in its class.

Next TopicInline Style in React

React Helmet

React Helmet

What is React Helmet?

Setup

Newly Created React App

Installation and Setup

Note: There is ambiguity in the above example because we may not know whether the preference would be given to the Child or Parent.

React Helmet with SSR integration

React Helmet & React Router

Conclusion

Some Cryptocurrency Libraries for Python

Download and Installation of SoapUI

You may also like