-
Notifications
You must be signed in to change notification settings - Fork 3
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.
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>
);
}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')} />Note: The
nameattribute of the<meta/>tag should match the 1st argument of thesetMetaName()method otherwise the contents won't be updated.
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')} />Note: Again, the
propertyattribute of the<meta>tag should match the 1st argument of thesetMetaProperty()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')} />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>- Introduction
- Static view
- Adding some state
- Fetching the data from the server
- Writing posts
- Final polish