From 4fae11d05d79d2b1fa5b1348395369e08f13619d Mon Sep 17 00:00:00 2001
From: Moris Zen <moris.pasic@gmail.com>
Date: Wed, 12 Sep 2018 14:35:30 +0200
Subject: [PATCH] Refactor SEO component

---
 src/components/SEO.js         | 71 ++++++++++++++++++-----------------
 src/templates/post-default.js | 11 +-----
 2 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/src/components/SEO.js b/src/components/SEO.js
index bbd8d1f..a31e496 100644
--- a/src/components/SEO.js
+++ b/src/components/SEO.js
@@ -1,43 +1,44 @@
 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 - App Development & Mobile Design agency that makes you stand out'}
-    </title>
-    <meta name="description" content={props.siteDescription ? props.siteDescription : 'We are in the business of solving real-world problems with digital solutions. Our mission is to make you stand out with the help of modern technologies'} />
-    <meta name="image" content={props.siteImage ? props.siteImage : ImgIntro} />
+class SEO extends Component {
+  render() {
+    const { siteTitle, siteDescription, siteImage, siteUrl} = this.props
 
-    <meta name="og:title" content={props.siteTitle
-      ? props.siteTitle
-      : 'Saburly - App Development & Mobile Design agency that makes you stand out'} />
-    <meta name="og:description" content={props.siteDescription ? props.siteDescription : 'We are in the business of solving real-world problems with digital solutions. Our mission is to make you stand out with the help of modern technologies'} />
-    <meta name="og:image" content={props.siteImage ? props.siteImage : ImgIntro} />
-    <meta name="og:url" content={props.siteUrl ? props.siteUrl : 'https://www.saburly.com'} />
-    <meta name="og:site_name" content="Saburly.com" />
-    <meta name="fb:app_id" content="1896398823783343" />
-    <meta name="og:type" content="website" />
+    let title = siteTitle ? siteTitle : 'Saburly - App Development & Mobile Design agency that makes you stand out'
+    let desc = siteDescription ? siteDescription : 'We are in the business of solving real-world problems with digital solutions. Our mission is to make you stand out with the help of modern technologies'
+    let img = siteImage ? siteImage : ImgIntro
 
-    <meta itemprop="name" content={props.siteTitle
-      ? props.siteTitle
-      : 'Saburly - App Development & Mobile Design agency that makes you stand out'} />
-    <meta itemprop="description" content={props.siteDescription ? props.siteDescription : 'We are in the business of solving real-world problems with digital solutions. Our mission is to make you stand out with the help of modern technologies'} />
-    <meta itemprop="image" content={props.siteImage ? props.siteImage : ImgIntro} />
-
-    <meta name="twitter:card" content="summary" />
-      <meta name="twitter:title" content={props.siteTitle
-        ? props.siteTitle
-        : 'Saburly - App Development & Mobile Design agency that makes you stand out'} />
-      <meta name="twitter:description" content={props.siteDescription ? props.siteDescription : 'We are in the business of solving real-world problems with digital solutions. Our mission is to make you stand out with the help of modern technologies'} />
-      <meta name="twitter:site" content="@saburly" />
-      <meta name="twitter:creator" content="@saburly" />
-      <meta name="twitter:image:src" content={props.siteImage ? props.siteImage : ImgIntro} />
-  </Helmet>
-)
+    return (
+      <Helmet>
+      <title>
+        {title}
+      </title>
+      <meta name="description" content={desc} />
+      <meta name="image" content={img} />
+  
+      <meta name="og:title" content={title} />
+      <meta name="og:description" content={desc} />
+      <meta name="og:image" content={img} />
+      <meta name="og:url" content={siteUrl ? siteUrl : 'https://www.saburly.com'} />
+      <meta name="og:site_name" content="Saburly.com" />
+      <meta name="fb:app_id" content="1896398823783343" />
+      <meta name="og:type" content="website" />
+  
+      <meta itemprop="name" content={title} />
+      <meta itemprop="description" content={desc} />
+      <meta itemprop="image" content={img} />
+  
+      <meta name="twitter:card" content="summary" />
+        <meta name="twitter:title" content={title} />
+        <meta name="twitter:description" content={desc} />
+        <meta name="twitter:site" content="@saburly" />
+        <meta name="twitter:creator" content="@saburly" />
+        <meta name="twitter:image:src" content={img} />
+    </Helmet>
+    )
+  }
+}
 
 export default SEO
diff --git a/src/templates/post-default.js b/src/templates/post-default.js
index 721c6c6..e7c6973 100644
--- a/src/templates/post-default.js
+++ b/src/templates/post-default.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react'
 import Helmet from 'react-helmet'
 import Prism from 'prismjs'
+import SEO from '../components/SEO'
 
 require('prismjs/themes/prism-tomorrow.css')
 
@@ -19,16 +20,8 @@ class PostDefault extends Component {
     const { data } = this.props
     return (
       <PageTransition>
+      <SEO siteTitle={data.wordpressPost.title} siteDescription="We are always on a lookout for exciting challenges. Feel free to contact us if you want to start something great or just have any questions" siteImage={data.wordpressPost.featured_media.source_url} siteUrl={`https://www.saburly.com/blog/${data.wordpressPost.slug}`} />
         <Helmet
-          title={`${data.wordpressPost.title} - Saburly.com`}
-          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}` },
           ]}