Merge pull request #164 from rush-db/feature/update-seo

SEO Optimizations

Author: 1pxone

.changeset/wet-lies-jump.md

@@ -0,0 +1,9 @@
+---
+'rushdb-dashboard': patch
+'rushdb-website': patch
+'rushdb-docs': patch
+'@rushdb/javascript-sdk': patch
+'rushdb-core': patch
+---
+
+SEO Optimizations

platform/dashboard/package.json

@@ -47,6 +47,7 @@
     "react-day-picker": "^8.8.2",
     "react-dom": "18.2.0",
     "react-force-graph": "^1.45.4",
+    "react-helmet-async": "^2.0.5",
     "react-hook-form": "~7.41.0",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7",

platform/dashboard/src/layout/AuthLayout/index.tsx

@@ -1,4 +1,4 @@
-import { useState, type ReactNode } from 'react'
+import React, { useState, type ReactNode } from 'react'
 
 import { Logo } from '~/elements/Logo'
 import { cn } from '~/lib/utils'
@@ -8,19 +8,50 @@ import { motion } from 'framer-motion'
 import createVideo from '~/assets/videos/create.mp4'
 import deleteVideo from '~/assets/videos/delete.mp4'
 import searchVideo from '~/assets/videos/search.mp4'
+import { Helmet } from 'react-helmet-async'
 
 const videos = [searchVideo, createVideo, deleteVideo]
 
+export const signupTitle = 'Sign Up – RushDB'
+export const signupDescription =
+  'Create your RushDB account. Set up a graph database in seconds—no config, no hassle. Perfect for AI, SaaS, and ML projects.'
+
+export const signinTitle = 'Sign In – RushDB'
+export const signinDescription =
+  'Access your RushDB dashboard. Sign in to manage your graph-powered projects, run queries, and build AI-ready apps instantly.'
+
+export const restoreTitle = 'Reset Password – RushDB'
+export const restoreDescription =
+  'Forgot your password? Reset it securely and get back to building with RushDB — your zero-config graph database for AI and modern apps.'
+
+export const notFoundTitle = 'Page Not Found – RushDB'
+export const notFoundDescription =
+  'This page doesn’t exist or has been moved. Head back to RushDB to explore the zero-config graph database for AI and modern apps.'
+
+export const defaultTitle = 'RushDB – Instant Graph Database for AI & Modern Apps'
+export const defaultDescription =
+  'RushDB is a zero-config, graph-powered database built for AI, SaaS, and ML. Fast queries, seamless scaling, no setup. Try it now!'
+
+const metadataMap = {
+  signin: { title: signinTitle, description: signinDescription },
+  signup: { title: signupTitle, description: signupDescription },
+  recover: { title: restoreTitle, description: restoreDescription },
+  '404': { title: notFoundTitle, description: notFoundDescription }
+}
+
 export function AuthLayout({
   children,
   className,
   title,
+  type,
   ...props
-}: TPolymorphicComponentProps<'div', { title?: ReactNode }>) {
+}: TPolymorphicComponentProps<'div', { title?: ReactNode; type: 'signin' | 'signup' | 'recover' | '404' }>) {
   const [videoIdx, setVideoIdx] = useState(0)
 
   const videoSrc = videos[videoIdx]
 
+  const meta = metadataMap[type] ?? { title: defaultTitle, description: defaultDescription }
+
   return (
     <div
       className={cn(
@@ -29,6 +60,11 @@ export function AuthLayout({
       )}
       {...props}
     >
+      <Helmet>
+        <title>{meta.title}</title>
+        <meta name="description" content={meta.description} />
+      </Helmet>
+
       <motion.video
         src={videoSrc}
         autoPlay
@@ -39,19 +75,15 @@ export function AuthLayout({
         initial={{ opacity: 0 }}
         animate={{ opacity: 0.2 }}
         transition={{ duration: 0.5 }}
-        onEnded={() =>
-          setVideoIdx((currentIdx) => (currentIdx + 1) % videos.length)
-        }
+        onEnded={() => setVideoIdx((currentIdx) => (currentIdx + 1) % videos.length)}
       />
 
-      <main className="relative z-10 flex w-full max-w-xl flex-col items-stretch gap-5 sm:rounded-md sm:border sm:bg-fill/60 sm:p-5 sm:backdrop-blur-sm">
+      <main className="sm:bg-fill/60 relative z-10 flex w-full max-w-xl flex-col items-stretch gap-5 sm:rounded-md sm:border sm:p-5 sm:backdrop-blur-sm">
         <Logo className="mx-auto" />
 
-        {title ? (
-          <h1 className="mb-5 text-center text-2xl font-bold leading-tight tracking-tight">
-            {title}
-          </h1>
-        ) : null}
+        {title ?
+          <h1 className="mb-5 text-center text-2xl font-bold leading-tight tracking-tight">{title}</h1>
+        : null}
 
         {children}
       </main>

platform/dashboard/src/main.tsx

@@ -4,13 +4,16 @@ import 'virtual:svg-icons-register'
 
 import { App } from './App'
 import './index.css'
+import { HelmetProvider } from 'react-helmet-async'
 
 if (import.meta.env.NODE_ENV === 'development') {
   import('~/lib/logger')
 }
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <React.StrictMode>
-    <App />
+    <HelmetProvider>
+      <App />
+    </HelmetProvider>
   </React.StrictMode>
 )

platform/dashboard/src/pages/404.tsx

@@ -4,16 +4,11 @@ import { getRoutePath } from '~/lib/router'
 
 export function NotFoundPage() {
   return (
-    <AuthLayout>
+    <AuthLayout type="404">
       <div className="grid h-full place-content-center place-items-center gap-2">
         <h1 className="text-3xl font-bold">404</h1>
 
-        <Button
-          as="a"
-          href={getRoutePath('home')}
-          size="large"
-          variant="primary"
-        >
+        <Button as="a" href={getRoutePath('home')} size="large" variant="primary">
           Return to Sign In page
         </Button>
       </div>

platform/dashboard/src/pages/forgot-password.tsx

@@ -137,7 +137,7 @@ export function PasswordRecoveryPage() {
   const { token } = searchParams
 
   return (
-    <AuthLayout title={'Recover your RushDB account'}>
+    <AuthLayout title={'Recover your RushDB account'} type="recover">
       {token ?
         <ChangePasswordForm token={token} />
       : <SendPasswordForm />}

platform/dashboard/src/pages/signin.tsx

@@ -94,7 +94,7 @@ export function SignInPage() {
 
   if (platformSettings.loading) {
     return (
-      <AuthLayout title={'Sign in to RushDB'}>
+      <AuthLayout title={'Sign in to RushDB'} type="signin">
         <div className="m-auto flex content-center items-center justify-between">
           <Spinner />
         </div>
@@ -103,7 +103,7 @@ export function SignInPage() {
   }
 
   return (
-    <AuthLayout title={'Sign in to RushDB'}>
+    <AuthLayout title={'Sign in to RushDB'} type="signin">
       {hasOauth ?
         <>
           <div className="flex w-full justify-between gap-2">

platform/dashboard/src/pages/signup.tsx

@@ -78,7 +78,7 @@ export function SignUpPage() {
 
   if (platformSettings.loading) {
     return (
-      <AuthLayout title={'Sign in to RushDB'}>
+      <AuthLayout title={'Sign in to RushDB'} type="signin">
         <div className="m-auto flex content-center items-center justify-between">
           <Spinner />
         </div>
@@ -87,7 +87,7 @@ export function SignUpPage() {
   }
 
   return (
-    <AuthLayout title={'Create new RushDB account'}>
+    <AuthLayout title={'Create new RushDB account'} type="signup">
       {hasOauth ?
         <>
           <div className="flex w-full justify-between gap-2">

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-import { CSSProperties, PropsWithoutRef, forwardRef, ReactNode, Children } from 'react'
+import { CSSProperties, PropsWithoutRef, forwardRef, ReactNode, Children, useState, useEffect } from 'react'
 import { materialDark as codeTheme } from 'react-syntax-highlighter/dist/cjs/styles/prism'
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'
 import cx from 'classnames'
@@ -56,6 +56,17 @@ export const CodeBlock = forwardRef<
     },
     ref
   ) => {
+    const [isClient, setIsClient] = useState(false)
+
+    useEffect(() => {
+      // Ensures this runs only in the browser
+      setIsClient(true)
+    }, [])
+
+    if (!isClient) {
+      return <div className="text-content3 text-sm italic">Loading code snippet...</div>
+    }
+
     return (
       <div className={cx('sm:text-[14px]', className)} ref={ref} style={style}>
         <SyntaxHighlighter

website/src/components/CodeBlock.tsx

@@ -1,12 +1,16 @@
 import Head from 'next/head'
 import { useRouter } from 'next/router'
 import { getAbsoluteURL } from '~/utils'
+import { metaThemeColor } from '~/config/theme'
 
 export const defaultTitle = 'RushDB – Instant Graph Database for AI & Modern Apps'
 
 export const defaultDescription =
   'RushDB is a zero-config, graph-powered database built for AI, SaaS, and ML. Fast queries, seamless scaling, no setup. Try it now!'
 
+export const defaultKeywords =
+  'RushDB, Firebase alternative, Supabase alternative, Neo4j, AI database, graph database, vector database, knowledge graph, NoSQL database, scalable database, cloud database, open source database, serverless database, AI embeddings, vector search, time-series database, backend as a service, REST API, data-intensive apps, developer-friendly database'
+
 export const Meta = ({
   title = defaultTitle,
   description = defaultDescription,
@@ -24,11 +28,13 @@ export const Meta = ({
     <Head>
       <meta name="viewport" content="width=device-width, initial-scale=1" />
       <meta charSet="utf-8" />
-      <meta name="theme-color" content="hsl(223.81, 0%, 13.34%)" />
+      <meta name="theme-color" content={metaThemeColor} />
+      <link rel="icon" href="/favicon.ico" />
 
       {/* HTML Meta Tags */}
       <title>{titleWithSuffix}</title>
       <meta name="description" content={description} />
+      <meta name="keywords" content={defaultKeywords} />
 
       {/*Facebook Meta Tags */}
       <meta property="og:url" content={getAbsoluteURL(router.asPath)} />

website/src/components/Meta.tsx

@@ -2,14 +2,15 @@ import '~/styles/globals.css'
 import type { AppProps } from 'next/app'
 
 import { jetBrainsMono, manrope } from '~/styles/fonts'
-import React, { useRef } from 'react'
+import React, { useMemo } from 'react'
 import cx from 'classnames'
 import { CodingLanguageProvider } from '~/contexts/CodingLanguage'
 import Script from 'next/script'
 import { generateJsonLd } from '~/utils/jsonLd'
 import { useRouter } from 'next/router'
 import { getAbsoluteURL } from '~/utils'
 import Head from 'next/head'
+import { metaThemeColor } from '~/config/theme'
 
 const isProd = process.env.NODE_ENV === 'production'
 
@@ -19,42 +20,54 @@ gtag('js', new Date());
 gtag('config', 'G-Y678D4CC1J');`
 
 export default function App({ Component, pageProps }: AppProps) {
-  const ref = useRef<HTMLElement>(null)
-
   const router = useRouter()
-
   const route = router.asPath
 
-  let jsonLdData = [
-    generateJsonLd('breadcrumb', {
-      items: [
-        { name: 'Home', url: 'https://rushdb.com/' },
-        ...route
-          .split('/')
-          .filter((p) => p)
-          .map((p, index, arr) => ({
-            name: p.charAt(0).toUpperCase() + p.slice(1).replace('-', ' '),
-            url: getAbsoluteURL(`/${arr.slice(0, index + 1).join('/')}`)
-          }))
-      ]
-    })
-  ]
-  if (route === '/') {
-    jsonLdData.push(generateJsonLd('homepage', {}))
-  } else if (route === '/blog') {
-    jsonLdData.push(generateJsonLd('blogRoot', {}))
-  } else if (route === '/pricing') {
-    jsonLdData.push(generateJsonLd('pricing', {}))
-  } else if (route === '/privacy-policy') {
-    jsonLdData.push(generateJsonLd('legal', { url: getAbsoluteURL(route), name: 'Privacy Policy' }))
-  } else if (route === '/terms-of-service') {
-    jsonLdData.push(generateJsonLd('legal', { url: getAbsoluteURL(route), name: 'Terms of Service' }))
-  }
+  const jsonLdData = useMemo(() => {
+    const items = route
+      .split('/')
+      .filter(Boolean)
+      .map((p, index, arr) => ({
+        name: p.charAt(0).toUpperCase() + p.slice(1).replace('-', ' '),
+        url: getAbsoluteURL(`/${arr.slice(0, index + 1).join('/')}`)
+      }))
+
+    const data = [
+      generateJsonLd('breadcrumb', { items: [{ name: 'Home', url: 'https://rushdb.com/' }, ...items] })
+    ]
+
+    if (route === '/') {
+      data.push(generateJsonLd('homepage', {}))
+    } else if (route === '/blog') {
+      data.push(generateJsonLd('blogRoot', {}))
+    } else if (route === '/pricing') {
+      data.push(generateJsonLd('pricing', {}))
+    } else if (route === '/privacy-policy') {
+      data.push(generateJsonLd('legal', { url: getAbsoluteURL(route), name: 'Privacy Policy' }))
+    } else if (route === '/terms-of-service') {
+      data.push(generateJsonLd('legal', { url: getAbsoluteURL(route), name: 'Terms of Service' }))
+    }
+
+    return data
+  }, [route])
 
   return (
     <>
       <Head>
+        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+        <link rel="icon" type="image/png" href="/favicon.png" />
+        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+        <link rel="manifest" href="/site.webmanifest" />
+        <meta name="msapplication-TileColor" content={metaThemeColor} />
+        <meta name="theme-color" content={metaThemeColor} />
+        <link rel="preconnect" href="https://fonts.googleapis.com" crossOrigin="anonymous" />
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+
         <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLdData) }} />
+
+        <meta name="referrer" content="strict-origin-when-cross-origin" />
       </Head>
       <style jsx global>{`
         html,
@@ -71,7 +84,7 @@ export default function App({ Component, pageProps }: AppProps) {
         </>
       )}
 
-      <main className={cx(jetBrainsMono.variable, manrope.variable)} ref={ref}>
+      <main className={cx(jetBrainsMono.variable, manrope.variable)}>
         <CodingLanguageProvider>
           <Component {...pageProps} />
         </CodingLanguageProvider>