diff --git a/gatsby-config.js b/gatsby-config.js
index 3174f08..194b503 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -9,8 +9,9 @@ module.exports = {
   siteMetadata: {
     title: `Bonneville`,
     titleTemplate: `%s | A starter theme for Gatsby`,
-    siteUrl: `https://bonneville.netlify.com`,
     description: `A starter theme for Gatsby`,
+    siteUrl: `https://bonneville.netlify.com`,
+    image: `/images/color.jpg`,
     author: `Morgan Baker`,
     authorSite: `https://www.morganbaker.dev`,
     twitterUsername: `@bonneville`,
diff --git a/src/components/SEO.js b/src/components/SEO.js
index 13ac9a8..693b7df 100644
--- a/src/components/SEO.js
+++ b/src/components/SEO.js
@@ -1,54 +1,74 @@
 import React from "react"
 import { Helmet } from "react-helmet"
 import PropTypes from "prop-types"
-import { StaticQuery, graphql } from "gatsby"
+import { useLocation } from "@reach/router"
+import { useStaticQuery, graphql } from "gatsby"
+
+const SEO = ({ title, description, lang, image, article }) => {
+  const { pathname } = useLocation()
+  const { site } = useStaticQuery(query)
+
+  const {
+    defaultTitle,
+    titleTemplate,
+    defaultDescription,
+    siteUrl,
+    defaultImage,
+    twitterUsername,
+  } = site.siteMetadata
+
+  const seo = {
+    title: title || defaultTitle,
+    description: description || defaultDescription,
+    image: `${siteUrl}${image || defaultImage}`,
+    url: `${siteUrl}${pathname}`,
+  }
+
+  return (
+    <Helmet
+      htmlAttributes={{ lang }}
+      title={seo.title}
+      titleTemplate={titleTemplate}
+    >
+      <meta name="description" content={seo.description} />
+      <meta name="image" content={seo.image} />
+      {seo.url && <meta property="og:url" content={seo.url} />}
+      {(article ? true : null) && <meta property="og:type" content="article" />}
+      {seo.title && <meta property="og:title" content={seo.title} />}
+      {seo.description && (
+        <meta property="og:description" content={seo.description} />
+      )}
+      {seo.image && <meta property="og:image" content={seo.image} />}
+      <meta name="twitter:card" content="summary_large_image" />
+      {twitterUsername && (
+        <meta name="twitter:creator" content={twitterUsername} />
+      )}
+      {seo.title && <meta name="twitter:title" content={seo.title} />}
+      {seo.description && (
+        <meta name="twitter:description" content={seo.description} />
+      )}
+      {seo.image && <meta name="twitter:image" content={seo.image} />}
+    </Helmet>
+  )
+}
 
-const SEO = ({ title, description, image, pathname, article }) => (
-  <StaticQuery
-    query={query}
-    render={({
-      site: {
-        siteMetadata: {
-          defaultTitle,
-          titleTemplate,
-          defaultDescription,
-          siteUrl,
-          twitterUsername,
-        },
-      },
-    }) => {
-      const seo = {
-        title: title || defaultTitle,
-        description: description || defaultDescription,
-        url: `${siteUrl}${pathname || "/"}`,
-      }
-      return (
-        <>
-          <Helmet title={seo.title} titleTemplate={titleTemplate}>
-            <meta name="description" content={seo.description} />
-            {seo.url && <meta property="og:url" content={seo.url} />}
-            {(article ? true : null) && (
-              <meta property="og:type" content="article" />
-            )}
-            {seo.title && <meta property="og:title" content={seo.title} />}
-            {seo.description && (
-              <meta property="og:description" content={seo.description} />
-            )}
-            <meta name="twitter:card" content="summary_large_image" />
-            {twitterUsername && (
-              <meta name="twitter:creator" content={twitterUsername} />
-            )}
-            {seo.title && <meta name="twitter:title" content={seo.title} />}
-            {seo.description && (
-              <meta name="twitter:description" content={seo.description} />
-            )}
-          </Helmet>
-        </>
-      )
-    }}
-  />
-)
 export default SEO
+
+SEO.propTypes = {
+  title: PropTypes.string,
+  description: PropTypes.string,
+  image: PropTypes.string,
+  article: PropTypes.bool,
+}
+
+SEO.defaultProps = {
+  title: null,
+  description: null,
+  image: null,
+  lang: `en`,
+  article: false,
+}
+
 const query = graphql`
   query SEO {
     site {
@@ -57,22 +77,9 @@ const query = graphql`
         titleTemplate
         defaultDescription: description
         siteUrl
+        defaultImage: image
         twitterUsername
       }
     }
   }
 `
-SEO.propTypes = {
-  title: PropTypes.string,
-  description: PropTypes.string,
-  image: PropTypes.string,
-  pathname: PropTypes.string,
-  article: PropTypes.bool,
-}
-SEO.defaultProps = {
-  title: null,
-  description: null,
-  image: null,
-  pathname: null,
-  article: false,
-}
diff --git a/src/images/color.jpg b/src/images/color.jpg
new file mode 100644
index 0000000..8ec7d6e
Binary files /dev/null and b/src/images/color.jpg differ