import React, { Component } from 'react' import PropTypes from 'prop-types' import { StaticQuery, graphql } from 'gatsby' import Helmet from 'react-helmet' const query = graphql` query { contentYaml { title tagline url author { name twitter avatar { childImageSharp { resize(width: 160) { src } } } } } } ` class SEO extends Component { static propTypes = { post: PropTypes.object, slug: PropTypes.string, postSEO: PropTypes.bool } render() { return ( { const siteMeta = data.contentYaml const { post, slug, postSEO } = this.props 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 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 ( {/* General tags */} {/* Schema.org tags */} {/* OpenGraph tags */} {postSEO && } {/* Twitter Card tags */} ) }} /> ) } } export default SEO