Refactor: amend social cards

src/components/structure/SEO.js

@@ -1,49 +1,51 @@
-import React from "react"
-import { useSiteMetadata } from "../../hooks/use-site-metadata"
+import React from "react";
+import { useSiteMetadata } from "../../hooks/use-site-metadata";
 
 function createSeoImage(featured, image) {
-    if (featured) {
-        return featured?.childImageSharp.gatsbyImageData.images.fallback.src;
-    }
-    return image;
+  if (featured) {
+    return featured?.childImageSharp.gatsbyImageData.images.fallback.src;
+  }
+  return image;
 }
 
 const Seo = ({ title, description, pathname, children, featured }) => {
-    const { title: defaultTitle, description: defaultDescription, image, siteUrl, twitterHandle } = useSiteMetadata()
-    const featuredImage = createSeoImage(featured,image);
-    const seo = {
-        title: title || defaultTitle,
-        description: description || defaultDescription,
-        image: `${siteUrl}${featuredImage}`,
-        url: `${siteUrl}${pathname || ``}`,
-        twitterHandle,
-    }
+  const { title: defaultTitle, description: defaultDescription, image, siteUrl, twitterHandle } = useSiteMetadata();
+  console.log(featured);
+  const featuredImage = createSeoImage(featured, image);
+  const seo = {
+    title: title || defaultTitle,
+    description: description || defaultDescription,
+    image: `${siteUrl}${featuredImage}`,
+    url: `${siteUrl}${pathname || ``}`,
+    twitterHandle
+  };
 
-    return (
-        <>
-            <title>{seo.title}</title>
-            <meta name="description" content={seo.description} />
-            <meta name="image" content={seo.image} />
-            <meta name="twitter:card" content="summary_large_image" />
-            <meta name="twitter:title" content={seo.title} />
-            <meta name="twitter:url" content={seo.url} />
-            <meta name="twitter:description" content={seo.description} />
-            <meta name="twitter:image" content={seo.image} />
-            <meta name="twitter:creator" content={seo.twitterHandle} />
-            <meta property="og:url" content={seo.url.toString()} />
-            <meta property="og:title" content={seo.title} />
-            <meta property="og:type" content="website" />
-            <meta property="og:site_name" content="Museologi.st" />
-            <meta property="og:description" content={seo.description} />
-            <meta property="og:locale" content="en-gb" />
-            <meta property="og:image" content={seo.image.toString()} />
-            <meta property="og:image:alt" content="An image representing this post" />
-            <meta property="og:image:width" content="600"/>
-            <meta property="og:image:width" content="600" />
-            <meta property="og:image:type" content="image/jpeg" />
-            {children}
-        </>
-    )
-}
 
-export default Seo
+  return (
+    <>
+      <title>{seo.title}</title>
+      <meta name="description" content={seo.description} />
+      <meta name="image" content={seo.image} />
+      <meta name="twitter:card" content="summary_large_image" />
+      <meta name="twitter:title" content={seo.title} />
+      <meta name="twitter:url" content={seo.url} />
+      <meta name="twitter:description" content={seo.description} />
+      <meta name="twitter:image" content={seo.image} />
+      <meta name="twitter:creator" content={seo.twitterHandle} />
+      <meta property="og:url" content={seo.url.toString()} />
+      <meta property="og:title" content={seo.title} />
+      <meta property="og:type" content="website" />
+      <meta property="og:site_name" content="Museologi.st" />
+      <meta property="og:description" content={seo.description} />
+      <meta property="og:locale" content="en-gb" />
+      <meta property="og:image" content={seo.image.toString()} />
+      <meta property="og:image:alt" content="An image representing this post" />
+      <meta property="og:image:width" content="600" />
+      <meta property="og:image:width" content="600" />
+      <meta property="og:image:type" content="image/jpeg" />
+      {children}
+    </>
+  );
+};
+
+export default Seo;

src/hooks/use-site-metadata.js

@@ -8,6 +8,7 @@ export const useSiteMetadata = () => {
           title
           description
           twitterHandle
+          image
           siteUrl
         }
       }

src/templates/blog-page.js

@@ -38,20 +38,33 @@ export const pageQuery = graphql`
             wordCount {
               words
              }
+            excerpt(format: PLAIN, pruneLength: 30)
             frontmatter {
                 permalink
                 date(formatString: "MMMM DD, YYYY")
                 title
                 author
                 tag
+                featuredImage {
+                    childImageSharp {
+                        gatsbyImageData(
+                            placeholder: BLURRED
+                            height: 600
+                            formats: [AUTO, WEBP]
+                            width: 600
+                            quality: 80
+                            transformOptions: { grayscale: false, fit: COVER, cropFocus: CENTER }
+                        )
+                    }
+                }
             }
         }
     }
 `;
 
 export function Head({data: {markdownRemark}}) {
-    const {frontmatter} = markdownRemark;
+    const {frontmatter,excerpt} = markdownRemark;
     return (
-        <Seo title={frontmatter.title}  />
+        <Seo title={frontmatter.title} description={excerpt} featured={frontmatter.featuredImage} />
     )
 }

src/templates/index.js

@@ -63,5 +63,7 @@ export const pageQuery = graphql`
 `
 
 export const Head = () => (
-    <Seo title={"Blog and news"} description={"A sporadically populated blog; news, stories, tips"} />
+    <Seo title={"Blog and news"}
+         description={"A sporadically populated blog; news, stories, tips"}
+    />
 )