Manipulating HTML head

We use the React-Helmet library to allow changes in the HTML  <head> element by a Tastic Developer. 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 Tastic 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 Tastic (for example, setting the <title> of a Product Detail Page in a ProductDetails Tastic) or create dedicated Tastics which don't display anything but only change <head> tags (for example, having a canonical link rendered for each page in a CanonicalLink Tastic). For the latter category of Tastics, it's recommended to add them to a Kit which is added to every affected page (for example, "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.


‹ Back to article list

Next article ›

Filters, facets, and attributes

Still need help? Contact us Contact us