From b74e7e36d87599435c92e21a9cdc25af15639411 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Tue, 10 Sep 2024 14:08:25 +0200
Subject: [PATCH 1/3] feat(openGraph): ensure 1200x630 with transparent fill

---
 src/utils/seo.ts | 21 +++++++++++++++++----
 1 file changed, 17 insertions(+), 4 deletions(-)

diff --git a/src/utils/seo.ts b/src/utils/seo.ts
index 7a2fb2113..c8324a53a 100644
--- a/src/utils/seo.ts
+++ b/src/utils/seo.ts
@@ -81,8 +81,12 @@ export async function generateMetadataFromSeo(
 ): Promise<Metadata> {
   const companyInfo = await fetchCompanyInfo();
 
-  const title = seo?.title || companyInfo?.siteMetadata?.siteName || "Variant";
-  const description = seo?.description;
+  const title =
+    seo?.title ||
+    companyInfo?.defaultSEO?.title ||
+    companyInfo?.siteMetadata?.siteName ||
+    "Variant";
+  const description = seo?.description || companyInfo?.defaultSEO?.description;
   const keywords = seo?.keywords || "";
 
   const favicon = companyInfo?.brandAssets?.favicon;
@@ -96,8 +100,17 @@ export async function generateMetadataFromSeo(
     title: title,
     ...(description ? { description: description } : {}),
   })}`;
-  const imageUrl =
-    seo?.imageUrl || companyInfo?.defaultSEO?.imageUrl || fallbackImageUrl;
+  const sanityImageUrl = seo?.imageUrl || companyInfo?.defaultSEO?.imageUrl;
+  const sanityImageParams = `?${new URLSearchParams({
+    w: "1200",
+    h: "630",
+    fit: "fill",
+    fm: "png", // required for transparent
+    bg: "00000000", // transparent
+  })}`;
+  const imageUrl = sanityImageUrl
+    ? `${sanityImageUrl}${sanityImageParams}`
+    : fallbackImageUrl;
 
   return {
     title: title,

From 5783740fa75d327d442f4f07b344250c5ea56e11 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Tue, 10 Sep 2024 14:12:56 +0200
Subject: [PATCH 2/3] refactor(seo): common open graph image dimensions
 constant

---
 src/app/api/openGraphImage/route.tsx | 5 +++--
 src/utils/seo.ts                     | 9 +++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/app/api/openGraphImage/route.tsx b/src/app/api/openGraphImage/route.tsx
index 8a7dc6e89..cb05e1169 100644
--- a/src/app/api/openGraphImage/route.tsx
+++ b/src/app/api/openGraphImage/route.tsx
@@ -1,6 +1,7 @@
 import { ImageResponse } from "next/og";
 import { NextRequest } from "next/server";
 import OpenGraphImage from "./OpenGraphImage";
+import { OPEN_GRAPH_IMAGE_DIMENSIONS } from "../../../utils/seo";
 
 export async function GET(request: NextRequest) {
   const searchParams = request.nextUrl.searchParams;
@@ -9,8 +10,8 @@ export async function GET(request: NextRequest) {
   return new ImageResponse(
     <OpenGraphImage title={title} description={description ?? undefined} />,
     {
-      width: 1200,
-      height: 630,
+      width: OPEN_GRAPH_IMAGE_DIMENSIONS.width,
+      height: OPEN_GRAPH_IMAGE_DIMENSIONS.height,
     },
   );
 }
diff --git a/src/utils/seo.ts b/src/utils/seo.ts
index c8324a53a..3420aa9ea 100644
--- a/src/utils/seo.ts
+++ b/src/utils/seo.ts
@@ -29,6 +29,11 @@ type CompanyInfo = {
   defaultSEO: SeoData;
 };
 
+export const OPEN_GRAPH_IMAGE_DIMENSIONS = {
+  width: 1200,
+  height: 630,
+};
+
 export async function fetchSeoData(
   query: string,
   variables?: any,
@@ -102,8 +107,8 @@ export async function generateMetadataFromSeo(
   })}`;
   const sanityImageUrl = seo?.imageUrl || companyInfo?.defaultSEO?.imageUrl;
   const sanityImageParams = `?${new URLSearchParams({
-    w: "1200",
-    h: "630",
+    w: OPEN_GRAPH_IMAGE_DIMENSIONS.width.toString(),
+    h: OPEN_GRAPH_IMAGE_DIMENSIONS.height.toString(),
     fit: "fill",
     fm: "png", // required for transparent
     bg: "00000000", // transparent

From 018785db4f1159b5df3a2297298810a42ef87472 Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Tue, 10 Sep 2024 14:27:19 +0200
Subject: [PATCH 3/3] feat(openGraph): add recommended dimensions in seo image
 description

---
 studio/schemas/objects/seo.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/studio/schemas/objects/seo.ts b/studio/schemas/objects/seo.ts
index af7189e7f..8f6bb4603 100644
--- a/studio/schemas/objects/seo.ts
+++ b/studio/schemas/objects/seo.ts
@@ -56,7 +56,7 @@ const seo = defineField({
       title: "Social Media Image",
       type: "image",
       description:
-        "A compelling image for social media can greatly improve conversion rates, even though it doesn't directly affect SEO.",
+        "A compelling image for social media can greatly improve conversion rates, even though it doesn't directly affect SEO. Recommended dimensions: 1200x630 (landscape).",
     }),
   ],
 });