import React from 'react'
import { graphql, useStaticQuery } from 'gatsby'
import Helmet from 'react-helmet'
const query = graphql`
query {
site {
siteMetadata {
siteTitle
siteDescription
siteUrl
author {
name
twitter
}
}
}
logo: allFile(filter: { name: { eq: "apple-touch-icon" } }) {
edges {
node {
relativePath
}
}
}
}
`
const createSchemaOrg = (
blogURL: string,
title: string,
siteMeta: any,
postSEO: boolean,
postURL: string,
image: string,
description: string
) => {
const schemaOrgJSONLD = [
{
'@context': 'http://schema.org',
'@type': 'WebSite',
url: blogURL,
name: title,
alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : ''
}
]
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 schemaOrgJSONLD
}
const MetaTags = ({
description,
image,
url,
schema,
postSEO,
title,
siteMeta
}: {
description: string
image: string
url: string
schema: string
postSEO: boolean
title: string
siteMeta: any
}) => (
{/* General tags */}
{/* Schema.org tags */}
{/* OpenGraph tags */}
{postSEO && }
{/* Twitter Card tags */}
)
export default function SEO({
post,
slug,
postSEO
}: {
post?: any
slug?: string
postSEO?: boolean
}) {
const data = useStaticQuery(query)
const siteMeta = data.site.siteMetadata
const logo = data.logo.edges[0].node.relativePath
let title
let description
let image
let postURL
if (postSEO) {
const postMeta = post.frontmatter
title = `${postMeta.title} ¦ ${siteMeta.siteTitle}`
description = postMeta.description ? postMeta.description : post.excerpt
image = postMeta.image
? postMeta.image.childImageSharp.fluid.src
: `/${logo}`
postURL = `${siteMeta.siteUrl}${slug}`
} else {
title = `${siteMeta.siteTitle} ¦ ${siteMeta.siteDescription}`
description = siteMeta.siteDescription
image = `/${logo}`
}
image = `${siteMeta.siteUrl}${image}`
const blogURL = siteMeta.siteUrl
const url = postSEO ? postURL : blogURL
let schema = createSchemaOrg(
blogURL,
title,
siteMeta,
postSEO,
postURL,
image,
description
)
schema = JSON.stringify(schema)
return (
)
}