Manipulating HTML head

📘
This is an article for advanced users of Frontastic.

We use the React-Helmet library to allow changes in the HTML <head> element to help improve SEO. This allows you to overwrite most of the header information from anywhere in the React component tree. The trick is that information from deeper down the tree takes precedence over information that was set on higher levels.

Frontastic sets default metadata like <title>, <description> and <meta name="keywords"> on level of the <Node> wrapper component. You can overwrite any of this information in a Frontastic component using the corresponding helmet tags. You can find some common examples below and please use the React-Helmet documentation for further reference.

You can perform React-Helmet operations in any usual Frontastic component (for example, setting the <title> of a Product Detail Page in a ProductDetails component) or create dedicated Frontastic components that don't display anything but only change <head> tags (for example, having a canonical link rendered for each page in a CanonicalLink Frontastic component). For the latter category of Frontastic components, it's recommended to add them to a Frontastic component group that's added to every affected page (for example, Header or Footer component group).

<title/>

To render a <title> tag, simply wrap it in the <Helmet> component:

<Helmet>
    <title>{this.generateProductTitle(productInfo)}</title>
</Helmet>

You can specify an additional titleTemplate on the <Helmet> tag which is then used subsequently to pre- or suffix the title text.

<meta/>

Using the very same mechanism you can render an arbitrary <meta> tag on the page:

<Helmet>
	  <meta name='description' content={this.description} />
    <meta property="og:description" content={this.description} />
</Helmet>

React-Helmet will automatically detect duplicate <meta> tags and have them overwritten by deepest nested React components. So the <meta name=description> generated by Frontastic on the page folder-level would be replaced by the above example from within any Frontastic component.