Add SEO metadata

src/app.test.js

@@ -38,7 +38,7 @@ describe('Application', () => {
       '/s': 'Search results for map search',
       '/l/listing-title-slug/1234': 'Loading listing…',
       '/l/1234': 'Loading listing…',
-      '/u/1234': 'Profile page',
+      '/u/1234': ' | Saunatime',
       '/login': 'Log in',
       '/signup': 'Sign up',
       '/recover-password': 'Request a new password',

src/containers/ProfilePage/ProfilePage.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { injectIntl, intlShape, FormattedMessage } from 'react-intl';
 import { compose } from 'redux';
 import { connect } from 'react-redux';
 import classNames from 'classnames';
@@ -22,6 +22,7 @@ import {
 } from '../../components';
 import { TopbarContainer } from '../../containers';
 import { showUser } from './ProfilePage.duck';
+import config from '../../config';
 
 import css from './ProfilePage.css';
 
@@ -35,6 +36,7 @@ export const ProfilePageComponent = props => {
     user,
     userShowInProgress,
     userShowError,
+    intl,
   } = props;
   const ensuredCurrentUser = ensureCurrentUser(currentUser);
   const profileUser = ensureUser(user);
@@ -108,9 +110,27 @@ export const ProfilePageComponent = props => {
     content = mainContent;
   }
 
-  const schemaTitle = 'Profile page';
+  const schemaTitle = intl.formatMessage(
+    {
+      id: 'ProfilePage.schemaTitle',
+    },
+    {
+      name: displayName,
+      siteTitle: config.siteTitle,
+    }
+  );
+
   return (
-    <Page logoutError={logoutError} scrollingDisabled={scrollingDisabled} title={schemaTitle}>
+    <Page
+      logoutError={logoutError}
+      scrollingDisabled={scrollingDisabled}
+      title={schemaTitle}
+      schema={{
+        '@context': 'http://schema.org',
+        '@type': 'ProfilePage',
+        name: schemaTitle,
+      }}
+    >
       <LayoutSideNavigation>
         <LayoutWrapperTopbar>
           <TopbarContainer currentPage="ProfilePage" />
@@ -141,6 +161,9 @@ ProfilePageComponent.propTypes = {
   user: propTypes.user,
   userShowInProgress: bool.isRequired,
   userShowError: propTypes.error,
+
+  // from injectIntl
+  intl: intlShape.isRequired,
 };
 
 const mapStateToProps = state => {
@@ -160,7 +183,7 @@ const mapStateToProps = state => {
   };
 };
 
-const ProfilePage = compose(connect(mapStateToProps))(ProfilePageComponent);
+const ProfilePage = compose(connect(mapStateToProps), injectIntl)(ProfilePageComponent);
 
 ProfilePage.loadData = params => {
   const id = new UUID(params.id);

src/containers/ProfilePage/ProfilePage.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { renderShallow } from '../../util/test-helpers';
-import { createUser } from '../../util/test-data';
+import { createUser, fakeIntl } from '../../util/test-data';
 import { ProfilePageComponent } from './ProfilePage';
 
 const noop = () => null;
@@ -12,6 +12,7 @@ describe('ProfilePage', () => {
         scrollingDisabled={false}
         user={createUser('test-user')}
         userShowInProgress={false}
+        intl={fakeIntl}
       />
     );
     expect(tree).toMatchSnapshot();

src/containers/ProfilePage/__snapshots__/ProfilePage.test.js.snap

@@ -3,8 +3,15 @@
 exports[`ProfilePage matches snapshot 1`] = `
 <Page
   logoutError={null}
+  schema={
+    Object {
+      "@context": "http://schema.org",
+      "@type": "ProfilePage",
+      "name": "ProfilePage.schemaTitle",
+    }
+  }
   scrollingDisabled={false}
-  title="Profile page"
+  title="ProfilePage.schemaTitle"
 >
   <LayoutSideNavigation
     className={null}

src/translations/en.json

@@ -394,6 +394,7 @@
   "ProfilePage.loadingData": "Loading user data…",
   "ProfilePage.loadingDataFailed": "Whoopsie, something went wrong - please try again.",
   "ProfilePage.mobileHeading": "{name}",
+  "ProfilePage.schemaTitle": "{name} | {siteTitle}",
   "ProfileSettingsForm.addYourProfilePicture": "+ Add your profile picture…",
   "ProfileSettingsForm.addYourProfilePictureMobile": "+ Add",
   "ProfileSettingsForm.changeAvatar": "Change",