diff --git a/content/strings.yml b/content/strings.yml
new file mode 100644
index 00000000000..cbd84e16b29
--- /dev/null
+++ b/content/strings.yml
@@ -0,0 +1,50 @@
+"Babel could not be loaded": ""
+"This can be caused by an ad blocker. If you're using one, consider adding reactjs.org to the whitelist so the live code examples will work.": ""
+"Loading code example...": ""
+"When you encounter an error, you'll receive a link to this page for that specific error and we'll show you the full error text.": ""
+"The full text of the error you just encountered is:": ""
+"Edit this page": ""
+"We couldn't find what you were looking for.": ""
+"Page Not Found": ""
+"Please contact the owner of the site that linked you to the original URL and let them know their link is broken.": ""
+"Get Started": ""
+"Take the Tutorial": ""
+"A JavaScript library for building user interfaces": ""
+"The React documentation is available in the following languages:": ""
+"In Progress": ""
+"Needs Contributors": ""
+"Don't see your language above?": ""
+"Let us know": ""
+"Contribute": ""
+"Redirecting to Codepen...": ""
+"Not automatically redirecting?": ""
+"All posts ...": ""
+"Recent Posts": ""
+"Previous article": ""
+"Next article": ""
+"Acknowledgements": ""
+"We'd like to thank all of our contributors:": ""
+"In addition, we're grateful to": ""
+"<0>Jeff Barczewski</0> for allowing us to use the <1>react</1> package name on npm.": ""
+"<0>Christopher Aue</0> for letting us use the <1>reactjs.com</1> domain name and the <2>@reactjs</2> username on Twitter.": ""
+"<0>ProjectMoon</0> for letting us use the <1>flux</1> package name on npm.": ""
+"Shane Anderson for allowing us to use the <1>react</1> org on GitHub.": ""
+"<0>Dmitri Voronianski</0> for letting us use the <1>Oceanic Next</1> color scheme on this website.": ""
+"All Posts": ""
+"Versions": ""
+"React Versions": ""
+"A complete release history for React is available <0>on GitHub</0>.": ""
+"Documentation for recent releases can also be found below.": ""
+"See our FAQ for information about <0>our versioning policy and commitment to stability</0>.": ""
+"Changelog": ""
+"Documentation": ""
+"JSX Compiler Service": ""
+"This tool has been removed as JSXTransformer has been deprecated.": ""
+"We recommend using another tool such as <0>the Babel REPL</0>.": ""
+"Code of Conduct": ""
+"Languages": ""
+"Search": ""
+"Search docs": ""
+"titleTemplate": "%s – React"
+"blogTitleTemplate": "%s – React Blog"
+"defaultTitle": ""
\ No newline at end of file
diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js
index 2abb8ad4b2d..474b8d5dc88 100644
--- a/src/components/CodeEditor/CodeEditor.js
+++ b/src/components/CodeEditor/CodeEditor.js
@@ -10,6 +10,7 @@ import Remarkable from 'remarkable';
 import {LiveEditor, LiveProvider} from 'react-live';
 import {colors, media} from 'theme';
 import MetaTitle from 'templates/components/MetaTitle';
+import Translatable from '../Translatable';
 
 // Replace unicode to text for other languages
 const unicodeToText = text =>
@@ -62,12 +63,14 @@ class CodeEditor extends Component {
     if (showBabelErrorMessage) {
       errorMessage = (
         <span>
-          Babel could not be loaded.
+          <Translatable>Babel could not be loaded.</Translatable>
           <br />
           <br />
-          This can be caused by an ad blocker. If you're using one, consider
-          adding reactjs.org to the whitelist so the live code examples will
-          work.
+          <Translatable>
+            This can be caused by an ad blocker. If you're using one, consider
+            adding reactjs.org to the whitelist so the live code examples will
+            work.
+          </Translatable>
         </span>
       );
     } else if (error != null) {
diff --git a/src/components/CodeExample/CodeExample.js b/src/components/CodeExample/CodeExample.js
index bc5d6ed10f8..27f9a563f74 100644
--- a/src/components/CodeExample/CodeExample.js
+++ b/src/components/CodeExample/CodeExample.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 
 import {colors, media} from 'theme';
 import CodeEditor from '../CodeEditor/CodeEditor';
+import Translatable from '../Translatable';
 
 class CodeExample extends Component {
   render() {
@@ -61,7 +62,9 @@ class CodeExample extends Component {
         {loaded ? (
           <CodeEditor code={code} containerNodeID={containerNodeID} />
         ) : (
-          <h4>Loading code example...</h4>
+          <h4>
+            <Translatable>Loading code example...</Translatable>
+          </h4>
         )}
       </div>
     );
diff --git a/src/components/ErrorDecoder/ErrorDecoder.js b/src/components/ErrorDecoder/ErrorDecoder.js
index d179a09be14..d3ca18ee222 100644
--- a/src/components/ErrorDecoder/ErrorDecoder.js
+++ b/src/components/ErrorDecoder/ErrorDecoder.js
@@ -8,6 +8,7 @@
 import React from 'react';
 
 import type {Node} from 'react';
+import Translatable from '../Translatable';
 
 function replaceArgs(msg: string, argList: Array<string>): string {
   let argIdx = 0;
@@ -69,8 +70,10 @@ function ErrorResult(props: {|code: ?string, msg: string|}) {
   if (!code) {
     return (
       <p>
-        When you encounter an error, you'll receive a link to this page for that
-        specific error and we'll show you the full error text.
+        <Translatable>
+          When you encounter an error, you'll receive a link to this page for
+          that specific error and we'll show you the full error text.
+        </Translatable>
       </p>
     );
   }
@@ -78,7 +81,11 @@ function ErrorResult(props: {|code: ?string, msg: string|}) {
   return (
     <div>
       <p>
-        <b>The full text of the error you just encountered is:</b>
+        <b>
+          <Translatable>
+            The full text of the error you just encountered is:
+          </Translatable>
+        </b>
       </p>
       <code>
         <b>{urlify(errorMsg)}</b>
diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js
index a87d33ce86d..173e5187bc1 100644
--- a/src/components/LayoutFooter/Footer.js
+++ b/src/components/LayoutFooter/Footer.js
@@ -19,6 +19,7 @@ import {sectionListCommunity, sectionListDocs} from 'utils/sectionList';
 import navFooter from '../../../content/footerNav.yml';
 
 import ossLogoPng from 'images/oss_logo.png';
+import Translatable from 'components/Translatable';
 
 const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
   <footer
@@ -84,7 +85,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             <MetaTitle onDark={true}>{navFooter.community.title}</MetaTitle>
             <ExternalFooterLink
               href={`https://github.com/facebook/react/blob/master/CODE_OF_CONDUCT.md`}>
-              Code of Conduct
+              <Translatable>Code of Conduct</Translatable>
             </ExternalFooterLink>
             {sectionListCommunity.map(section => (
               <FooterLink
diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js
index f9827fc516b..d6867b058d4 100644
--- a/src/components/LayoutHeader/DocSearch.js
+++ b/src/components/LayoutHeader/DocSearch.js
@@ -6,6 +6,7 @@
  */
 
 import React, {Component} from 'react';
+import {translate} from 'components/Translatable';
 import {colors, media} from 'theme';
 
 type State = {
@@ -97,8 +98,8 @@ class DocSearch extends Component<{}, State> {
           }}
           id="algolia-doc-search"
           type="search"
-          placeholder="Search"
-          aria-label="Search docs"
+          placeholder={translate('Search')}
+          aria-label={translate('Search docs')}
         />
       </form>
     ) : null;
diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js
index f12eb5a719a..c66171d7d7a 100644
--- a/src/components/LayoutHeader/Header.js
+++ b/src/components/LayoutHeader/Header.js
@@ -6,6 +6,7 @@
  */
 
 import Container from 'components/Container';
+import Translatable from 'components/Translatable';
 import HeaderLink from './HeaderLink';
 import {Link} from 'gatsby';
 import React from 'react';
@@ -200,7 +201,7 @@ const Header = ({location}: {location: Location}) => (
                   display: 'none',
                 },
               }}>
-              Languages
+              <Translatable>Languages</Translatable>
             </span>
           </Link>
           <a
diff --git a/src/components/MarkdownPage/MarkdownPage.js b/src/components/MarkdownPage/MarkdownPage.js
index 4e4e082f80d..7a1d2f159d5 100644
--- a/src/components/MarkdownPage/MarkdownPage.js
+++ b/src/components/MarkdownPage/MarkdownPage.js
@@ -18,6 +18,7 @@ import {sharedStyles} from 'theme';
 import createCanonicalUrl from 'utils/createCanonicalUrl';
 
 import type {Node} from 'types';
+import Translatable, {translate} from '../Translatable';
 
 type Props = {
   authors: Array<string>,
@@ -28,7 +29,7 @@ type Props = {
   location: Location,
   markdownRemark: Node,
   sectionList: Array<Object>, // TODO: Add better flow type once we have the Section component
-  titlePostfix: string,
+  titleTemplate?: string,
 };
 
 const getPageById = (sectionList: Array<Object>, templateFile: ?string) => {
@@ -52,7 +53,7 @@ const MarkdownPage = ({
   location,
   markdownRemark,
   sectionList,
-  titlePostfix = '',
+  titleTemplate = translate('titleTemplate', '%s - React'),
 }: Props) => {
   const hasAuthors = authors.length > 0;
   const titlePrefix = markdownRemark.frontmatter.title || '';
@@ -75,7 +76,8 @@ const MarkdownPage = ({
       <TitleAndMetaTags
         ogDescription={ogDescription}
         canonicalUrl={createCanonicalUrl(markdownRemark.fields.slug)}
-        title={`${titlePrefix}${titlePostfix}`}
+        title={titlePrefix}
+        titleTemplate={titleTemplate}
       />
       <div css={{flex: '1 0 auto'}}>
         <Container>
@@ -115,7 +117,7 @@ const MarkdownPage = ({
                       href={`https://github.com/reactjs/reactjs.org/tree/master/${
                         markdownRemark.fields.path
                       }`}>
-                      Edit this page
+                      <Translatable>Edit this page</Translatable>
                     </a>
                   </div>
                 )}
diff --git a/src/components/TitleAndMetaTags/TitleAndMetaTags.js b/src/components/TitleAndMetaTags/TitleAndMetaTags.js
index facc5da7f8c..d1cb2ee6be3 100644
--- a/src/components/TitleAndMetaTags/TitleAndMetaTags.js
+++ b/src/components/TitleAndMetaTags/TitleAndMetaTags.js
@@ -8,15 +8,19 @@
 import Helmet from 'react-helmet';
 import React from 'react';
 import {urlRoot} from 'site-constants';
+import {translate} from '../Translatable';
 // $FlowFixMe This is a valid path
 import languages from '../../../content/languages.yml';
 
-const defaultDescription = 'A JavaScript library for building user interfaces';
+const defaultDescription = translate(
+  'A JavaScript library for building user interfaces',
+);
 
 type Props = {
   title: string,
   ogDescription: string,
   canonicalUrl: string,
+  titleTemplate?: string,
 };
 
 // only provide alternate links to pages in languages where 95-100% of core content has been translated
@@ -45,9 +49,19 @@ const defaultPage = canonicalUrl => {
   return canonicalUrl.replace(urlRoot, 'https://reactjs.org');
 };
 
-const TitleAndMetaTags = ({title, ogDescription, canonicalUrl}: Props) => {
+const TitleAndMetaTags = ({
+  title,
+  titleTemplate = translate('titleTemplate', '%s - React'),
+  ogDescription,
+  canonicalUrl,
+}: Props) => {
   return (
-    <Helmet title={title}>
+    <Helmet
+      title={title}
+      titleTemplate={titleTemplate}
+      defaultTitle={`React - ${translate(
+        'A JavaScript library for building user interfaces',
+      )}`}>
       <meta property="og:title" content={title} />
       <meta property="og:type" content="website" />
       {canonicalUrl && <meta property="og:url" content={canonicalUrl} />}
diff --git a/src/components/Translatable/Translatable.js b/src/components/Translatable/Translatable.js
new file mode 100644
index 00000000000..cfd3abbfd58
--- /dev/null
+++ b/src/components/Translatable/Translatable.js
@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+import {translate} from './translate';
+import type {Node} from 'react';
+import {Children, isValidElement} from 'react';
+
+const translateArray = childArray => {
+  let idx = 0;
+  const cleaned = childArray.map(child => {
+    if (isValidElement(child)) {
+      return `<${idx}>${child.props.children}</${idx++}>`;
+    }
+    return child;
+  });
+
+  const cleanedStr = cleaned.join('');
+  const translatedArray = translate(cleanedStr, cleanedStr).split(
+    /(<[0-9]+>.*?<\/[0-9]>)/gm,
+  );
+
+  const validElements = childArray.filter(isValidElement);
+  return translatedArray.map(tt => {
+    const matches = tt.match(/<([0-9]+)>(.*?)<\/[0-9]>/m);
+    if (matches === null || !Array.isArray(matches)) {
+      return tt;
+    }
+
+    const index: number = parseInt(matches[1], 10);
+
+    const el = validElements[index];
+    return {...el, props: {...el.props, children: matches[2]}};
+  });
+};
+
+const Translatable = ({children}: {children: Node}) => {
+  if (Array.isArray(children)) {
+    return translateArray(Children.toArray(children));
+  } else if (typeof children === 'string') {
+    return translate((children: string), (children: string));
+  }
+
+  return children;
+};
+
+export default Translatable;
diff --git a/src/components/Translatable/index.js b/src/components/Translatable/index.js
new file mode 100644
index 00000000000..df289034b1e
--- /dev/null
+++ b/src/components/Translatable/index.js
@@ -0,0 +1,4 @@
+import Translatable from './Translatable';
+
+export {translate} from './translate';
+export default Translatable;
diff --git a/src/components/Translatable/translate.js b/src/components/Translatable/translate.js
new file mode 100644
index 00000000000..e4c73624154
--- /dev/null
+++ b/src/components/Translatable/translate.js
@@ -0,0 +1,16 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * @emails react-core
+ * @flow
+ */
+
+// $FlowFixMe
+import strings from '../../../content/strings.yml';
+
+export const translate = (text: string, defaultText: string): string => {
+  if (text in strings && strings[text] !== '') {
+    return strings[text];
+  }
+  return defaultText || text;
+};
diff --git a/src/pages/404.js b/src/pages/404.js
index b5977ce621c..e9cfe8d8574 100644
--- a/src/pages/404.js
+++ b/src/pages/404.js
@@ -8,6 +8,7 @@
 import Container from 'components/Container';
 import Header from 'components/Header';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import Translatable, {translate} from 'components/Translatable';
 import Layout from 'components/Layout';
 import React from 'react';
 import {sharedStyles} from 'theme';
@@ -21,13 +22,21 @@ const PageNotFound = ({location}: Props) => (
     <Container>
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
-          <Header>Page Not Found</Header>
-          <TitleAndMetaTags title="React - Page Not Found" />
+          <Header>
+            <Translatable>Page Not Found</Translatable>
+          </Header>
+          <TitleAndMetaTags title={translate('Page Not Found')} />
           <div css={sharedStyles.markdown}>
-            <p>We couldn't find what you were looking for.</p>
             <p>
-              Please contact the owner of the site that linked you to the
-              original URL and let them know their link is broken.
+              <Translatable>
+                We couldn't find what you were looking for.
+              </Translatable>
+            </p>
+            <p>
+              <Translatable>
+                Please contact the owner of the site that linked you to the
+                original URL and let them know their link is broken.
+              </Translatable>
             </p>
           </div>
         </div>
diff --git a/src/pages/acknowledgements.html.js b/src/pages/acknowledgements.html.js
index 7a67b4c2452..d3d68cfbebc 100644
--- a/src/pages/acknowledgements.html.js
+++ b/src/pages/acknowledgements.html.js
@@ -8,6 +8,7 @@ import Layout from 'components/Layout';
 import Container from 'components/Container';
 import Header from 'components/Header';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import Translatable, {translate} from 'components/Translatable';
 import React from 'react';
 import {urlRoot} from 'site-constants';
 import {sharedStyles} from 'theme';
@@ -22,11 +23,15 @@ const Acknowlegements = ({data, location}) => (
           <Header>Acknowledgements</Header>
           <TitleAndMetaTags
             canonicalUrl={`${urlRoot}/acknowledgements.html`}
-            title="React - Acknowledgements"
+            title={translate('Acknowledgements')}
           />
 
           <div css={sharedStyles.markdown}>
-            <p>We'd like to thank all of our contributors:</p>
+            <p>
+              <Translatable>
+                We'd like to thank all of our contributors:
+              </Translatable>
+            </p>
 
             <ul
               css={{
@@ -44,38 +49,52 @@ const Acknowlegements = ({data, location}) => (
               ))}
             </ul>
 
-            <p>In addition, we're grateful to</p>
+            <p>
+              <Translatable>In addition, we're grateful to</Translatable>
+            </p>
             <ul>
               <li>
-                <a href="https://github.com/jeffbski">Jeff Barczewski</a> for
-                allowing us to use the{' '}
-                <a href="https://www.npmjs.com/package/react">react</a> package
-                name on npm.
+                <Translatable>
+                  <a href="https://github.com/jeffbski">Jeff Barczewski</a> for
+                  allowing us to use the{' '}
+                  <a href="https://www.npmjs.com/package/react">react</a>{' '}
+                  package name on npm.
+                </Translatable>
               </li>
               <li>
-                <a href="https://christopheraue.net/">Christopher Aue</a> for
-                letting us use the{' '}
-                <a href="https://reactjs.com/">reactjs.com</a> domain name and
-                the <a href="https://twitter.com/reactjs">@reactjs</a> username
-                on Twitter.
+                <Translatable>
+                  <a href="https://christopheraue.net/">Christopher Aue</a> for
+                  letting us use the{' '}
+                  <a href="https://reactjs.com/">reactjs.com</a> domain name and
+                  the <a href="https://twitter.com/reactjs">@reactjs</a>{' '}
+                  username on Twitter.
+                </Translatable>
               </li>
               <li>
-                <a href="https://github.com/ProjectMoon">ProjectMoon</a> for
-                letting us use the{' '}
-                <a href="https://www.npmjs.com/package/flux">flux</a> package
-                name on npm.
+                <Translatable>
+                  <a href="https://github.com/ProjectMoon">ProjectMoon</a> for
+                  letting us use the{' '}
+                  <a href="https://www.npmjs.com/package/flux">flux</a> package
+                  name on npm.
+                </Translatable>
               </li>
               <li>
-                Shane Anderson for allowing us to use the{' '}
-                <a href="https://github.com/react">react</a> org on GitHub.
+                <Translatable>
+                  Shane Anderson for allowing us to use the{' '}
+                  <a href="https://github.com/react">react</a> org on GitHub.
+                </Translatable>
               </li>
               <li>
-                <a href="https://github.com/voronianski">Dmitri Voronianski</a>{' '}
-                for letting us use the{' '}
-                <a href="https://labs.voronianski.com/oceanic-next-color-scheme/">
-                  Oceanic Next
-                </a>{' '}
-                color scheme on this website.
+                <Translatable>
+                  <a href="https://github.com/voronianski">
+                    Dmitri Voronianski
+                  </a>{' '}
+                  for letting us use the{' '}
+                  <a href="https://labs.voronianski.com/oceanic-next-color-scheme/">
+                    Oceanic Next
+                  </a>{' '}
+                  color scheme on this website.
+                </Translatable>
               </li>
             </ul>
           </div>
diff --git a/src/pages/blog/all.html.js b/src/pages/blog/all.html.js
index 35734b5b1d3..b43477c425d 100644
--- a/src/pages/blog/all.html.js
+++ b/src/pages/blog/all.html.js
@@ -17,6 +17,7 @@ import toCommaSeparatedList from 'utils/toCommaSeparatedList';
 import MetaTitle from 'templates/components/MetaTitle';
 
 import type {allMarkdownRemarkData} from 'types';
+import Translatable, {translate} from '../../components/Translatable';
 
 type Props = {
   data: allMarkdownRemarkData,
@@ -28,10 +29,12 @@ const AllBlogPosts = ({data, location}: Props) => (
     <Container>
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
-          <Header>All Posts</Header>
+          <Header>
+            <Translatable>All Posts</Translatable>
+          </Header>
           <TitleAndMetaTags
             canonicalUrl={`${urlRoot}/blog/all.html`}
-            title="React - All Posts"
+            title={translate('All Posts')}
           />
           <ul
             css={{
diff --git a/src/pages/docs/error-decoder.html.js b/src/pages/docs/error-decoder.html.js
index e51abe51d61..54b98f30214 100644
--- a/src/pages/docs/error-decoder.html.js
+++ b/src/pages/docs/error-decoder.html.js
@@ -52,9 +52,7 @@ const ErrorPage = ({data, location}: Props) => (
               path={data.markdownRemark.fields.path}
               title={data.markdownRemark.frontmatter.title}
             />
-            <TitleAndMetaTags
-              title={`React - ${data.markdownRemark.frontmatter.title}`}
-            />
+            <TitleAndMetaTags title={data.markdownRemark.frontmatter.title} />
 
             <div css={sharedStyles.articleLayout.content}>
               <div
diff --git a/src/pages/index.js b/src/pages/index.js
index b5dd5c1c13e..2a6a68e2a85 100644
--- a/src/pages/index.js
+++ b/src/pages/index.js
@@ -8,6 +8,7 @@ import ButtonLink from 'components/ButtonLink';
 import Container from 'components/Container';
 import Flex from 'components/Flex';
 import CodeExample from 'components/CodeExample';
+import Translatable from 'components/Translatable';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {graphql} from 'gatsby';
@@ -49,10 +50,7 @@ class Home extends Component {
 
     return (
       <Layout location={location}>
-        <TitleAndMetaTags
-          title="React &ndash; A JavaScript library for building user interfaces"
-          canonicalUrl={createCanonicalUrl('/')}
-        />
+        <TitleAndMetaTags canonicalUrl={createCanonicalUrl('/')} />
         <div css={{width: '100%'}}>
           <header
             css={{
@@ -133,7 +131,9 @@ class Home extends Component {
                         fontSize: 30,
                       },
                     }}>
-                    A JavaScript library for building user interfaces
+                    <Translatable>
+                      A JavaScript library for building user interfaces
+                    </Translatable>
                   </p>
                   <Flex
                     valign="center"
@@ -151,12 +151,12 @@ class Home extends Component {
                       <ButtonLink
                         to="/docs/getting-started.html"
                         type="primary">
-                        Get Started
+                        <Translatable>Get Started</Translatable>
                       </ButtonLink>
                     </CtaItem>
                     <CtaItem>
                       <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                        Take the Tutorial
+                        <Translatable>Take the Tutorial</Translatable>
                       </ButtonLink>
                     </CtaItem>
                   </Flex>
@@ -294,12 +294,12 @@ class Home extends Component {
                 }}>
                 <CtaItem>
                   <ButtonLink to="/docs/getting-started.html" type="primary">
-                    Get Started
+                    <Translatable>Get Started</Translatable>
                   </ButtonLink>
                 </CtaItem>
                 <CtaItem>
                   <ButtonLink to="/tutorial/tutorial.html" type="secondary">
-                    Take the Tutorial
+                    <Translatable>Take the Tutorial</Translatable>
                   </ButtonLink>
                 </CtaItem>
               </Flex>
diff --git a/src/pages/jsx-compiler.html.js b/src/pages/jsx-compiler.html.js
index 915d34bb0ee..edb16bda93a 100644
--- a/src/pages/jsx-compiler.html.js
+++ b/src/pages/jsx-compiler.html.js
@@ -11,6 +11,8 @@ import Header from 'components/Header';
 import React from 'react';
 import {sharedStyles} from 'theme';
 
+import Translatable from 'components/Translatable';
+
 type Props = {
   location: Location,
 };
@@ -20,17 +22,23 @@ const JsxCompiler = ({location}: Props) => (
     <Container>
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
-          <Header>JSX Compiler Service</Header>
+          <Header>
+            <Translatable>JSX Compiler Service</Translatable>
+          </Header>
           <div css={sharedStyles.markdown}>
             <p>
               <strong>
-                This tool has been removed as JSXTransformer has been
-                deprecated.
+                <Translatable>
+                  This tool has been removed as JSXTransformer has been
+                  deprecated.
+                </Translatable>
               </strong>
             </p>
             <p>
-              We recommend using another tool such as{' '}
-              <a href="https://babeljs.io/repl/">the Babel REPL</a>.
+              <Translatable>
+                We recommend using another tool such as{' '}
+                <a href="https://babeljs.io/repl/">the Babel REPL</a>.
+              </Translatable>
             </p>
           </div>
         </div>
diff --git a/src/pages/languages.js b/src/pages/languages.js
index f0309a3bb1c..93e3626e788 100644
--- a/src/pages/languages.js
+++ b/src/pages/languages.js
@@ -9,6 +9,7 @@ import Layout from 'components/Layout';
 import Container from 'components/Container';
 import Header from 'components/Header';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import Translatable, {translate} from 'components/Translatable';
 import React from 'react';
 import {urlRoot} from 'site-constants';
 import {media, sharedStyles} from 'theme';
@@ -47,32 +48,40 @@ const Languages = ({location}: Props) => (
     <Container>
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
-          <Header>Languages</Header>
+          <Header>
+            <Translatable>Languages</Translatable>
+          </Header>
           <TitleAndMetaTags
             canonicalUrl={`${urlRoot}/languages/`}
-            title="React - Languages"
+            title={translate('Languages')}
           />
 
           <div css={sharedStyles.markdown}>
             <p>
-              The React documentation is available in the following languages:
+              <Translatable>
+                The React documentation is available in the following languages:
+              </Translatable>
             </p>
 
             <LanguagesGrid languages={complete} />
 
-            <h2>In Progress</h2>
+            <h2>
+              <Translatable>In Progress</Translatable>
+            </h2>
             <LanguagesGrid languages={partial} />
 
-            <h2>Needs Contributors</h2>
+            <h2>
+              <Translatable>Needs Contributors</Translatable>
+            </h2>
             <LanguagesGrid languages={incomplete} />
 
             <p>
-              Don't see your language above?{' '}
+              <Translatable>Don't see your language above?</Translatable>{' '}
               <a
                 href="https://github.com/reactjs/reactjs.org-translation#reactjsorg-translation"
                 target="_blank"
                 rel="noopener">
-                Let us know
+                <Translatable>Let us know</Translatable>
               </a>
               .
             </p>
@@ -157,7 +166,7 @@ const Language = ({code, name, status, translatedName}) => {
           href={`https://github.com/reactjs/${prefix}reactjs.org/`}
           target="_blank"
           rel="noopener">
-          Contribute
+          <Translatable>Contribute</Translatable>
         </a>
       </div>
     </li>
diff --git a/src/pages/versions.js b/src/pages/versions.js
index c4e3532b3d3..af5e94155da 100644
--- a/src/pages/versions.js
+++ b/src/pages/versions.js
@@ -9,6 +9,7 @@ import Layout from 'components/Layout';
 import Container from 'components/Container';
 import Header from 'components/Header';
 import TitleAndMetaTags from 'components/TitleAndMetaTags';
+import Translatable, {translate} from 'components/Translatable';
 import React from 'react';
 import {urlRoot} from 'site-constants';
 import {sharedStyles} from 'theme';
@@ -25,29 +26,38 @@ const Versions = ({location}: Props) => (
     <Container>
       <div css={sharedStyles.articleLayout.container}>
         <div css={sharedStyles.articleLayout.content}>
-          <Header>React Versions</Header>
+          <Header>
+            <Translatable>React Versions</Translatable>
+          </Header>
           <TitleAndMetaTags
             canonicalUrl={`${urlRoot}/versions/`}
-            title="React - Versions"
+            title={translate('Versions')}
           />
           <div css={sharedStyles.markdown}>
             <p>
-              A complete release history for React is available{' '}
-              <a
-                href="https://github.com/facebook/react/releases"
-                target="_blank"
-                rel="noopener">
-                on GitHub
-              </a>
-              .<br />
-              Documentation for recent releases can also be found below.
+              <Translatable>
+                A complete release history for React is available{' '}
+                <a
+                  href="https://github.com/facebook/react/releases"
+                  target="_blank"
+                  rel="noopener">
+                  on GitHub
+                </a>
+                .
+              </Translatable>
+              <br />
+              <Translatable>
+                Documentation for recent releases can also be found below.
+              </Translatable>
             </p>
             <p>
-              See our FAQ for information about{' '}
-              <a href="/docs/faq-versioning.html">
-                our versioning policy and commitment to stability
-              </a>
-              .
+              <Translatable>
+                See our FAQ for information about{' '}
+                <a href="/docs/faq-versioning.html">
+                  our versioning policy and commitment to stability
+                </a>
+                .
+              </Translatable>
             </p>
             {versions.map(version => (
               <div key={version.title}>
@@ -55,13 +65,13 @@ const Versions = ({location}: Props) => (
                 <ul>
                   <li>
                     <a href={version.changelog} target="_blank" rel="noopener">
-                      Changelog
+                      <Translatable>Changelog</Translatable>
                     </a>
                   </li>
                   {version.path && (
                     <li>
                       <a href={version.path} rel="nofollow">
-                        Documentation
+                        <Translatable>Documentation</Translatable>
                       </a>
                     </li>
                   )}
diff --git a/src/templates/blog.js b/src/templates/blog.js
index 57967afcce5..5e35aedcfcd 100644
--- a/src/templates/blog.js
+++ b/src/templates/blog.js
@@ -8,11 +8,12 @@ import React from 'react';
 import {graphql} from 'gatsby';
 import Layout from 'components/Layout';
 import MarkdownPage from 'components/MarkdownPage';
+import {translate} from 'components/Translatable';
 import {createLinkBlog} from 'utils/createLink';
 
 const toSectionList = allMarkdownRemark => [
   {
-    title: 'Recent Posts',
+    title: translate('Recent Posts'),
     items: allMarkdownRemark.edges
       .map(({node}) => ({
         id: node.fields.slug,
@@ -20,7 +21,7 @@ const toSectionList = allMarkdownRemark => [
       }))
       .concat({
         id: '/blog/all.html',
-        title: 'All posts ...',
+        title: translate('All posts ...'),
       }),
   },
 ];
@@ -35,7 +36,7 @@ const Blog = ({data, location}) => (
       ogDescription={data.markdownRemark.excerpt}
       markdownRemark={data.markdownRemark}
       sectionList={toSectionList(data.allMarkdownRemark)}
-      titlePostfix=" &ndash; React Blog"
+      titleTemplate={translate('blogTitleTemplate', '%s - React Blog')}
     />
   </Layout>
 );
diff --git a/src/templates/codepen-example.js b/src/templates/codepen-example.js
index 9b752aee6ca..0e976d128f5 100644
--- a/src/templates/codepen-example.js
+++ b/src/templates/codepen-example.js
@@ -1,6 +1,7 @@
 import React, {Component} from 'react';
 import Container from 'components/Container';
 import Layout from 'components/Layout';
+import Translatable from 'components/Translatable';
 import {colors} from 'theme';
 
 // Copied over styles from ButtonLink for the submit btn
@@ -34,7 +35,9 @@ class CodepenExample extends Component {
     return (
       <Layout location={location}>
         <Container>
-          <h1>Redirecting to Codepen...</h1>
+          <h1>
+            <Translatable>Redirecting to Codepen...</Translatable>
+          </h1>
           <form
             style={{paddingBottom: '50px'}}
             ref={form => {
@@ -45,7 +48,7 @@ class CodepenExample extends Component {
             <input type="hidden" name="data" value={payload} />
 
             <p>
-              Not automatically redirecting?
+              <Translatable>Not automatically redirecting?</Translatable>
               <br />
               <br />
               <input style={primaryStyle} type="submit" value="Click here" />
diff --git a/src/templates/community.js b/src/templates/community.js
index 05f7ca9105f..9123c7b695d 100644
--- a/src/templates/community.js
+++ b/src/templates/community.js
@@ -18,7 +18,6 @@ const Community = ({data, location}) => (
       location={location}
       markdownRemark={data.markdownRemark}
       sectionList={sectionListCommunity}
-      titlePostfix=" &ndash; React"
     />
   </Layout>
 );
diff --git a/src/templates/components/NavigationFooter/NavigationFooter.js b/src/templates/components/NavigationFooter/NavigationFooter.js
index 9ee0e95190f..635c6e33a6c 100644
--- a/src/templates/components/NavigationFooter/NavigationFooter.js
+++ b/src/templates/components/NavigationFooter/NavigationFooter.js
@@ -6,6 +6,7 @@
 
 import Container from 'components/Container';
 import Flex from 'components/Flex';
+import Translatable from 'components/Translatable';
 import {Link} from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
@@ -40,7 +41,9 @@ const NavigationFooter = ({next, prev, location}) => {
           <Flex basis="50%" type="li">
             {prev && (
               <div>
-                <SecondaryLabel>Previous article</SecondaryLabel>
+                <SecondaryLabel>
+                  <Translatable>Previous article</Translatable>
+                </SecondaryLabel>
                 <div
                   css={{
                     paddingTop: 10,
@@ -61,7 +64,9 @@ const NavigationFooter = ({next, prev, location}) => {
                 textAlign: 'right',
               }}>
               <div>
-                <SecondaryLabel>Next article</SecondaryLabel>
+                <SecondaryLabel>
+                  <Translatable>Next article</Translatable>
+                </SecondaryLabel>
                 <div
                   css={{
                     paddingTop: 10,
diff --git a/src/templates/docs.js b/src/templates/docs.js
index b874201d7a0..30ec6d29bf1 100644
--- a/src/templates/docs.js
+++ b/src/templates/docs.js
@@ -19,7 +19,6 @@ const Docs = ({data, location}) => (
       location={location}
       markdownRemark={data.markdownRemark}
       sectionList={sectionListDocs}
-      titlePostfix=" &ndash; React"
     />
   </Layout>
 );
diff --git a/src/templates/tutorial.js b/src/templates/tutorial.js
index 79a4b2c8c02..a90c684e2f5 100644
--- a/src/templates/tutorial.js
+++ b/src/templates/tutorial.js
@@ -20,7 +20,6 @@ const Tutorial = ({data, location}) => {
         location={location}
         markdownRemark={data.markdownRemark}
         sectionList={sectionListTutorial}
-        titlePostfix=" &ndash; React"
       />
     </Layout>
   );