Update metadata for SEO

CHANGES.md

@@ -3,6 +3,7 @@
 ## Changes
 
 - Add sitemap.xml
+- Update metadata for SEO
 - ...
 
 # Version 1.0.4

src/app/(auth)/email-callback/page.tsx

@@ -1,10 +1,16 @@
+import type { Metadata } from "next";
+
 import { redirect } from "next/navigation";
 
 import { EmailCallback } from "@/components/auth/email-callback";
 import { Shell } from "@/components/ui/shell";
 import { appwriteUrl } from "@/lib/envClient";
 import { SSOCallbackSchema } from "@/lib/validators/schema";
 
+export const metadata: Metadata = {
+  title: "Email Callback",
+};
+
 interface EmailCallbackPageProps {
   searchParams: Record<string, string | string[] | undefined>;
 }

src/app/(auth)/email-changed/page.tsx

@@ -56,7 +56,7 @@ export default function EmailChangedPage() {
       <Image
         src="/auth/undraw_moving.svg"
         className="h-auto w-[36rem] object-contain"
-        alt="undraw moving illustration"
+        alt="Confirmation image for email changed in recommen.do account"
         width={576}
         height={576}
       />

src/app/(auth)/forgot-callback/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from "next";
+
 import { redirect } from "next/navigation";
 
 import { FormForgot } from "@/components/auth/form-forgot";
@@ -6,6 +8,10 @@ import { Shell } from "@/components/ui/shell";
 import { appwriteUrl } from "@/lib/envClient";
 import { SSOCallbackSchema } from "@/lib/validators/schema";
 
+export const metadata: Metadata = {
+  title: "Forgot Callback",
+};
+
 interface ForgotCallbackPageProps {
   searchParams: Record<string, string | string[] | undefined>;
 }

src/app/(auth)/sign-in/page.tsx

@@ -7,8 +7,7 @@ import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle }
 import { Shell } from "@/components/ui/shell";
 
 export const metadata: Metadata = {
-  title: "Sign in",
-  description: "Sign in to your account",
+  title: "Sign In",
 };
 
 export default function SignInPage() {

src/app/(auth)/sign-in/verify/page.tsx

@@ -8,8 +8,7 @@ import { Icons } from "@/components/ui/icons";
 import { Shell } from "@/components/ui/shell";
 
 export const metadata: Metadata = {
-  title: "Verify",
-  description: "Verify your account",
+  title: "Verify account",
 };
 
 export default function VerifyEmailPage({ searchParams }: { searchParams: { email: string } }) {
@@ -40,7 +39,7 @@ export default function VerifyEmailPage({ searchParams }: { searchParams: { emai
       <Image
         src="/auth/undraw_verified.svg"
         className="h-auto w-[36rem] object-contain"
-        alt="undraw verified illustration"
+        alt="Confirmation image for email verification in recommen.do account"
         width={576}
         height={576}
       />

src/app/(auth)/sign-up/page.tsx

@@ -8,7 +8,6 @@ import { Shell } from "@/components/ui/shell";
 
 export const metadata: Metadata = {
   title: "Sign Up",
-  description: "Sign up for an account",
 };
 
 export default function SignUpPage() {

src/app/(auth)/sso-callback/page.tsx

@@ -1,10 +1,16 @@
+import type { Metadata } from "next";
+
 import { redirect } from "next/navigation";
 
 import { SSOCallback } from "@/components/auth/sso-callback";
 import { Shell } from "@/components/ui/shell";
 import { appwriteUrl } from "@/lib/envClient";
 import { SSOCallbackSchema } from "@/lib/validators/schema";
 
+export const metadata: Metadata = {
+  title: "SSO Callback",
+};
+
 interface SSOCallbackPageProps {
   searchParams: Record<string, string | string[] | undefined>;
 }

src/app/(mdx)/about/page.tsx

@@ -1,5 +1,11 @@
+import type { Metadata } from "next";
+
 import About from "./about.mdx";
 
+export const metadata: Metadata = {
+  title: "About Us",
+};
+
 export default function AboutPage() {
   return (
     <section id="about_page">

src/app/(mdx)/contact/page.tsx

@@ -1,7 +1,13 @@
+import type { Metadata } from "next";
+
 import Link from "next/link";
 
 import { FormContact } from "@/components/contact/contact-form";
 
+export const metadata: Metadata = {
+  title: "Contact Us",
+};
+
 export default function ContactPage() {
   return (
     <section id="contact_page">

src/app/(mdx)/cookies/page.tsx

@@ -1,5 +1,11 @@
+import type { Metadata } from "next";
+
 import Cookies from "./cookies.mdx";
 
+export const metadata: Metadata = {
+  title: "Cookies Policy",
+};
+
 export default function CookiesPage() {
   return (
     <section id="cookies_page">

src/app/(mdx)/faq/page.tsx

@@ -1,8 +1,14 @@
+import type { Metadata } from "next";
+
 import Link from "next/link";
 
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
 import { appwriteUrl } from "@/lib/envClient";
 
+export const metadata: Metadata = {
+  title: "Frequently Asked Questions",
+};
+
 export default function FAQPage() {
   return (
     <section id="faq_page">

src/app/(mdx)/installation/page.tsx

@@ -1,3 +1,5 @@
+import type { Metadata } from "next";
+
 import Image from "next/image";
 import Link from "next/link";
 
@@ -7,6 +9,10 @@ import { Button } from "@/components/ui/button";
 import { Card, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
 import { Icons } from "@/components/ui/icons";
 
+export const metadata: Metadata = {
+  title: "Installation Guide",
+};
+
 export default function InstallationPage() {
   return (
     <section id="installation_page">
@@ -99,7 +105,7 @@ export default function InstallationPage() {
                       width={383}
                       height={636}
                       className="mx-auto rounded-lg lg:mx-0"
-                      alt="Screenshot of extension popup on OpenAI API key section"
+                      alt="Instructional image for entering API key in recommen.do settings"
                     />
                   </div>
                   <div>
@@ -125,7 +131,7 @@ export default function InstallationPage() {
                       width={450}
                       height={197}
                       className="mx-auto rounded-lg lg:mx-0"
-                      alt="Screenshot of extension popup on refill recommendations section"
+                      alt="Guide image for refilling recommendations in recommen.do settings"
                     />
                   </div>
                   <div>
@@ -153,7 +159,7 @@ export default function InstallationPage() {
                       width={450}
                       height={267}
                       className="mx-auto rounded-lg lg:mx-0"
-                      alt="Screenshot of extension popup on manage subscription section"
+                      alt="Image tutorial for updating plan in recommen.do account"
                     />
                   </div>
                   <div>

src/app/(mdx)/privacy/page.tsx

@@ -1,5 +1,11 @@
+import type { Metadata } from "next";
+
 import Privacy from "./privacy.mdx";
 
+export const metadata: Metadata = {
+  title: "Privacy Policy",
+};
+
 export default function PrivacyPage() {
   return (
     <section id="privacy_page">

src/app/(mdx)/terms/page.tsx

@@ -1,5 +1,11 @@
+import type { Metadata } from "next";
+
 import Terms from "./terms.mdx";
 
+export const metadata: Metadata = {
+  title: "Terms and Conditions",
+};
+
 export default function TermsPage() {
   return (
     <section id="terms_page">

src/app/(payment)/payment/cancel/page.tsx

@@ -56,7 +56,7 @@ export default function PaymentCancelPage() {
       <Image
         src="/payment/undraw_cancel.svg"
         className="h-auto w-[36rem] object-contain"
-        alt="undraw verified illustration"
+        alt="Notification image for canceled payment on recommen.do plan"
         width={576}
         height={576}
       />

src/app/(payment)/payment/error/page.tsx

@@ -56,7 +56,7 @@ export default function PaymentCancelPage() {
       <Image
         src="/payment/undraw_warning.svg"
         className="h-auto w-[36rem] object-contain"
-        alt="undraw verified illustration"
+        alt="Notification image for failed payment on recommen.do plan"
         width={576}
         height={576}
       />

src/app/(payment)/payment/success/page.tsx

@@ -56,7 +56,7 @@ export default function PaymentCancelPage() {
       <Image
         src="/payment/undraw_order_confirmed.svg"
         className="h-auto w-[36rem] object-contain"
-        alt="undraw verified illustration"
+        alt="Confirmation image for successful payment on recommen.do plans"
         width={576}
         height={576}
       />

src/app/layout.tsx

@@ -6,16 +6,54 @@ import { Init } from "@/components/_init/init-auth";
 import { Footer } from "@/components/layout/footer";
 import { Header } from "@/components/layout/header";
 import { Toaster } from "@/components/ui/toaster";
+import { siteConfig } from "@/lib/config/browser";
 import { cn } from "@/lib/helpers/utils";
 import ReactQueryProvider from "@/lib/providers/react-query";
 
 import "@/styles/globals.css";
 
+import type { Metadata } from "next";
+
+import { appwriteUrl } from "@/lib/envClient";
+
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata = {
-  title: "recommen.do",
-  description: "🛍️ Shop smarter and faster with recommen.do, your ultimate shopping companion!",
+export const metadata: Metadata = {
+  metadataBase: new URL(appwriteUrl),
+  alternates: {
+    canonical: "/",
+  },
+
+  title: {
+    default: siteConfig.name,
+    template: `%s - ${siteConfig.name}`,
+  },
+  description: siteConfig.description,
+  keywords: siteConfig.keywords,
+
+  openGraph: {
+    title: siteConfig.name,
+    description: siteConfig.description,
+    url: appwriteUrl,
+    siteName: siteConfig.name,
+    images: [
+      {
+        url: `${appwriteUrl}/cover.png`,
+        width: 1341,
+        height: 842,
+        alt: "Screenshot of recommen.do website",
+      },
+    ],
+    locale: "en_US",
+    type: "website",
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: siteConfig.name,
+    description: siteConfig.description,
+    site: appwriteUrl,
+    images: [`${appwriteUrl}/cover.png`],
+  },
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

src/app/profile/page.tsx

@@ -1,5 +1,11 @@
+import type { Metadata } from "next";
+
 import { Dashboard } from "@/components/profile/dashboard";
 
+export const metadata: Metadata = {
+  title: "Your profile",
+};
+
 export default function ProfilePage() {
   return (
     <div className="mx-auto max-w-7xl px-4 py-8">

src/components/frontpage/hero.tsx

@@ -51,7 +51,7 @@ export function Hero() {
               src="/frontpage/hero-img.png"
               height={1478}
               width={1060}
-              alt="Screenshot with recommen.do extension displayed"
+              alt="Screenshot of recommen.do extension working on websites like Amazon"
               priority
             />
           </div>

src/lib/config/browser.ts

@@ -1,5 +1,7 @@
 import type { BrowserDetails } from "@/lib/types/types";
 
+import { appwriteUrl } from "@/lib/envClient";
+
 export const browserDetails: BrowserDetails[] = [
   {
     name: "Mozilla Firefox",
@@ -44,3 +46,23 @@ export const browserDetails: BrowserDetails[] = [
     description: "Get extension for Vivaldi",
   },
 ];
+
+export const siteConfig = {
+  name: "recommen.do: AI-Powered Shopping Assistant",
+  url: appwriteUrl,
+  ogImage: `${appwriteUrl}/cover.png`,
+  description:
+    "🛍️Get shopping recommendations on Amazon, Newegg or Ebay, powered by OpenAI🤖. Enhance your online shopping experience with our browser extension",
+  links: {
+    github: "https://github.com/alexbacanu/recommen.do",
+  },
+  keywords: [
+    "OpenAI Product Recommendations",
+    "AI-Powered Browser Extension",
+    "Intelligent Shopping Enhancements for Chrome/Firefox/Edge",
+    "AI-Enabled Shopping on Amazon/Newegg/eBay",
+    "Smart Online Shopping Tool",
+  ],
+};
+
+export type SiteConfig = typeof siteConfig;