From d447dc0c9b755280428cc01e225b876158cc2664 Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Wed, 12 Sep 2018 13:38:02 +0200
Subject: [PATCH] SEO Component base

---
 src/components/SEO.js | 18 ++++++++++++++++++
 src/layouts/index.js  |  8 --------
 src/pages/index.js    |  2 ++
 3 files changed, 20 insertions(+), 8 deletions(-)
 create mode 100644 src/components/SEO.js

diff --git a/src/components/SEO.js b/src/components/SEO.js
new file mode 100644
index 0000000..fc3cbbf
--- /dev/null
+++ b/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
diff --git a/src/layouts/index.js b/src/layouts/index.js
index fd0eea6..29a6dc4 100644
--- a/src/layouts/index.js
+++ b/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
diff --git a/src/pages/index.js b/src/pages/index.js
index 4bc70e4..78cb0b4 100644
--- a/src/pages/index.js
+++ b/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}