React Helmet Tutorial for React.js & Next.js

React helmet is very powerful library to manage head element of your pages. That is really easy to use and manage document elements. React helmet can be useable for many things most importantly one of the most popular one is SEO for react single page applications.

It is very important for server side rendering applications also. If you want to build multi purpose single page application and change the head elements more often React helmet would be very handy library you would like to use.

There are more information about library from React helmet github page

Basically React helmet takes plain HTML tags and outputs plain HTML tags.

  • Supported head tags: title, base, meta, link, script, noscript, and style.
  • Supports attributes for body, html and title tags.
  • Supports SSR (server-side rendering).
  • Nested components override duplicate head changes.
  • Duplicate head changes are preserved when specified in the same component (support for tags like “apple-touch-icon”).
  • Callback for tracking DOM changes.

Note: If you are planning to use async processes in your application you can have a look react-helmet-async.

// With Yarn:
yarn add react-helmet
// With npm:
npm install --save react-helmet

Let’s change the title for the page in a different component in our application and a canonical URL for our web project.

import React from "react";
import {Helmet} from "react-helmet";

const Application = () => (
<div className="application">
<Helmet>
<meta charSet="utf-8" />
<title>My Title</title>
<link rel="canonical" href="http://mysite.com/example" />
</Helmet>
...
</div>
);

Now you are all set and change your website titles, meta tags regarding to your page for better SEO results.

Now as we install the React-Helmet we can use the library to increase our SEO and performance of our application.

The robots attribute tells search-engines how to handle the page. For example, noindex tells search-engines to not index that page. The nofollow tells search engines to not traverse the links on the page.

1- Changing page title for different routes would increase your SEO results. That has a great impact on the E commerce websites. Think about you are selling multiple products each one of it has different names and you should adapt your webpage in terms of this names.

2- Setting metadata for social media is very important for impressions. When you have a twitter, facebook or linkedin social media cards builded with metadata on your website and want to change on different pages you can do it with React-Helmet.

3- Icons, fonts or maybe some another sources you are using for just specifically one page you might want to add them with react-helmet to reduce the amount of source you want to use in your application. These libraries can increase the loading speed. In this action try to load the sources before the page renders. That will help you not having flickering issues on the icons or fonts.

If you are using the latest version of next.js it is already has next/head library. You can use that library for many things as react-helmet supports.

import Head from 'next/head'

export default function about() {
return (
<div className="container">
<Head>
<title>Create Next App</title>
<link rel="icon" href="/favicon.ico" />
</Head>
...
</div>
)
}
You can buy me a coffee!

Thank you for reading this far.

Follow me on Medium or Github if you’re interested in more in-depth and informative write-ups like these in the future. 😀

Melih

Senior Full Stack Software Engineer — Javascript — Berlin

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store