feat(openGraph): ensure 1200x630 with transparent fill

varianter · Sep 10, 2024 · 3dc95c2 · 3dc95c2
1 parent bd1df00
commit 3dc95c2
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git 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,

diff --git a/studio/schemas/objects/seo.ts b/studio/schemas/objects/seo.ts
@@ -55,6 +55,9 @@ const seo = defineField({
       name: seoFieldID.image,
       title: "Social Media Image",
       type: "image",
+      options: {
+        hotspot: true,
+      },
       description:
         "A compelling image for social media can greatly improve conversion rates, even though it doesn't directly affect SEO.",
     }),