Refactor SEO component

This commit is contained in:
Moris Zen
2018-09-12 14:35:30 +02:00
parent 5f6b589e9f
commit 4fae11d05d
2 changed files with 38 additions and 44 deletions

View File

@@ -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

View File

@@ -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}` },
]}