From 7bf99b103728e11cfd23a0b63b3b9774ae74ba6c Mon Sep 17 00:00:00 2001 From: Tom Lienard Date: Thu, 2 Jan 2025 10:31:19 +0100 Subject: [PATCH] feat: improve seo (#112) --- .../src/app/(splash)/my-images/page.tsx | 2 +- .../src/app/(splash)/profile/page.tsx | 6 +++- .../app/(splash)/templates/[slug]/page.tsx | 19 +++++++++--- .../src/app/(splash)/templates/page.tsx | 3 +- .../tools/open-graph-image-checker/page.tsx | 3 +- apps/dashboard/src/app/layout.tsx | 31 +++++++++++++------ .../components/LeftPanel/SplashSection.tsx | 3 ++ .../src/components/Splash/HomeSplash.tsx | 11 +++++-- .../components/Splash/HomeSplashMyImages.tsx | 2 +- .../src/components/Splash/MyImagesSplash.tsx | 2 +- .../src/components/Splash/TemplateSplash.tsx | 6 ++-- .../src/components/Splash/TemplatesSplash.tsx | 2 +- apps/dashboard/src/lib/templates.ts | 2 +- 13 files changed, 65 insertions(+), 27 deletions(-) diff --git a/apps/dashboard/src/app/(splash)/my-images/page.tsx b/apps/dashboard/src/app/(splash)/my-images/page.tsx index ab89820..a3aa549 100644 --- a/apps/dashboard/src/app/(splash)/my-images/page.tsx +++ b/apps/dashboard/src/app/(splash)/my-images/page.tsx @@ -1,7 +1,7 @@ import { MyImagesSplash } from "../../../components/Splash/MyImagesSplash"; export const metadata = { - title: "My images - OG Studio", + title: "My Open Graph images - OG Studio", }; 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 c40a66c..4b7304c 100644 --- a/apps/dashboard/src/app/(splash)/profile/page.tsx +++ b/apps/dashboard/src/app/(splash)/profile/page.tsx @@ -1,7 +1,11 @@ +import { type Metadata } from "next"; import { Profile } from "../../../components/Profile"; -export const metadata = { +export const metadata: Metadata = { title: "Profile - OG Studio", + openGraph: { + type: "profile", + }, }; export const dynamic = "force-static"; diff --git a/apps/dashboard/src/app/(splash)/templates/[slug]/page.tsx b/apps/dashboard/src/app/(splash)/templates/[slug]/page.tsx index 376c38e..06a037e 100644 --- a/apps/dashboard/src/app/(splash)/templates/[slug]/page.tsx +++ b/apps/dashboard/src/app/(splash)/templates/[slug]/page.tsx @@ -13,9 +13,10 @@ export function generateStaticParams() { return TEMPLATES.map((template) => ({ slug: template.name.toLowerCase() })); } -export async function generateMetadata({ - params, -}: TemplateProps): Promise { +export async function generateMetadata( + { params }: TemplateProps, + state: unknown, +): Promise { const { slug } = await params; const decodedSlug = decodeURIComponent(slug); @@ -30,15 +31,25 @@ 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, + 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.`, openGraph: { + siteName: "OG Studio", images: `https://ogstudio.app/api/og/MWI5enZ0YmJ6M3A2c3hzOnlkN21nNDl5eA==?title=${encodeURIComponent( `${template.name} template`, )}&description=${encodeURIComponent(template.description)}&image=${encodeURIComponent( `https://ogstudio.app/api/og/template/${toTemplateSlug(template)}`, )}`, + type: "website", + url: `https://ogstudio.app${url}`, }, }; } diff --git a/apps/dashboard/src/app/(splash)/templates/page.tsx b/apps/dashboard/src/app/(splash)/templates/page.tsx index 0e7d084..468984d 100644 --- a/apps/dashboard/src/app/(splash)/templates/page.tsx +++ b/apps/dashboard/src/app/(splash)/templates/page.tsx @@ -2,7 +2,8 @@ import { TemplatesSplash } from "../../../components/Splash/TemplatesSplash"; export const metadata = { title: "Templates - OG Studio", - description: "Free, pre-made Open Graph image templates.", + description: + "Free, pre-made Open Graph image templates. Create static or dynamic OG (Open Graph) images with an intuitive, Figma-like visual editor.", }; 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 8ab18ff..b02139f 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 @@ -5,7 +5,8 @@ export const dynamic = "force-static"; export const metadata: Metadata = { title: "Open Graph Image Checker - OG Studio", - description: "Free tool to check Open Graph meta tags of any website.", + 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.", }; export default function Page() { diff --git a/apps/dashboard/src/app/layout.tsx b/apps/dashboard/src/app/layout.tsx index 29466bb..45afd34 100644 --- a/apps/dashboard/src/app/layout.tsx +++ b/apps/dashboard/src/app/layout.tsx @@ -6,16 +6,27 @@ import { type Metadata } from "next"; import { Providers } from "../components/Providers"; import "./globals.css"; -export const metadata: Metadata = { - title: "OG Studio", - 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", - }, -}; +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}`, + }, + }; +} const inter = Inter({ subsets: ["latin"] }); diff --git a/apps/dashboard/src/components/LeftPanel/SplashSection.tsx b/apps/dashboard/src/components/LeftPanel/SplashSection.tsx index 2027664..5b68680 100644 --- a/apps/dashboard/src/components/LeftPanel/SplashSection.tsx +++ b/apps/dashboard/src/components/LeftPanel/SplashSection.tsx @@ -29,6 +29,9 @@ export function SplashSection() { + + Browse templates + My images diff --git a/apps/dashboard/src/components/Splash/HomeSplash.tsx b/apps/dashboard/src/components/Splash/HomeSplash.tsx index 2bb9f3d..a781820 100644 --- a/apps/dashboard/src/components/Splash/HomeSplash.tsx +++ b/apps/dashboard/src/components/Splash/HomeSplash.tsx @@ -10,8 +10,8 @@ export function HomeSplash() { <> - - Templates + + Free Open Graph templates - {TEMPLATES.slice(0, 3).map((template) => ( + {TEMPLATES.filter( + (template) => + template.name === "Blog post" || + template.name === "Space" || + template.name === "AI Startup", + ).map((template) => ( - My images + My Open Graph images