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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. (for example, setting the <title> of a Product Detail Page in a ProductDetails component) or create dedicated Frontastic componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code. 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 componentsFrontastic components - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code., 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 componentFrontastic component - A customizable building block that's used together with other components to create a commerce site. Known as `tastic` for short in code..


Did this page help you?