This website is a work in progress.

Handle pages meta (HTML <head>)

Handle pages meta (HTML <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:

import Head from "react-helmet";
import {
} from "@phenomic/preset-react-app/lib/client";
// ...
const Home = ({ isLoading, posts }) => (
      <title>Hello world</title>
      <meta name="description" content="Everything is awesome!" />
    {!isLoading && <ul>{/* ... */}</ul>}
// ...
const BlogPost = ({ isLoading, page }) => (
    {isLoading && "Loading..."}
    {!isLoading &&
      page.node && (
              content={textRenderer(page.node.body).slice(0, 150) + ""}
    <footer>{/* ... */}</footer>

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
export default ({ App, render }) => {
  // 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 } = render(<App />);
  const helmet = Head.renderStatic();
  return (
    <html {...helmet.htmlAttributes.toComponent()}>
        <Style />
      <body {...helmet.bodyAttributes.toComponent()}>
        <Main />
        <State />
        <Script />

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.

Continue tutorial