fix(seo): enhance metadata for better search engine visibility

iamadarsh1994 · Sep 25, 2024 · 1fc8714 · 1fc8714
1 parent 12cb3ae
commit 1fc8714
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 33 deletions.
diff --git a/apps/www/app/layout.tsx b/apps/www/app/layout.tsx
@@ -5,21 +5,13 @@ import { RootProvider } from "fumadocs-ui/provider";
 import { RuruProvider } from "ruru-ui/provider";
 import { GeistSans } from "geist/font/sans";
 import { GeistMono } from "geist/font/mono";
-import { baseUrl, createMetadata } from "@/utils/metadata";
+import { createMetadata } from "@/utils/metadata";
 import "./global.css";
 import "fumadocs-ui/style.css";
 import "fumadocs-ui/twoslash.css";
 import { CSPostHogProvider } from "./providers";
 
-export const metadata = createMetadata({
-  title: {
-    template: "%s | Ruru UI",
-    default: "Ruru UI",
-  },
-  description:
-    "Ruru UI is a design system for building classic web applications.",
-  metadataBase: baseUrl,
-});
+export const metadata = createMetadata({});
 
 export const viewport: Viewport = {
   themeColor: [
@@ -36,12 +28,6 @@ export default function Layout({ children }: { children: ReactNode }) {
       suppressHydrationWarning
     >
       <body>
-        <head>
-          <meta
-            name="google-site-verification"
-            content="NyaIMHJt9--uZGUgzJpGQPNcUJtVLtvaEkodqOuJ7-I"
-          />
-        </head>
         <CSPostHogProvider>
           <RootProvider>
             <RuruProvider>

diff --git a/apps/www/utils/metadata.ts b/apps/www/utils/metadata.ts
@@ -1,27 +1,38 @@
 import type { Metadata } from "next/types";
 
+const TITLE = "Ruru UI - Customizable Interfaces for Web Applications";
+const DESCRIPTION =
+  "Ruru UI is the ultimate design system and UI library for creating seamless, beautiful, and highly customizable user interfaces for classic web applications.";
+const BASE_URL = "https://ruru-ui.vercel.app";
+const BANNER_IMAGE = {
+  url: `${BASE_URL}/assets/banner.jpg`,
+  width: 1200,
+  height: 567,
+  alt: "Ruru UI Banner",
+};
+
 export function createMetadata(override: Metadata): Metadata {
   return {
-    ...override,
+    title: {
+      template: "%s | Ruru UI",
+      default: TITLE,
+    },
+    description: DESCRIPTION,
+    metadataBase: new URL(BASE_URL),
     openGraph: {
-      title: override.title ?? undefined,
-      description: override.description ?? undefined,
-      url: "https://ruru-ui.vercel.app",
-      images: [
-        {
-          url: "https://ruru-ui.vercel.app/assets/banner.jpg",
-          width: 1200,
-          height: 567,
-          alt: "ruru-ui",
-        },
-      ],
+      title: TITLE,
+      description: DESCRIPTION,
+      url: BASE_URL,
+      images: [BANNER_IMAGE],
       siteName: "Ruru UI",
+      type: "website",
       ...override.openGraph,
     },
+    twitter: {
+      card: "summary_large_image",
+      title: TITLE,
+      description: DESCRIPTION,
+      images: [BANNER_IMAGE.url],
+    },
   };
 }
-
-export const baseUrl =
-  process.env.NODE_ENV === "development"
-    ? new URL("http://localhost:3000")
-    : new URL(`https://${process.env.VERCEL_URL!}`);