refactor for shorter render function

src/components/atoms/SEO.jsx

@@ -26,32 +26,7 @@ const query = graphql`
   }
 `
 
-export default class SEO extends PureComponent {
+const MetaTags = ({ title, description, url, image, meta }) => {
-  static propTypes = {
-    project: PropTypes.object
-  }
-
-  render() {
-    const { project } = this.props
-
-    return (
-      <StaticQuery
-        query={query}
-        render={data => {
-          const meta = data.dataYaml
-
-          const title = (project && project.title) || meta.title
-          const description =
-            project && project.fields.excerpt
-              ? project.fields.excerpt
-              : meta.description
-          const image =
-            project && project.img
-              ? project.img.childImageSharp.twitterImage.src
-              : meta.img.childImageSharp.resize.src
-          const url =
-            project && project.slug ? `${meta.url}${project.slug}` : meta.url
-
   return (
     <Helmet
       defaultTitle={`${meta.title.toLowerCase()} { ${meta.tagline.toLowerCase()} }`}
@@ -79,6 +54,45 @@ export default class SEO extends PureComponent {
       <meta name="twitter:image" content={`${meta.url}${image}`} />
     </Helmet>
   )
+}
+
+MetaTags.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  url: PropTypes.string,
+  image: PropTypes.string,
+  meta: PropTypes.object
+}
+
+export default class SEO extends PureComponent {
+  static propTypes = {
+    project: PropTypes.object
+  }
+
+  render() {
+    return (
+      <StaticQuery
+        query={query}
+        render={data => {
+          const { project } = this.props
+          const meta = data.dataYaml
+          const title = (project && project.title) || meta.title
+          const description =
+            (project && project.fields.excerpt) || meta.description
+          const image =
+            (project && project.img.childImageSharp.twitterImage.src) ||
+            meta.img.childImageSharp.resize.src
+          const url = (project && `${meta.url}${project.slug}`) || meta.url
+
+          return (
+            <MetaTags
+              title={title}
+              description={description}
+              url={url}
+              image={image}
+              meta={meta}
+            />
+          )
         }}
       />
     )