feat: improve seo (#112)

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";

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";

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<Metadata> {
+export async function generateMetadata(
+  { params }: TemplateProps,
+  state: unknown,
+): Promise<Metadata> {
   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}`,
     },
   };
 }

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";

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

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"] });
 

apps/dashboard/src/components/LeftPanel/SplashSection.tsx

@@ -29,6 +29,9 @@ export function SplashSection() {
           </Button>
         </DropdownMenu.Trigger>
         <DropdownMenu.Content variant="soft">
+          <DropdownMenu.Item asChild>
+            <Link href="/templates">Browse templates</Link>
+          </DropdownMenu.Item>
           <DropdownMenu.Item asChild>
             <Link href="/my-images">My images</Link>
           </DropdownMenu.Item>

apps/dashboard/src/components/Splash/HomeSplash.tsx

@@ -10,8 +10,8 @@ export function HomeSplash() {
     <>
       <Flex direction="column" gap="4">
         <Flex align="center" justify="between">
-          <Heading as="h2" size="5" weight="regular">
-            Templates
+          <Heading as="h1" size="5" weight="regular">
+            Free Open Graph templates
           </Heading>
           <Button asChild color="gray" radius="full" variant="ghost">
             <Link href="/templates">
@@ -21,7 +21,12 @@ export function HomeSplash() {
           </Button>
         </Flex>
         <Flex gap="2" className="overflow-x-scroll max-w-[100vw] no-scrollbar">
-          {TEMPLATES.slice(0, 3).map((template) => (
+          {TEMPLATES.filter(
+            (template) =>
+              template.name === "Blog post" ||
+              template.name === "Space" ||
+              template.name === "AI Startup",
+          ).map((template) => (
             <OgImage
               elements={template.elements}
               href={`/templates/${toTemplateSlug(template)}`}

apps/dashboard/src/components/Splash/HomeSplashMyImages.tsx

@@ -17,7 +17,7 @@ export function HomeSplashMyImages() {
     <Flex direction="column" gap="4">
       <Flex align="center" justify="between">
         <Heading as="h2" size="5" weight="regular">
-          My images
+          My Open Graph images
         </Heading>
         <Button asChild color="gray" radius="full" variant="ghost">
           <Link href="/my-images">

apps/dashboard/src/components/Splash/MyImagesSplash.tsx

@@ -17,7 +17,7 @@ export function MyImagesSplash() {
     <Flex direction="column" gap="4">
       <Flex align="center" justify="between">
         <Heading as="h1" size="5" weight="regular">
-          My images
+          My Open Graph images
         </Heading>
         <Button asChild color="gray" radius="full" variant="ghost">
           <Link href="/">

apps/dashboard/src/components/Splash/TemplateSplash.tsx

@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { Button, Flex, Text } from "@radix-ui/themes";
+import { Button, Flex, Heading, Text } from "@radix-ui/themes";
 import { ArrowLeftIcon } from "../icons/ArrowLeftIcon";
 import type { Template } from "../../lib/templates";
 import { OgImageInnerServer } from "../OgImage";
@@ -14,7 +14,9 @@ export function TemplateSplash({ template }: TemplateSplashProps) {
   return (
     <Flex direction="column" gap="4">
       <Flex align="center" justify="between">
-        <Text size="5">{template.name} template</Text>
+        <Heading as="h1" size="5" weight="regular">
+          {template.name} template
+        </Heading>
         <Button asChild color="gray" radius="full" variant="ghost">
           <Link href="/templates">
             <ArrowLeftIcon />

apps/dashboard/src/components/Splash/TemplatesSplash.tsx

@@ -9,7 +9,7 @@ export function TemplatesSplash() {
     <Flex direction="column" gap="4">
       <Flex align="center" justify="between">
         <Heading as="h1" size="5" weight="regular">
-          All templates
+          All free Open Graph templates
         </Heading>
         <Button asChild color="gray" radius="full" variant="ghost">
           <Link href="/">

apps/dashboard/src/lib/templates.ts

@@ -733,4 +733,4 @@ export const TEMPLATES = [
       },
     ],
   },
-] satisfies Template[];
+] as const satisfies Template[];