initial social card image embeddings

gatsby-config.js

@@ -3,6 +3,8 @@ module.exports = {
     title: `UiO Gaming`,
     description: `En hobbyforening som ønsker skape et sosialt miljø rundt gaming og E-sport på UiO!`,
     author: `@uiogaming`,
+    url: `https://uiogaming.no`,
+    image: `/images/logo.jpg`
   },
   plugins: [
     `gatsby-plugin-react-helmet`,

src/components/blogPost.js

@@ -58,7 +58,10 @@ const serializer = {
 const BlogPost = ({ data }) => {
   return (
     <>
-      <Seo title={data.sanityPost.title} />
+      <Seo
+        title={data.sanityPost.title}
+        image={data.sanityPost.mainImage.asset.GatsbyImage}
+      />
       <div className={styles.container}>
         <article>
           <header>

src/components/seo.js

@@ -10,7 +10,7 @@ import PropTypes from "prop-types"
 import { Helmet } from "react-helmet"
 import { useStaticQuery, graphql } from "gatsby"
 
-function Seo({ description, lang, meta, title }) {
+function Seo({ description, lang, meta, image: metaImage, title }) {
   const { site } = useStaticQuery(
     graphql`
       query {
@@ -19,6 +19,7 @@ function Seo({ description, lang, meta, title }) {
             title
             description
             author
+            image
           }
         }
       }
@@ -28,6 +29,11 @@ function Seo({ description, lang, meta, title }) {
   const metaDescription = description || site.siteMetadata.description
   const defaultTitle = site.siteMetadata?.title
 
+  const image =
+    metaImage && metaImage.src
+      ? `${site.siteMetadata.siteUrl}${metaImage.src}`
+      : null
+
   return (
     <Helmet
       htmlAttributes={{
@@ -40,6 +46,10 @@ function Seo({ description, lang, meta, title }) {
           name: `description`,
           content: metaDescription,
         },
+        {
+          name: "keywords",
+          content: site.siteMetadata.keywords.join(","),
+        },
         {
           property: `og:title`,
           content: title,
@@ -52,13 +62,9 @@ function Seo({ description, lang, meta, title }) {
           property: `og:type`,
           content: `website`,
         },
-        {
-          name: `twitter:card`,
-          content: `summary`,
-        },
         {
           name: `twitter:creator`,
-          content: site.siteMetadata?.author || ``,
+          content: site.siteMetadata.author,
         },
         {
           name: `twitter:title`,
@@ -68,7 +74,35 @@ function Seo({ description, lang, meta, title }) {
           name: `twitter:description`,
           content: metaDescription,
         },
-      ].concat(meta)}
+      ]
+        .concat(
+          metaImage
+            ? [
+                {
+                  property: "og:image",
+                  content: image,
+                },
+                {
+                  property: "og:image:width",
+                  content: metaImage.width,
+                },
+                {
+                  property: "og:image:height",
+                  content: metaImage.height,
+                },
+                {
+                  name: "twitter:card",
+                  content: "summary_large_image",
+                },
+              ]
+            : [
+                {
+                  name: "twitter:card",
+                  content: "summary",
+                },
+              ]
+        )
+        .concat(meta)}
     />
   )
 }