M app/src/layouts/Centered.js → app/src/layouts/Centered.js

@@ -2,7 +2,6 @@ import React from 'react';
 import Container from '@material-ui/core/Container';
 import DefaultLayout from './Default';
 import {makeStyles} from '@material-ui/core/styles';
-
 const useStyles = makeStyles(theme => ({
   layout: {
     display: 'flex',
@@ -12,11 +11,11 @@ minHeight: '100vh',
   },
 }));
 
-const CenteredLayout = ({children}) => {
+const CenteredLayout = ({children, title}) => {
   const classes = useStyles();
 
   return (
-    <DefaultLayout>
+    <DefaultLayout title={title}>
       <div className={classes.layout}>
         <Container maxWidth="sm">{children}</Container>
       </div>

M app/src/layouts/Default.js → app/src/layouts/Default.js

@@ -1,7 +1,13 @@ 
 import React from 'react';
+import Helmet from './Helmet';
 
-const DefaultLayout = ({children, className = undefined}) => {
-  return <div className={className}>{children}</div>;
+const DefaultLayout = ({children, title, className = undefined}) => {
+  return (
+    <>
+      <Helmet title={title} />
+      <div className={className}>{children}</div>
+    </>
+  );
 };
 
 export default DefaultLayout;

A app/src/layouts/Helmet.js

@@ -0,0 +1,32 @@ 
+import React from 'react';
+import {Helmet} from 'react-helmet';
+import {useTranslation} from 'react-i18next';
+const LayoutHelmet = ({title}) => {
+  const {t} = useTranslation();
+  return (
+    <Helmet>
+      <meta property="og:site_name" content="Caroster" />
+      <meta property="og:title" content={title} />
+      <meta property="og:url" content="https://app.caroster.io" />
+      <meta property="og:type" content="website" />
+      <meta property="og:description" content={t('meta.description')} />
+      <meta property="og:image" content="/Caroster_Octree_Social.jpg" />
+      <meta property="og:image:width" content="1500" />
+      <meta property="og:image:height" content="843" />
+      <meta itemprop="name" content={title} />
+      <meta itemprop="url" content="https://app.caroster.io" />
+      <meta itemprop="thumbnailUrl" content="/Caroster_Octree_Social.jpg" />
+      <link rel="image_src" href="/Caroster_Octree_Social.jpg" />
+      <meta itemprop="image" content="/Caroster_Octree_Social.jpg" />
+      <meta name="twitter:title" content={title} />
+      <meta name="twitter:image" content="/Caroster_Octree_Social.jpg" />
+      <meta name="twitter:url" content="https://app.caroster.io" />
+      <meta name="twitter:card" content="summary" />
+      <meta name="twitter:description" content={t('meta.description')} />
+      <meta name="description" content={t('meta.description')} />
+      <title>{title}</title>
+    </Helmet>
+  );
+};
+
+export default LayoutHelmet;