Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v3 - open graph image dimensions #602

Merged
merged 3 commits into from
Sep 11, 2024
Merged

v3 - open graph image dimensions #602

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b74e7e3
feat(openGraph): ensure 1200x630 with transparent fill
mathiazom Sep 10, 2024
5783740
refactor(seo): common open graph image dimensions constant
mathiazom Sep 10, 2024
018785d
feat(openGraph): add recommended dimensions in seo image description
mathiazom Sep 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions src/app/api/openGraphImage/route.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -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,
},
);
}
26 changes: 22 additions & 4 deletions src/utils/seo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,11 @@ type CompanyInfo = {
defaultSEO: SeoData;
mathiazom marked this conversation as resolved.
Show resolved Hide resolved
};

export const OPEN_GRAPH_IMAGE_DIMENSIONS = {
anemne marked this conversation as resolved.
Show resolved Hide resolved
width: 1200,
height: 630,
};

export async function fetchSeoData(
query: string,
variables?: any,
Expand Down Expand Up @@ -81,8 +86,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;
Expand All @@ -96,8 +105,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: OPEN_GRAPH_IMAGE_DIMENSIONS.width.toString(),
h: OPEN_GRAPH_IMAGE_DIMENSIONS.height.toString(),
fit: "fill",
fm: "png", // required for transparent
bg: "00000000", // transparent
})}`;
const imageUrl = sanityImageUrl
? `${sanityImageUrl}${sanityImageParams}`
: fallbackImageUrl;

return {
title: title,
Expand Down
2 changes: 1 addition & 1 deletion studio/schemas/objects/seo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).",
}),
],
});
Expand Down