fix: Correctly set blog-set opengraph images

Signed-off-by: Alexander Jung <alex@unikraft.io>
unikraft · May 10, 2024 · 8af72a2 · 8af72a2
1 parent 8279cde
commit 8af72a2
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 10 deletions.
diff --git a/src/components/page-container.tsx b/src/components/page-container.tsx
@@ -78,7 +78,15 @@ function PageContainer(props: PageContainerProps) {
 
   return (
     <>
-      <SEO title={title} description={description} />
+      <SEO title={title} description={description} openGraph={{
+        title: title,
+        description: description,
+        images: [{
+          url: image,
+          width: 1200,
+          height: 630,
+        }]
+      }} />
       <Grid
         w='100vw'
         h='100vh'

diff --git a/src/components/seo.tsx b/src/components/seo.tsx
@@ -2,15 +2,34 @@ import { NextSeo, NextSeoProps } from 'next-seo'
 import React from 'react'
 import siteConfig from 'configs/site-config.json'
 
-export type SEOProps = Pick<NextSeoProps, 'title' | 'description'>
+export type SEOProps = Pick<NextSeoProps, 'title' | 'description' | 'openGraph'>
 
-const SEO = ({ title, description }: SEOProps) => (
-  <NextSeo
-    title={title}
-    description={description}
-    openGraph={{ title, description }}
-    titleTemplate={siteConfig.seo.titleTemplate}
-  />
-)
+const SEO = ({ title, description, openGraph }: SEOProps) => {
+  if (!openGraph) {
+    openGraph = {
+      title,
+      description,
+    }
+  }
+
+  if (openGraph && (!openGraph.images || openGraph.images.length === 0)) {
+    openGraph.images = [
+      {
+        url: "/og-image.png",
+        width: 1200,
+        height: 630,
+      },
+    ]
+  }
+
+  return (
+    <NextSeo
+      title={title}
+      description={description}
+      openGraph={openGraph}
+      titleTemplate={siteConfig.seo.titleTemplate}
+    />
+  )
+}
 
 export default SEO