Skip to main content

SEO & Meta Manager

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.

Configuring links - setLink(), getLink(), getLinks()​

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>