From 3aabf39c2772188fd29a8e8fb74727755285fea9 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Tue, 25 Sep 2018 01:39:38 +0200 Subject: [PATCH] slight refactor --- src/components/atoms/SEO.jsx | 269 ++++++++++++++++++++--------------- 1 file changed, 156 insertions(+), 113 deletions(-) diff --git a/src/components/atoms/SEO.jsx b/src/components/atoms/SEO.jsx index b50eec4f..c31030fc 100644 --- a/src/components/atoms/SEO.jsx +++ b/src/components/atoms/SEO.jsx @@ -1,4 +1,4 @@ -import React, { Component } from 'react' +import React from 'react' import PropTypes from 'prop-types' import { StaticQuery, graphql } from 'gatsby' import Helmet from 'react-helmet' @@ -24,124 +24,167 @@ const query = graphql` } ` -class SEO extends Component { - static propTypes = { - post: PropTypes.object, - slug: PropTypes.string, - postSEO: PropTypes.bool - } +const createSchemaOrg = ( + blogURL, + title, + siteMeta, + postSEO, + postURL, + image, + description +) => { + const schemaOrgJSONLD = [ + { + '@context': 'http://schema.org', + '@type': 'WebSite', + url: blogURL, + name: title, + alternateName: siteMeta.titleAlt ? siteMeta.titleAlt : '' + } + ] - 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, + if (postSEO) { + schemaOrgJSONLD.push( + { + '@context': 'http://schema.org', + '@type': 'BreadcrumbList', + itemListElement: [ + { + '@type': 'ListItem', + position: 1, + item: { + '@id': postURL, 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 ( - - - - {/* General tags */} - - - - - {/* Schema.org tags */} - - - {/* OpenGraph tags */} - - {postSEO && } - - - - - {/* Twitter Card tags */} - - - - - - - ) - }} - /> + ] + }, + { + '@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 +}) => ( + + + + {/* General tags */} + + + + + {/* Schema.org tags */} + + + {/* OpenGraph tags */} + + {postSEO && } + + + + + {/* Twitter Card tags */} + + + + + + +) + +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 }) => ( + { + 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 ( + + ) + }} + /> +) + +SEO.propTypes = { + post: PropTypes.object, + slug: PropTypes.string, + postSEO: PropTypes.bool } export default SEO