Switched from DocumentTitle to the More Robust HelmetJS lib

html.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import DocumentTitle from 'react-document-title'
+import Helmet from "react-helmet"
 import { prefixLink } from 'gatsby-helpers'
 import { GoogleFont, TypographyStyle } from 'react-typography'
 import typography from './utils/typography'
@@ -13,7 +13,7 @@ module.exports = React.createClass({
   },
   render () {
     const { body } = this.props
-    const title = DocumentTitle.rewind()
+    const head = Helmet.rewind();
 
     let css
     if (process.env.NODE_ENV === 'production') {
@@ -29,7 +29,8 @@ module.exports = React.createClass({
             name="viewport"
             content="width=device-width, initial-scale=1.0"
           />
-          <title>{title}</title>
+          {head.title.toComponent()}
+          {head.meta.toComponent()}
           <TypographyStyle typography={typography} />
           <GoogleFont typography={typography} />
           {css}

package.json

@@ -10,7 +10,7 @@
     "gatsby": "^0.12.6",
     "lodash": "^4.15.0",
     "moment": "^2.14.1",
-    "react-document-title": "^2.0.2",
+    "react-helmet": "^3.1.0",
     "react-responsive-grid": "^0.3.3",
     "react-typography": "^0.12.0",
     "safe-access": "^0.1.0",

pages/index.js

@@ -1,9 +1,9 @@
 import React from 'react'
 import { Link } from 'react-router'
 import sortBy from 'lodash/sortBy'
-import DocumentTitle from 'react-document-title'
 import { prefixLink } from 'gatsby-helpers'
 import { rhythm } from 'utils/typography'
+import Helmet from "react-helmet"
 import access from 'safe-access'
 import { config } from 'config'
 import include from 'underscore.string/include'
@@ -32,14 +32,19 @@ class BlogIndex extends React.Component {
       }
     })
     return (
-      <DocumentTitle title={config.blogTitle}>
+      <div>
-        <div>
+        <Helmet
-          <Bio />
+          title={config.blogTitle}
-          <ul>
+          meta={[
-            {pageLinks}
+            {"name": "description", "content": "Sample blog"},
-          </ul>
+            {"name": "keywords", "content": "blog, articles"},
-        </div>
+          ]}
-      </DocumentTitle>
+        />
+        <Bio />
+        <ul>
+          {pageLinks}
+        </ul>
+      </div>
     )
   }
 }

wrappers/md.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import moment from 'moment'
-import DocumentTitle from 'react-document-title'
+import Helmet from "react-helmet"
 import ReadNext from '../components/ReadNext'
 import { rhythm } from 'utils/typography'
 import { config } from 'config'
@@ -14,27 +14,28 @@ class MarkdownWrapper extends React.Component {
     const post = route.page.data
 
     return (
-      <DocumentTitle title={`${post.title} | ${config.blogTitle}`}>
+      <div className="markdown">
-        <div className="markdown">
+        <Helmet
-          <h1 style={{marginTop: 0}}>{post.title}</h1>
+          title={`${post.title} | ${config.blogTitle}`}
-          <div dangerouslySetInnerHTML={{ __html: post.body }} />
+        />
-          <em
+        <h1 style={{marginTop: 0}}>{post.title}</h1>
-            style={{
+        <div dangerouslySetInnerHTML={{ __html: post.body }} />
-              display: 'block',
+        <em
-              marginBottom: rhythm(2),
+          style={{
-            }}
+            display: 'block',
-          >
+            marginBottom: rhythm(2),
-            Posted {moment(post.date).format('MMMM D, YYYY')}
+          }}
-          </em>
+        >
-          <hr
+          Posted {moment(post.date).format('MMMM D, YYYY')}
-            style={{
+        </em>
-              marginBottom: rhythm(2),
+        <hr
-            }}
+          style={{
-          />
+            marginBottom: rhythm(2),
-          <ReadNext post={post} pages={route.pages} />
+          }}
-          <Bio />
+        />
-        </div>
+        <ReadNext post={post} pages={route.pages} />
-      </DocumentTitle>
+        <Bio />
+      </div>
     )
   }
 }