diff --git a/package.json b/package.json
index 94985bfc2c..3038af73ac 100644
--- a/package.json
+++ b/package.json
@@ -166,6 +166,7 @@
     "react-document-title": "^2.0.3",
     "react-dom": "^16.5.2",
     "react-github-button": "^0.1.11",
+    "react-helmet": "^6.0.0-beta",
     "react-highlight-words": "^0.16.0",
     "react-infinite-scroller": "^1.2.4",
     "react-intl": "^3.1.1",
diff --git a/site/theme/template/Layout/index.jsx b/site/theme/template/Layout/index.jsx
index fca7694c2c..aacc648ce4 100644
--- a/site/theme/template/Layout/index.jsx
+++ b/site/theme/template/Layout/index.jsx
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import PropTypes from 'prop-types';
 import { enquireScreen } from 'enquire-js';
 import { IntlProvider } from 'react-intl';
+import { Helmet } from 'react-helmet';
 import 'moment/locale/zh-cn';
 import { ConfigProvider } from 'antd';
 import LogRocket from 'logrocket';
@@ -110,18 +111,19 @@ export default class Layout extends React.Component {
     const { children, ...restProps } = this.props;
     const { appLocale } = this.state;
     return (
-      <IntlProvider
-        locale={appLocale.locale}
-        messages={appLocale.messages}
-        defaultLocale="en-US"
-      >
-        <ConfigProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
-          <div className="page-wrapper">
-            <Header {...restProps} />
-            {children}
-          </div>
-        </ConfigProvider>
-      </IntlProvider>
+      <>
+        <Helmet>
+          <html lang={appLocale.locale === 'zh-CN' ? 'zh' : 'en'} />
+        </Helmet>
+        <IntlProvider locale={appLocale.locale} messages={appLocale.messages} defaultLocale="en-US">
+          <ConfigProvider locale={appLocale.locale === 'zh-CN' ? zhCN : null}>
+            <div className="page-wrapper">
+              <Header {...restProps} />
+              {children}
+            </div>
+          </ConfigProvider>
+        </IntlProvider>
+      </>
     );
   }
 }
