Add Missing Metadata to Client Component Routes for Better SEO #11
Description
📋 Problem Description
Currently, several routes in the application are missing proper metadata (title, description) which impacts SEO and browser tab titles. While some server components already have metadata configured, client components that use the "use client" directive cannot export metadata directly and need alternative approaches.
🔍 Routes Analysis
✅ Routes WITH Metadata (Server Components) (Improvement Needed)
/seller- ✅ Has metadata/seller/new-event- ✅ Has metadata
❌ Routes MISSING Metadata (Client Components)
-
/(Home Page) -app/page.tsx- Missing: Title, description
- Current: Default Next.js title
-
/auth-app/auth/page.tsx- Missing: Title, description
- Current: "use client" component
-
/event/[id]-app/event/[id]/page.tsx- Missing: Dynamic title with event name, description
- Current: "use client" component with dynamic content
-
/profile-app/profile/page.tsx- Missing: Title, description
- Current: "use client" component
-
/search-app/search/page.tsx- Missing: Dynamic title with search query, description
- Current: "use client" component
-
/seller/events-app/seller/events/page.tsx- Missing: Title, description
- Current: "use client" component
-
/seller/events/[id]/edit-app/seller/events/[id]/edit/page.tsx- Missing: Dynamic title with event name, description
- Current: "use client" component
-
/tickets-app/tickets/page.tsx- Missing: Title, description
- Current: "use client" component
-
/tickets/[id]-app/tickets/[id]/page.tsx- Missing: Dynamic title with ticket info, description
- Current: "use client" component
-
/tickets/purchase-success-app/tickets/purchase-success/page.tsx- Missing: Title, description
- Current: "use client" component
-
/not-found-app/not-found.tsx- Missing: Title, description for 404 page
- Current: "use client" component
🎯 Solution Approach
Since these are client components, we need to use one of these approaches:
Option 1: Use Next.js useEffect with document.title
useEffect(() => {
document.title = "Page Title - Ticketr";
}, []);Option 2: Convert to Server Components (where possible)
Some components might not actually need "use client" and can be converted to server components.
Option 3: Use Next.js Head component from next/head
import Head from 'next/head';
// In component
<Head>
<title>Page Title - Ticketr</title>
<meta name="description" content="Page description" />
</Head>Option 4: Create wrapper Server Components
Create server component wrappers that export metadata and render the client component.
📝 Proposed Metadata Structure
Static Pages
// Example for /auth page
{
title: "Sign In - Ticketr",
description: "Sign in to your Ticketr account to buy and sell event tickets securely."
}Dynamic Pages
// Example for /event/[id] page
{
title: `${eventName} - Event Details | Ticketr`,
description: `Get tickets for ${eventName}. ${eventDescription}`
}✅ Acceptance Criteria
- All routes have proper page titles displayed in browser tabs
- All routes have SEO-friendly meta descriptions
- Dynamic routes include relevant information in titles (event names, search queries, etc.)
- Consistent branding with "Ticketr" in all titles
- Meta descriptions are between 150-160 characters
- All pages pass SEO audit tools
- No console errors related to metadata
🎨 Suggested Title/Description Format
Static Pages:
- Home: "Ticketr - Buy and Sell Event Tickets Securely"
- Auth: "Sign In - Ticketr"
- Profile: "My Profile - Ticketr"
- Tickets: "My Tickets - Ticketr"
- Seller Events: "My Events - Ticketr Seller Dashboard"
- Purchase Success: "Purchase Successful - Ticketr"
- 404: "Page Not Found - Ticketr"
Dynamic Pages:
- Event Detail: "{Event Name} - Event Details | Ticketr"
- Edit Event: "Edit {Event Name} - Ticketr"
- Ticket Detail: "{Event Name} Ticket - Ticketr"
- Search Results: "Search Results for '{query}' - Ticketr"
🔧 Technical Requirements
- Choose the most appropriate solution for each route
- Ensure metadata updates dynamically for dynamic routes
- Maintain consistent branding across all pages
- Test with SEO tools (Lighthouse, etc.)
- Ensure accessibility compliance
- Update any existing hardcoded titles
📚 Reference Links
Priority: Medium
Estimated Effort: 1-2 days
Skills Required: Next.js, SEO, TypeScript