SEO & MetaManager


If you’ve read the Controller lifecycle page you’ve probably come along the setMetaParams method. This method is dedicated to set meta information for a specific page and you are provided with everything you need (current state, MetaManager, router, dictionary and settings).

MetaManager is then used in DocumentView to set <title/>, <meta/> and <link/> tags.

Setting and obtaining information from the MetaManager

Meta manager offers many methods to work with document meta data, we’re going to describe each one in few following sections.

Managing document title - setTitle(), getTitle()

Sets the page title…

// app/page/order/OrderController.js

setMetaParams(loadedResources, metaManager, router, dictionary, settings) {
  const { order } = loadedResources;
  const title = `Order #${order.id} - ${settings.general.appTitle}`
  metaManager.setTitle(title);
}

…and displays it.

// app/component/document/DocumentView.jsx

render() {
  return (
    <html>
      <head>
        <title>{this.props.metaManager.getTitle()}</title>
      </head>
      <body>
        {/* ... */}
      </body>
    </html>
  );
}

Configuring meta tags - setMetaName(), getMetaName(), getMetaNames()

Sets the information to be used in <meta name="..." content="..."/>.

// app/page/BaseController.js

setMetaParams(loadedResources, metaManager, router, dictionary, settings) {
  metaManager.setMetaName(
    'description', 
    'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
  );
}
// app/component/document/DocumentView.jsx

<meta name="description" content={this.props.metaManager.getMetaName('description')} />

The name attribute of the <meta/> tag should match the 1st argument of the setMetaName() method otherwise the contents won’t be updated.

Configuring meta properties - setMetaProperty(), getMetaProperty(), setMetaProperties()

These methods are similar to the two above except that these are used for <meta property="..." content="..."/>.

// app/page/ArticleController.js

setMetaParams(loadedResources, metaManager, router, dictionary, settings) {
  const { article } = loadedResources;
  metaManager.setMetaProperty('og:image', article.thumbnailUrl);
}
// app/component/document/DocumentView.jsx

<meta property="og:image" content={this.props.metaManager.getMetaProperty('og:image')} />

Again, the property attribute of the <meta> tag should match the 1st argument of the setMetaProperty() method otherwise the contents won’t be updated.

Adds information to the MetaManager to be later used in <link rel="..." href="..." /> tag.

// app/page/order/OrderController.js

setMetaParams(loadedResources, metaManager, router, dictionary, settings) {
  const { order } = loadedResources;
  const orderDetailLink = router.link('order-detail', {
    orderId: order.id,
    sortItems: null // doesn't have to be here, just explicitly null-ing query params
  });

  metaManager.setLink('canonical', orderDetailLink);
}
// app/component/document/DocumentView.jsx

<link rel="canonical" href={this.props.metaManager.getLink('canonical')} />

Automatically displaying all information

If you don’t want to bother with displaying each <meta/> or <link/> tag separately use the getMetaNames(), getMetaProperties() and getLinks() methods.

// app/component/document/DocumentView.jsx`

// in the beginning of render() method
const { metaManager } = this.props;

// ...
<head>
  {metaManager.getMetaNames().map(name => (
    <meta key={name} name={name} content={metaManager.getMetaName(name)} />
  ))}
  {metaManager.getMetaProperties().map(property => (
    <meta key={property} property={property} content={metaManager.getMetaProperty(property)} />
  ))}
  {metaManager.getLinks().map(relation => (
    <link key={relation} rel={relation} href={metaManager.getLink(relation)} />
  ))}
</head>