Fix og/twitter image

mirumee · Jul 18, 2019 · 4776fbf · 4776fbf
1 parent 08f6c7a
commit 4776fbf
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -3,7 +3,7 @@ module.exports = {
   siteMetadata: {
     title: `GraphQL Wroclaw`,
     description: `GraphQL Wroclaw has rapidly grown into a thriving community. Regular Meetup events are a chance to exchange knowledge and experience with our peers. People. Talks. Technology.`,
-    image: "/images/og-image.png",
+    siteUrl: "https://graphqlwroclaw.org",
     author: `@mirumee`,
   },
   plugins: [

diff --git a/src/components/seo/index.js b/src/components/seo/index.js
@@ -4,20 +4,28 @@ import Helmet from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
 
 function SEO({ description, lang, meta, keywords, title }) {
-  const { site } = useStaticQuery(
+  const {
+    site,
+    file: { publicURL: imageURL },
+  } = useStaticQuery(
     graphql`
       query {
         site {
           siteMetadata {
             title
             description
             author
+            siteUrl
           }
         }
+        file(name: { eq: "og-image" }) {
+          publicURL
+        }
       }
     `
   )
 
+  const { siteUrl } = site.siteMetadata
   const metaDescription = description || site.siteMetadata.description
 
   return (
@@ -40,6 +48,10 @@ function SEO({ description, lang, meta, keywords, title }) {
           property: `og:description`,
           content: metaDescription,
         },
+        {
+          property: `og:image`,
+          content: `${siteUrl}${imageURL}`,
+        },
         {
           property: `og:type`,
           content: `website`,
@@ -60,6 +72,10 @@ function SEO({ description, lang, meta, keywords, title }) {
           name: `twitter:description`,
           content: metaDescription,
         },
+        {
+          name: `titter:image`,
+          content: `${siteUrl}${imageURL}`,
+        },
       ]
         .concat(
           keywords.length > 0
@@ -79,10 +95,12 @@ SEO.defaultProps = {
   meta: [],
   keywords: [],
   description: ``,
+  image: null,
 }
 
 SEO.propTypes = {
   description: PropTypes.string,
+  image: PropTypes.string,
   lang: PropTypes.string,
   meta: PropTypes.arrayOf(PropTypes.object),
   keywords: PropTypes.arrayOf(PropTypes.string),