<head>
)The recommended way to manage HTML meta tags (title, description, links, external scripts/styles, facebook & twitter meta...) is to use react-helmet package.
This reusable React component will manage all of your changes to the document head. It takes plain HTML tags and outputs plain HTML tags.
⚠️ You can even define <html>
and <body>
attributes.
First, install react-helmet
npm install --save react-helmet
You can start using react-helmet
directly in any components:
;;// ...const Home =<div><Head><title>Hello world</title><meta name="description" content="Everything is awesome!" /></Head><h1>Home</h1>!isLoading && <ul>/* ... */</ul></div>;// ...const BlogPost =<div>isLoading && "Loading..."!isLoading &&pagenode &&<article><Head><title>pagenodetitle</title><metaname="description"content= + "…"/></Head><h1>pagenodetitle</h1><BodyRenderer>pagenodebody</BodyRenderer></article><footer>/* ... */</footer></div>;
In order to have the injection of meta into your static html files, you will need a custom html template.
⚠️ Default Html
component is very rudimentary and should be adapted if you
care about SEO.
Here is what you need to add if you want to include all react-helmet
output:
// Html.js{// if needed, you can know if you are in development or in static rendering// const isDev = process.env.PHENOMIC_ENV === "development"const Main State Script Style = ;const helmet = Head;return<html ...helmethtmlAttributes><head>helmetmetahelmettitlehelmetbase<Style />helmetlinkhelmetstylehelmetscripthelmetnoscript</head><body ...helmetbodyAttributes><Main /><State /><Script /></body></html>;};
This file Html.js
file should be placed next to App.js
Now your static render should include all meta generated by react-helmet
.
To know more about all the things you can do with react-helmet
, please read
the documentation.