mirror of
https://github.com/kremalicious/blog.git
synced 2025-01-05 03:15:07 +01:00
slight refactor
This commit is contained in:
parent
0c60576f26
commit
3aabf39c27
GPG Key ID:
606EEEF3C479A91F
@ -1,4 +1,4 @@
|
|||||||
import React, { Component } from 'react'
|
import React from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import { StaticQuery, graphql } from 'gatsby'
|
import { StaticQuery, graphql } from 'gatsby'
|
||||||
import Helmet from 'react-helmet'
|
import Helmet from 'react-helmet'
|
||||||
@ -24,124 +24,167 @@ const query = graphql`
|
|||||||
}
|
}
|
||||||
`
|
`
|
||||||
|
|
||||||
class SEO extends Component {
|
const createSchemaOrg = (
|
||||||
static propTypes = {
|
blogURL,
|
||||||
post: PropTypes.object,
|
title,
|
||||||
slug: PropTypes.string,
|
siteMeta,
|
||||||
postSEO: PropTypes.bool
|
postSEO,
|
||||||
}
|
postURL,
|
||||||
|
image,
|
||||||
|
description
|
||||||
|
) => {
|
||||||
|
const schemaOrgJSONLD = [
|
||||||
|
{
|
||||||
|
'@context': 'http://schema.org',
|
||||||
|
'@type': 'WebSite',
|
||||||
|
url: blogURL,
|
||||||
|
name: title,
|
||||||
|
alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : ''
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
render() {
|
if (postSEO) {
|
||||||
return (
|
schemaOrgJSONLD.push(
|
||||||
<StaticQuery
|
{
|
||||||
query={query}
|
'@context': 'http://schema.org',
|
||||||
render={data => {
|
'@type': 'BreadcrumbList',
|
||||||
const siteMeta = data.contentYaml
|
itemListElement: [
|
||||||
const { post, slug, postSEO } = this.props
|
{
|
||||||
let title
|
'@type': 'ListItem',
|
||||||
let description
|
position: 1,
|
||||||
let image
|
item: {
|
||||||
let postURL
|
'@id': postURL,
|
||||||
|
|
||||||
if (postSEO) {
|
|
||||||
const postMeta = post.frontmatter
|
|
||||||
title = `${postMeta.title} ¦ ${siteMeta.tagline}`
|
|
||||||
description = postMeta.description
|
|
||||||
? postMeta.description
|
|
||||||
: post.excerpt
|
|
||||||
image = postMeta.image
|
|
||||||
? postMeta.image.childImageSharp.fluid.src
|
|
||||||
: siteMeta.author.avatar.childImageSharp.resize.src
|
|
||||||
postURL = `${siteMeta.url}${slug}`
|
|
||||||
} else {
|
|
||||||
title = `${siteMeta.title} ¦ ${siteMeta.tagline}`
|
|
||||||
description = siteMeta.tagline
|
|
||||||
image = siteMeta.author.avatar.childImageSharp.resize.src
|
|
||||||
}
|
|
||||||
|
|
||||||
image = `${siteMeta.url}${image}`
|
|
||||||
const blogURL = siteMeta.url
|
|
||||||
const url = postSEO ? postURL : blogURL
|
|
||||||
|
|
||||||
const schemaOrgJSONLD = [
|
|
||||||
{
|
|
||||||
'@context': 'http://schema.org',
|
|
||||||
'@type': 'WebSite',
|
|
||||||
url: blogURL,
|
|
||||||
name: title,
|
name: title,
|
||||||
alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : ''
|
image
|
||||||
}
|
}
|
||||||
]
|
|
||||||
|
|
||||||
if (postSEO) {
|
|
||||||
schemaOrgJSONLD.push(
|
|
||||||
{
|
|
||||||
'@context': 'http://schema.org',
|
|
||||||
'@type': 'BreadcrumbList',
|
|
||||||
itemListElement: [
|
|
||||||
{
|
|
||||||
'@type': 'ListItem',
|
|
||||||
position: 1,
|
|
||||||
item: {
|
|
||||||
'@id': postURL,
|
|
||||||
name: title,
|
|
||||||
image
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
'@context': 'http://schema.org',
|
|
||||||
'@type': 'BlogPosting',
|
|
||||||
url: blogURL,
|
|
||||||
name: title,
|
|
||||||
alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '',
|
|
||||||
headline: title,
|
|
||||||
image: {
|
|
||||||
'@type': 'ImageObject',
|
|
||||||
url: image
|
|
||||||
},
|
|
||||||
description
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
}
|
||||||
|
]
|
||||||
return (
|
},
|
||||||
<Helmet>
|
{
|
||||||
<html lang="en" />
|
'@context': 'http://schema.org',
|
||||||
|
'@type': 'BlogPosting',
|
||||||
{/* General tags */}
|
url: blogURL,
|
||||||
<meta name="description" content={description} />
|
name: title,
|
||||||
<meta name="image" content={image} />
|
alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '',
|
||||||
<link rel="canonical" href={url} />
|
headline: title,
|
||||||
|
image: {
|
||||||
{/* Schema.org tags */}
|
'@type': 'ImageObject',
|
||||||
<script type="application/ld+json">
|
url: image
|
||||||
{JSON.stringify(schemaOrgJSONLD)}
|
},
|
||||||
</script>
|
description
|
||||||
|
}
|
||||||
{/* OpenGraph tags */}
|
|
||||||
<meta property="og:url" content={url} />
|
|
||||||
{postSEO && <meta property="og:type" content="article" />}
|
|
||||||
<meta property="og:title" content={title} />
|
|
||||||
<meta property="og:description" content={description} />
|
|
||||||
<meta property="og:image" content={image} />
|
|
||||||
|
|
||||||
{/* Twitter Card tags */}
|
|
||||||
<meta name="twitter:card" content="summary_large_image" />
|
|
||||||
<meta
|
|
||||||
name="twitter:creator"
|
|
||||||
content={siteMeta.author.twitter ? siteMeta.author.twitter : ''}
|
|
||||||
/>
|
|
||||||
<meta name="twitter:title" content={title} />
|
|
||||||
<meta name="twitter:description" content={description} />
|
|
||||||
<meta name="twitter:image" content={image} />
|
|
||||||
</Helmet>
|
|
||||||
)
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
return schemaOrgJSONLD
|
||||||
|
}
|
||||||
|
|
||||||
|
const MetaTags = ({
|
||||||
|
description,
|
||||||
|
image,
|
||||||
|
url,
|
||||||
|
schema,
|
||||||
|
postSEO,
|
||||||
|
title,
|
||||||
|
siteMeta
|
||||||
|
}) => (
|
||||||
|
<Helmet>
|
||||||
|
<html lang="en" />
|
||||||
|
|
||||||
|
{/* General tags */}
|
||||||
|
<meta name="description" content={description} />
|
||||||
|
<meta name="image" content={image} />
|
||||||
|
<link rel="canonical" href={url} />
|
||||||
|
|
||||||
|
{/* Schema.org tags */}
|
||||||
|
<script type="application/ld+json">{schema}</script>
|
||||||
|
|
||||||
|
{/* OpenGraph tags */}
|
||||||
|
<meta property="og:url" content={url} />
|
||||||
|
{postSEO && <meta property="og:type" content="article" />}
|
||||||
|
<meta property="og:title" content={title} />
|
||||||
|
<meta property="og:description" content={description} />
|
||||||
|
<meta property="og:image" content={image} />
|
||||||
|
|
||||||
|
{/* Twitter Card tags */}
|
||||||
|
<meta name="twitter:card" content="summary_large_image" />
|
||||||
|
<meta
|
||||||
|
name="twitter:creator"
|
||||||
|
content={siteMeta.author.twitter ? siteMeta.author.twitter : ''}
|
||||||
|
/>
|
||||||
|
<meta name="twitter:title" content={title} />
|
||||||
|
<meta name="twitter:description" content={description} />
|
||||||
|
<meta name="twitter:image" content={image} />
|
||||||
|
</Helmet>
|
||||||
|
)
|
||||||
|
|
||||||
|
MetaTags.propTypes = {
|
||||||
|
description: PropTypes.string,
|
||||||
|
image: PropTypes.string,
|
||||||
|
url: PropTypes.string,
|
||||||
|
schema: PropTypes.string,
|
||||||
|
postSEO: PropTypes.bool,
|
||||||
|
title: PropTypes.string,
|
||||||
|
siteMeta: PropTypes.object
|
||||||
|
}
|
||||||
|
|
||||||
|
const SEO = ({ post, slug, postSEO }) => (
|
||||||
|
<StaticQuery
|
||||||
|
query={query}
|
||||||
|
render={data => {
|
||||||
|
const siteMeta = data.contentYaml
|
||||||
|
let title
|
||||||
|
let description
|
||||||
|
let image
|
||||||
|
let postURL
|
||||||
|
|
||||||
|
if (postSEO) {
|
||||||
|
const postMeta = post.frontmatter
|
||||||
|
title = `${postMeta.title} ¦ ${siteMeta.tagline}`
|
||||||
|
description = postMeta.description ? postMeta.description : post.excerpt
|
||||||
|
image = postMeta.image
|
||||||
|
? postMeta.image.childImageSharp.fluid.src
|
||||||
|
: siteMeta.author.avatar.childImageSharp.resize.src
|
||||||
|
postURL = `${siteMeta.url}${slug}`
|
||||||
|
} else {
|
||||||
|
title = `${siteMeta.title} ¦ ${siteMeta.tagline}`
|
||||||
|
description = siteMeta.tagline
|
||||||
|
image = siteMeta.author.avatar.childImageSharp.resize.src
|
||||||
|
}
|
||||||
|
|
||||||
|
image = `${siteMeta.url}${image}`
|
||||||
|
const blogURL = siteMeta.url
|
||||||
|
const url = postSEO ? postURL : blogURL
|
||||||
|
|
||||||
|
let schema = createSchemaOrg(
|
||||||
|
blogURL,
|
||||||
|
title,
|
||||||
|
siteMeta,
|
||||||
|
postSEO,
|
||||||
|
postURL,
|
||||||
|
image,
|
||||||
|
description
|
||||||
|
)
|
||||||
|
schema = JSON.stringify(schema)
|
||||||
|
|
||||||
|
return (
|
||||||
|
<MetaTags
|
||||||
|
description={description}
|
||||||
|
image={image}
|
||||||
|
url={url}
|
||||||
|
schema={schema}
|
||||||
|
postSEO={postSEO}
|
||||||
|
title={title}
|
||||||
|
siteMeta={siteMeta}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
|
||||||
|
SEO.propTypes = {
|
||||||
|
post: PropTypes.object,
|
||||||
|
slug: PropTypes.string,
|
||||||
|
postSEO: PropTypes.bool
|
||||||
}
|
}
|
||||||
|
|
||||||
export default SEO
|
export default SEO
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user