What is react-helmet?

nfl/react-helmet — explained in plain English

Analysis updated 2026-06-24

★ 17,478JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((react-helmet))
    What it does
      Manages HTML head
      From React components
    Supported tags
      title
      meta tags
      link tags
      script tags
    Features
      Nested override
      titleTemplate
      SSR support
      onChangeClientState
    Use Cases
      SEO per page
      Social previews
      Analytics scripts
    Stack
      JavaScript
      React

mindmap root((react-helmet)) What it does Manages HTML head From React components Supported tags title meta tags link tags script tags Features Nested override titleTemplate SSR support onChangeClientState Use Cases SEO per page Social previews Analytics scripts Stack JavaScript React

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Set unique page titles and meta descriptions for each route in a React app so search engines index them correctly.

USE CASE 2

Add Open Graph and Twitter card meta tags dynamically from React components for rich social media link previews.

USE CASE 3

Inject page-specific scripts or schema markup into the HTML head during server-side rendering for SEO and analytics.

What is it built with?

JavaScriptReactnpm

How does it compare?

	nfl/react-helmet	foundry376/mailspring	facebookarchive/flux
Stars	17,478	17,475	17,469
Language	JavaScript	JavaScript	JavaScript
Setup difficulty	easy	moderate	easy
Complexity	2/5	4/5	3/5
Audience	developer	general	developer

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

So what is it?

React Helmet is a reusable React component that manages everything that goes into the document head of an HTML page. The document head is the part of a web page (the section bounded by <head> tags) that holds things like the page title, description tags for search engines and social previews, links to icons or stylesheets, and analytics or schema scripts. React Helmet lets you write those tags inside your React components as if they were normal HTML, and it takes care of putting them in the right place in the final document. The usage is intentionally simple. You import the Helmet component and place plain head tags inside it: a title, meta tags, link tags, script tags, base tag, noscript or style tags. If several components on the same page each provide their own Helmet, nested or later ones override duplicate entries, so a child page can replace the title and description set by a parent. Optional props include a titleTemplate for adding a site-wide suffix to titles, a defaultTitle fallback, a defer flag for how quickly updates apply, and an onChangeClientState callback for tracking DOM changes. It also supports server-side rendering: after calling React's renderToString on the server, you call Helmet.renderStatic() to extract the head data and inject it into the prerendered HTML, which matters for search engine indexing and social link previews. Someone would use this when building a React application that needs per-page titles, meta tags, or SEO-relevant head content. The tech stack is JavaScript and React, installed via npm or yarn.

Copy-paste prompts

Prompt 1

Using React Helmet, write a reusable SEO component that accepts title and description props and renders the correct meta tags for Google search and Twitter cards.

Prompt 2

I am using React Helmet with server-side rendering. Show me how to call Helmet.renderStatic() on the server and inject the result into the HTML template string.

Prompt 3

My React app has a parent layout that sets a default title. How do I use React Helmet in a child page component to override just the title without losing the parent's other meta tags?

Prompt 4

Write a React Helmet setup that uses titleTemplate so every page title automatically has my site name appended, with a defaultTitle as a fallback.

Frequently asked questions