From f3feeaadbc0685e9166c8e194885996079c86a55 Mon Sep 17 00:00:00 2001 From: Tom Lienard Date: Thu, 2 Jan 2025 10:57:36 +0100 Subject: [PATCH] fix: `og:url` metadata (#114) --- .../dashboard/src/app/(splash)/login/page.tsx | 3 ++ .../src/app/(splash)/my-images/page.tsx | 3 ++ .../src/app/(splash)/profile/page.tsx | 1 + .../app/(splash)/templates/[slug]/page.tsx | 16 +++------ .../src/app/(splash)/templates/page.tsx | 3 ++ .../tools/open-graph-image-checker/page.tsx | 3 ++ apps/dashboard/src/app/editor/page.tsx | 3 ++ apps/dashboard/src/app/layout.tsx | 33 +++++++------------ 8 files changed, 32 insertions(+), 33 deletions(-) diff --git a/apps/dashboard/src/app/(splash)/login/page.tsx b/apps/dashboard/src/app/(splash)/login/page.tsx index 47e7498..4b63a3f 100644 --- a/apps/dashboard/src/app/(splash)/login/page.tsx +++ b/apps/dashboard/src/app/(splash)/login/page.tsx @@ -5,6 +5,9 @@ import { GoogleIcon } from "../../../components/icons/GoogleIcon"; export const metadata = { title: "Sign in - OG Studio", + openGraph: { + url: "https://ogstudio.app/login", + }, }; export const dynamic = "force-static"; diff --git a/apps/dashboard/src/app/(splash)/my-images/page.tsx b/apps/dashboard/src/app/(splash)/my-images/page.tsx index a3aa549..9d4e517 100644 --- a/apps/dashboard/src/app/(splash)/my-images/page.tsx +++ b/apps/dashboard/src/app/(splash)/my-images/page.tsx @@ -2,6 +2,9 @@ import { MyImagesSplash } from "../../../components/Splash/MyImagesSplash"; export const metadata = { title: "My Open Graph images - OG Studio", + openGraph: { + url: "https://ogstudio.app/my-images", + }, }; export const dynamic = "force-static"; diff --git a/apps/dashboard/src/app/(splash)/profile/page.tsx b/apps/dashboard/src/app/(splash)/profile/page.tsx index 4b7304c..2517006 100644 --- a/apps/dashboard/src/app/(splash)/profile/page.tsx +++ b/apps/dashboard/src/app/(splash)/profile/page.tsx @@ -5,6 +5,7 @@ export const metadata: Metadata = { title: "Profile - OG Studio", openGraph: { type: "profile", + url: "https://ogstudio.app/profile", }, }; diff --git a/apps/dashboard/src/app/(splash)/templates/[slug]/page.tsx b/apps/dashboard/src/app/(splash)/templates/[slug]/page.tsx index 06a037e..b40813b 100644 --- a/apps/dashboard/src/app/(splash)/templates/[slug]/page.tsx +++ b/apps/dashboard/src/app/(splash)/templates/[slug]/page.tsx @@ -13,10 +13,9 @@ export function generateStaticParams() { return TEMPLATES.map((template) => ({ slug: template.name.toLowerCase() })); } -export async function generateMetadata( - { params }: TemplateProps, - state: unknown, -): Promise { +export async function generateMetadata({ + params, +}: TemplateProps): Promise { const { slug } = await params; const decodedSlug = decodeURIComponent(slug); @@ -31,13 +30,6 @@ export async function generateMetadata( }; } - const url = Object.getOwnPropertySymbols(state) - // @ts-expect-error -- safe - // eslint-disable-next-line @typescript-eslint/no-unsafe-return -- safe - .map((item) => state[item]) - // eslint-disable-next-line @typescript-eslint/no-unsafe-call, no-prototype-builtins, @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-shadow -- safe - .find((state) => state?.hasOwnProperty("url"))?.url?.pathname as string; - return { title: `${template.name} template - OG Studio`, description: `${template.description} Edit this free template in an intuitive, Figma-like visual editor, and export it to SVG/PNG or to a dynamic URL.`, @@ -49,7 +41,7 @@ export async function generateMetadata( `https://ogstudio.app/api/og/template/${toTemplateSlug(template)}`, )}`, type: "website", - url: `https://ogstudio.app${url}`, + url: `https://ogstudio.app/templates/${toTemplateSlug(template)}`, }, }; } diff --git a/apps/dashboard/src/app/(splash)/templates/page.tsx b/apps/dashboard/src/app/(splash)/templates/page.tsx index 468984d..26fd8d5 100644 --- a/apps/dashboard/src/app/(splash)/templates/page.tsx +++ b/apps/dashboard/src/app/(splash)/templates/page.tsx @@ -4,6 +4,9 @@ export const metadata = { title: "Templates - OG Studio", description: "Free, pre-made Open Graph image templates. Create static or dynamic OG (Open Graph) images with an intuitive, Figma-like visual editor.", + openGraph: { + url: "https://ogstudio.app/templates", + }, }; export const dynamic = "force-static"; diff --git a/apps/dashboard/src/app/(splash)/tools/open-graph-image-checker/page.tsx b/apps/dashboard/src/app/(splash)/tools/open-graph-image-checker/page.tsx index b02139f..8552c8f 100644 --- a/apps/dashboard/src/app/(splash)/tools/open-graph-image-checker/page.tsx +++ b/apps/dashboard/src/app/(splash)/tools/open-graph-image-checker/page.tsx @@ -7,6 +7,9 @@ export const metadata: Metadata = { title: "Open Graph Image Checker - OG Studio", description: "Free tool to check Open Graph meta tags of any website. Create static or dynamic OG (Open Graph) images with an intuitive, Figma-like visual editor.", + openGraph: { + url: "https://ogstudio.app/tools/open-graph-image-checker", + }, }; export default function Page() { diff --git a/apps/dashboard/src/app/editor/page.tsx b/apps/dashboard/src/app/editor/page.tsx index c0dfe37..d2760ac 100644 --- a/apps/dashboard/src/app/editor/page.tsx +++ b/apps/dashboard/src/app/editor/page.tsx @@ -2,6 +2,9 @@ import { Editor } from "../../components/Editor"; export const metadata = { title: "Editor - OG Studio", + openGraph: { + url: "https://ogstudio.app/editor", + }, }; export const dynamic = "force-static"; diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx index 45afd34..12f9732 100644 --- a/apps/dashboard/src/app/layout.tsx +++ b/apps/dashboard/src/app/layout.tsx @@ -6,27 +6,18 @@ import { type Metadata } from "next"; import { Providers } from "../components/Providers"; import "./globals.css"; -export function generateMetadata(_: unknown, state: unknown): Metadata { - const url = Object.getOwnPropertySymbols(state) - // @ts-expect-error -- safe - // eslint-disable-next-line @typescript-eslint/no-unsafe-return -- safe - .map((item) => state[item]) - // eslint-disable-next-line @typescript-eslint/no-shadow, @typescript-eslint/no-unsafe-call, no-prototype-builtins, @typescript-eslint/no-unsafe-member-access -- safe - .find((state) => state?.hasOwnProperty("url"))?.url?.pathname as string; - - return { - title: "OG Studio - Free Open Graph images editor", - description: - "Create static or dynamic OG (Open Graph) images with an intuitive, Figma-like visual editor. Browse ready-to-use templates, and export your images to SVG/PNG or to a dynamic URL.", - openGraph: { - siteName: "OG Studio", - images: - "https://github.com/QuiiBz/ogstudio/blob/main/assets/builder.jpeg?raw=true", - type: "website", - url: `https://ogstudio.app${url}`, - }, - }; -} +export const metadata: Metadata = { + title: "OG Studio - Free Open Graph images editor", + description: + "Create static or dynamic OG (Open Graph) images with an intuitive, Figma-like visual editor. Browse ready-to-use templates, and export your images to SVG/PNG or to a dynamic URL.", + openGraph: { + siteName: "OG Studio", + images: + "https://github.com/QuiiBz/ogstudio/blob/main/assets/builder.jpeg?raw=true", + type: "website", + url: "https://ogstudio.app", + }, +}; const inter = Inter({ subsets: ["latin"] });