SEO Component base

src/components/SEO.js

@@ -0,0 +1,18 @@
+import React, { Component } from 'react'
+import Helmet from 'react-helmet'
+import urljoin from 'url-join'
+import ImgIntro from '../images/web-development-company.svg'
+
+const SEO = ({ ...props }) => (
+  <Helmet>
+    <title>
+      {props.siteTitle
+        ? props.siteTitle
+        : 'Saburly - Digital Agency that makes you stand out'}
+    </title>
+    <meta name="description" content={props.siteDescription} />
+    <meta name="image" content={props.siteImage ? props.siteImage : ImgIntro} />
+  </Helmet>
+)
+
+export default SEO

src/layouts/index.js

@@ -18,14 +18,6 @@ import favicon32 from '../images/favicon32.png'
 const Layout = ({ children, data }) => (
   <div className="font-sans mx-auto">
     <Helmet
-      title="Saburly - Digital Agency that makes you stand out"
-      meta={[
-        { name: 'description', content: 'We code & design great software' },
-        {
-          name: 'keywords',
-          content: 'software, design, coding, programming, code, consulting',
-        },
-      ]}
       link={[{ rel: 'shortcut icon', type: 'image/png', href: `${favicon32}` }]}
     />
     <MessengerCustomerChat

src/pages/index.js

@@ -10,6 +10,7 @@ import InfoBox from '../components/InfoBox'
 import Technologies from '../components/Technologies'
 import Typed from 'react-typed'
 import Fade from 'react-reveal/Fade'
+import SEO from '../components/SEO'
 
 import ImgIntro from '../images/web-development-company.svg'
 import ImgDesign from '../images/user-experience-design-agency.svg'
@@ -29,6 +30,7 @@ import PageTransition from 'gatsby-plugin-page-transitions'
 
 const IndexPage = ({ ...props }) => (
   <PageTransition>
+    <SEO />
     <PageIntro
       text="We're in the business of solving real-world problems with digital solutions. Our mission is to make you stand out and gain competitive advantages with the help of modern technologies."
       image={ImgIntro}