From dd09e7ac948202908c533100666d4289f4762a66 Mon Sep 17 00:00:00 2001
From: AlexandreGaubert <40125772+AlexandreGaubert@users.noreply.github.com>
Date: Tue, 10 Oct 2023 16:00:12 +0200
Subject: [PATCH] fix(seo): Add OG image for home (#2471)

Add special case for generating homepage og image
---
 gatsby-node.mjs            | 5 ++++-
 generate-og-images.mjs     | 4 ++--
 src/components/SEO/SEO.tsx | 8 +++++++-
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/gatsby-node.mjs b/gatsby-node.mjs
index 826edc408d..cd7fded809 100644
--- 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
index 93402b0ac8..af7935b4e1 100644
--- 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)
 };
\ No newline at end of file
diff --git a/src/components/SEO/SEO.tsx b/src/components/SEO/SEO.tsx
index e447be6610..13776daf79 100644
--- 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" />