fix(seo): Add OG image for home (#2471)

Add special case for generating homepage og image
Mergifyio · Oct 10, 2023 · dd09e7a · dd09e7a
1 parent 01ba132
commit dd09e7a
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 4 deletions.
diff --git a/gatsby-node.mjs b/gatsby-node.mjs
@@ -114,7 +114,10 @@ export const createPages = async ({actions, graphql}) => {
   await Promise.all(data.pages.nodes.map(async ({id, children, absolutePath}) => {
     const [{fields, frontmatter}] = children;
 
-    await generateImage(frontmatter.title, fields.slug)
+    if (fields.slug === '/')
+      await generateImage('Home', fields.slug)
+    else
+      await generateImage(frontmatter.title, fields.slug)
 
     await actions.createPage({
       path: fields.slug,

diff --git a/generate-og-images.mjs b/generate-og-images.mjs
@@ -35,7 +35,7 @@ const saveImage = (path, content) => {
 }
 
 export const generateImage = async (title, path) => {
-  if (path === '/' || title == null) return; // Skip Home page
+  if (title == null) return;
   registerFont('./static/fonts/Poppins-Light.ttf', {family: 'Poppins', weight: 300})
 
   const canvas = createCanvas(1200, 630)
@@ -69,5 +69,5 @@ export const generateImage = async (title, path) => {
   }
 
   const buffer = canvas.toBuffer('image/png')
-  saveImage(resolve(`./static/og-images/${removeTrailingSlash(path)}.png`), buffer)
+  saveImage(resolve(`./static/og-images/${path === '/' ? 'home' : removeTrailingSlash(path)}.png`), buffer)
 };
diff --git a/src/components/SEO/SEO.tsx b/src/components/SEO/SEO.tsx
@@ -29,6 +29,7 @@ export default function SEO({
     image: `${siteUrl}${image}`,
     url: `${siteUrl}${pathname || ''}`,
   };
+  const isHomepage = pathname === '/';
 
   return (
     <Helmet>
@@ -40,7 +41,12 @@ export default function SEO({
       <meta property="og:title" content={seo.longTitle} />
       <meta property="og:description" content={seo.description} />
       <meta property="og:url" content={seo.url} />
-      <meta property="og:image" content={`${siteUrl}/og-images${pathname || ''}.png`} />
+      <meta
+        property="og:image"
+        content={isHomepage
+          ? `${siteUrl}/og-images/home.png`
+          : `${siteUrl}/og-images${pathname || ''}.png`}
+      />
       <meta property="og:type" content="article" />
       <meta property="og:image:width" content="1200" />
       <meta property="og:image:height" content="630" />