diff --git a/package.json b/package.json
index 96fb4722fe..4cf12f5781 100644
--- a/package.json
+++ b/package.json
@@ -165,7 +165,6 @@
     "react-copy-to-clipboard": "^5.0.1",
     "react-dnd": "^9.0.0",
     "react-dnd-html5-backend": "^9.0.0",
-    "react-document-title": "^2.0.3",
     "react-dom": "^16.5.2",
     "react-github-button": "^0.1.11",
     "react-helmet": "^6.0.0-beta",
diff --git a/site/theme/index.js b/site/theme/index.js
index 42772133c6..a29637bd90 100644
--- a/site/theme/index.js
+++ b/site/theme/index.js
@@ -51,16 +51,6 @@ module.exports = {
     'bisheng-plugin-antd?injectProvider',
     'bisheng-plugin-react?lang=__react',
   ],
-  postProcessHtml: ($, pathname) => {
-    let description = '';
-    if (pathname !== '/') {
-      const desc = $('section.markdown p').text() || '';
-      description = desc.length > 50 ? `${desc.slice(0, 50)}...` : desc;
-    }
-    return {
-      description: description || '',
-    };
-  },
   routes: {
     path: '/',
     component: './template/Layout/index',
diff --git a/site/theme/template/Content/ComponentDoc.jsx b/site/theme/template/Content/ComponentDoc.jsx
index cb7c8d7897..d54df103dd 100644
--- a/site/theme/template/Content/ComponentDoc.jsx
+++ b/site/theme/template/Content/ComponentDoc.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import DocumentTitle from 'react-document-title';
+import { Helmet } from 'react-helmet';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import classNames from 'classnames';
 import { Row, Col, Icon, Affix, Tooltip } from 'antd';
@@ -106,66 +106,68 @@ class ComponentDoc extends React.Component {
     const articleClassName = classNames({
       'show-riddle-button': showRiddleButton,
     });
+    const helmetTitle = `${subtitle || ''} ${title[locale] || title} - Ant Design`;
     return (
-      <DocumentTitle title={`${subtitle || ''} ${title[locale] || title} - Ant Design`}>
-        <article className={articleClassName}>
-          <Affix className="toc-affix" offsetTop={16}>
-            <ul id="demo-toc" className="toc">
-              {jumper}
-            </ul>
-          </Affix>
-          <section className="markdown">
-            <h1>
-              {title[locale] || title}
-              {!subtitle ? null : <span className="subtitle">{subtitle}</span>}
-              <EditButton
-                title={<FormattedMessage id="app.content.edit-page" />}
-                filename={filename}
-              />
-            </h1>
-            {utils.toReactComponent(
-              ['section', { className: 'markdown' }].concat(getChildren(content)),
-            )}
-            <h2>
-              <FormattedMessage id="app.component.examples" />
-              <Tooltip
-                title={
-                  <FormattedMessage
-                    id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`}
-                  />
-                }
-              >
-                <Icon
-                  type={`${expandAll ? 'appstore' : 'appstore-o'}`}
-                  className={expandTriggerClass}
-                  onClick={this.handleExpandToggle}
+      <article className={articleClassName}>
+        <Helmet>
+          <title>{helmetTitle}</title>
+        </Helmet>
+        <Affix className="toc-affix" offsetTop={16}>
+          <ul id="demo-toc" className="toc">
+            {jumper}
+          </ul>
+        </Affix>
+        <section className="markdown">
+          <h1>
+            {title[locale] || title}
+            {!subtitle ? null : <span className="subtitle">{subtitle}</span>}
+            <EditButton
+              title={<FormattedMessage id="app.content.edit-page" />}
+              filename={filename}
+            />
+          </h1>
+          {utils.toReactComponent(
+            ['section', { className: 'markdown' }].concat(getChildren(content)),
+          )}
+          <h2>
+            <FormattedMessage id="app.component.examples" />
+            <Tooltip
+              title={
+                <FormattedMessage
+                  id={`app.component.examples.${expandAll ? 'collapse' : 'expand'}`}
                 />
-              </Tooltip>
-            </h2>
-          </section>
-          <Row gutter={16}>
-            <Col
-              span={isSingleCol ? 24 : 12}
-              className={isSingleCol ? 'code-boxes-col-1-1' : 'code-boxes-col-2-1'}
+              }
             >
-              {leftChildren}
+              <Icon
+                type={`${expandAll ? 'appstore' : 'appstore-o'}`}
+                className={expandTriggerClass}
+                onClick={this.handleExpandToggle}
+              />
+            </Tooltip>
+          </h2>
+        </section>
+        <Row gutter={16}>
+          <Col
+            span={isSingleCol ? 24 : 12}
+            className={isSingleCol ? 'code-boxes-col-1-1' : 'code-boxes-col-2-1'}
+          >
+            {leftChildren}
+          </Col>
+          {isSingleCol ? null : (
+            <Col className="code-boxes-col-2-1" span={12}>
+              {rightChildren}
             </Col>
-            {isSingleCol ? null : (
-              <Col className="code-boxes-col-2-1" span={12}>
-                {rightChildren}
-              </Col>
-            )}
-          </Row>
-          {utils.toReactComponent(
-            [
-              'section',
-              {
-                className: 'markdown api-container',
-              },
-            ].concat(getChildren(doc.api || ['placeholder'])),
           )}
-        </article>
-      </DocumentTitle>
+        </Row>
+        {utils.toReactComponent(
+          [
+            'section',
+            {
+              className: 'markdown api-container',
+            },
+          ].concat(getChildren(doc.api || ['placeholder'])),
+        )}
+      </article>
     );
   }
 }
diff --git a/site/theme/template/Home/index.jsx b/site/theme/template/Home/index.jsx
index 7b5124638e..114f5c126f 100644
--- a/site/theme/template/Home/index.jsx
+++ b/site/theme/template/Home/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { injectIntl } from 'react-intl';
-import DocumentTitle from 'react-document-title';
+import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
 import Banner from './Banner';
 import Page1 from './Page1';
@@ -69,16 +69,17 @@ class Home extends React.Component {
     const { isMobile } = this.context;
     const childProps = { ...this.props, isMobile, locale: intl.locale };
     return (
-      <DocumentTitle title={`Ant Design - ${intl.formatMessage({ id: 'app.home.slogan' })}`}>
-        <>
-          <style dangerouslySetInnerHTML={{ __html: getStyle() }} /> {/* eslint-disable-line */}
-          <Banner {...childProps} />
-          <Page1 {...childProps} />
-          <Page2 {...childProps} />
-          <Page3 {...childProps} />
-          <Footer />
-        </>
-      </DocumentTitle>
+      <>
+        <style dangerouslySetInnerHTML={{ __html: getStyle() }} /> {/* eslint-disable-line */}
+        <Helmet>
+          <title>{`Ant Design - ${intl.formatMessage({ id: 'app.home.slogan' })}`}</title>
+        </Helmet>
+        <Banner {...childProps} />
+        <Page1 {...childProps} />
+        <Page2 {...childProps} />
+        <Page3 {...childProps} />
+        <Footer />
+      </>
     );
   }
 }