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( , { - 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