Manipulating HTML Head

To allow changes in the HTML <head> element by a Tastic developer we use the react-helmet library. This allows overwriting of most header information from anywhere in the React component tree. It's trick is, that information from deeper down the tree takes precedence over information that was set on higher levels.

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

You can perform react-helmet operations in any usual Tastic (e.g. setting the <title> of a Product Detail Page in a ProductDetails Tastic) or create dedicated Tastics which do not display anything but only change <head> tags (e.g. having a canonical link rendered for each page in a CanonicalLink Tastic). For the latter category of Tastics, it is recommended to add them to a Kit which is added to every affected page (e.g. "Header" or "Footer" kit).

<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 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 Node level would be replaced by the above example from within any Tastic.