SEO

[ngoiyaeric]

Reduce how long the page is blocked from responding to user input
SEO impact:
Technical difficulty:
Role:
4 Pages affected
View pages
Total Blocking Time (TBT) measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. A good TBT is less than 200 milliseconds (ms).Learn more
Recommended by: Google Lighthouse

Reduce page layout shifts
SEO impact:
Technical difficulty:
Role:
1 Pages affected
View pages
Cumulative Layout Shift (CLS), a Google metric, measures the overall visual stability of a page. Sudden shifts in the layout of a page can negatively affect your visitors' experience and its ranking in search results. Aim for a CLS score of less than 0.1. Learn more
Recommended by: Google Lighthouse

Address pages with duplicate title tags
SEO impact:
Technical difficulty:
Role:
4 Pages affected
View pages
The title tag gives visitors a first impression of your page in search results. Make sure the page title for each page is unique. Learn more
Address pages with duplicate content
SEO impact:
Technical difficulty:
Role:
4 Pages affected
View pages
Pages are duplicates of each other if at least 85% of their content is the same. Duplicate pages compete for the same search terms. This may result in less visibility for either page. Sometimes, duplicate content can also result in a penalty from search engines. Create more variation between your pages, combine them, or indicate to search engines how these pages are related to each other. Learn more
Improve page loading time
SEO impact:
Technical difficulty:
Role:
4 Pages affected
View pages
Largest Contentful Paint (LCP) is the largest element on the page. For the best user experience, this element should appear within 2.5 seconds of the page starting to load. Learn more
Recommended by: Google Lighthouse

Address pages with duplicate meta description
SEO impact:
Technical difficulty:
Role:
4 Pages affected
View pages
The page meta description helps readers and search engines understand what the page is about. Using the same meta description for multiple pages makes it more challenging to understand the purpose of each page. Learn more
Shorten meta description
SEO impact:
Technical difficulty:
Role:
4 Pages affected
View pages
Search engine results pages will only show the first 155 characters of a meta description. Keep it short if you want readers to click through to your site. Learn more

[ngoiyaeric]

@coderabbitai plan

[coderabbitai]

Coding Plan

Summary

• Implement Next.js metadata title templates and page-specific descriptions to eliminate duplicate SEO signals across all routes
• Optimize oversized static assets (logo, OG image) and defer non-critical CSS/JS to significantly improve LCP and TBT scores
• Add proper image dimensions and aspect-ratio containers throughout the application to achieve CLS < 0.1
• Focus changes on the root layout, page files, and specific image-rendering components identified as CLS sources

Implementation Steps

Phase 1: Metadata Architecture Overhaul

This phase addresses duplicate title tags, duplicate meta descriptions, and content differentiation by implementing Next.js metadata best practices with proper title templates and unique page-level descriptions.

Task 1: Update Root Layout Metadata with Title Template

Restructure the root layout metadata to use Next.js title template pattern, enabling consistent branding while allowing unique page titles.

• Update app/layout.tsx metadata export to use title: { template: '%s | QCX', default: 'QCX - Language to Maps' } pattern instead of empty string
• Change description to a meaningful, concise default under 155 characters that describes the application's core value proposition
• Update openGraph and twitter objects to reference the same title/description structure for consistency

Task 2: Add Unique Metadata to Home Page

Create page-specific metadata for the home page to differentiate it from other pages.

• Add metadata export to app/page.tsx with a unique title (e.g., "Search Maps with Natural Language") and description specific to the landing experience
• Include openGraph and twitter overrides with home-page-specific messaging

Task 3: Enhance Search Page Dynamic Metadata

Extend the existing generateMetadata function to include unique descriptions and social metadata per search result.

• Update app/search/[id]/page.tsx generateMetadata to return description based on chat content or a contextual fallback
• Add openGraph and twitter objects that use the dynamically generated title and description
• Consider adding canonical URL via alternates.canonical to prevent duplicate content signals

🤖 Prompt for AI agents

Implement Next.js metadata architecture to eliminate duplicate titles and
descriptions across all routes.

**Root Layout (`app/layout.tsx`):**
- Replace the current metadata export with a title template pattern: `title: {
template: '%s | QCX', default: 'QCX - Language to Maps' }`
- Update the description field to a concise default under 155 characters
describing the application's core value proposition
- Ensure openGraph and twitter metadata objects reference the same
title/description structure for consistency

**Home Page (`app/page.tsx`):**
- Add a metadata export with a unique title (e.g., "Search Maps with Natural
Language") that will use the template from layout
- Provide a description specific to the landing page experience
- Include openGraph and twitter overrides with home-page-specific messaging

**Search Page (`app/search/[id]/page.tsx`):**
- Extend the existing generateMetadata function to return a description based on
chat content or provide a contextual fallback
- Add openGraph and twitter objects that utilize the dynamically generated title
and description
- Consider adding `alternates.canonical` to prevent duplicate content signals

Phase 2: Asset and Resource Optimization

This phase targets LCP and TBT by optimizing oversized assets and deferring non-critical resources that block rendering or main thread execution.

Task 1: Optimize Critical Image Assets

Drastically reduce the file sizes of oversized assets in the public directory that impact initial load performance.

• Optimize public/images/logo.svg from 2.23MB to under 10KB using SVGO, removing embedded metadata, simplifying paths, or converting to a minimal SVG/WebP for the 20x20 display size
• Compress public/images/opengraph-image.png from 2.14MB to under 300KB using modern compression (MozJPEG, WebP, or AVIF) while maintaining 1200x630 dimensions for social previews
• If the logo contains embedded rasters or excessive complexity, consider exporting a simplified version at the required dimensions

Task 2: Defer Non-Critical CSS Loading

Move render-blocking CSS that isn't needed above the fold to lazy-loaded patterns.

• Remove global KaTeX CSS import from app/layout.tsx
• Create a wrapper component that dynamically imports KaTeX CSS only when math rendering is actually needed (likely in message display components)
• Apply the lazy KaTeX import in components that render mathematical content (search results, message displays)

Task 3: Defer Non-Critical Component Initialization

Reduce TBT by delaying components that execute JavaScript on initial mount but aren't critical to first paint.

• Update components/header.tsx to delay PurchaseCreditsPopup mounting using setTimeout or requestIdleCallback (3-5 seconds after mount or after user interaction)
• Review other useEffect hooks that run on mount in header and layout components; defer any that make network requests or heavy computations
• Consider wrapping non-critical header features in dynamic imports with ssr: false if they add significant bundle weight

🤖 Prompt for AI agents

Optimize assets and defer non-critical resources to improve LCP and reduce TBT.

**Image Asset Optimization:**
- Optimize `public/images/logo.svg` from 2.23MB to under 10KB using SVGO,
removing embedded metadata and simplifying paths, or convert to minimal SVG/WebP
for 20x20 display size
- Compress `public/images/opengraph-image.png` from 2.14MB to under 300KB using
modern compression (MozJPEG, WebP, or AVIF) while maintaining 1200x630
dimensions
- If the logo contains embedded rasters or excessive complexity, export a
simplified version at required dimensions

**Defer KaTeX CSS:**
- Remove the global KaTeX CSS import from `app/layout.tsx`
- Create a wrapper component that dynamically imports KaTeX CSS only when math
rendering is needed (likely in message display components)
- Apply the lazy KaTeX import in components rendering mathematical content
(search results, message displays)

**Defer Component Initialization (`components/header.tsx`):**
- Delay PurchaseCreditsPopup mounting using setTimeout or requestIdleCallback
(3-5 seconds after mount or after user interaction)
- Review other useEffect hooks running on mount in header and layout components;
defer any making network requests or heavy computations
- Consider wrapping non-critical header features in dynamic imports with `ssr:
false` if they add significant bundle weight

Phase 3: Layout Stability Improvements

This phase addresses CLS by ensuring images have proper dimensions or aspect-ratio containers to reserve space before content loads.

Task 1: Fix Image Dimensions in Resolution Image Component

Add proper dimension handling to prevent layout shifts when images load in the resolution image dialog.

• Update components/resolution-image.tsx to wrap images in fixed aspect-ratio containers (e.g., aspect-video or aspect-square)
• Alternatively, migrate to next/image with fill property inside a positioned container with defined dimensions
• Ensure both thumbnail and full-view dialog images have reserved space before load

Task 2: Stabilize Search Results Image Grid

Ensure the image grid and carousel maintain stable layouts during image loading.

• Review components/search-results-image.tsx to confirm all image containers use aspect-ratio utilities consistently
• For the carousel full-view images, ensure the container has a fixed height or aspect ratio before images load
• Consider migrating external image URLs to next/image with configured remotePatterns in next.config.mjs for optimization benefits

Task 3: Reserve Space for Conditional Content Sections

Prevent layout shifts from streaming content and conditional section rendering.

• In components/search-section.tsx and components/video-search-section.tsx, ensure skeleton components match the approximate height of final content
• For conditionally rendered sections (Images, Videos), consider maintaining a minimum placeholder height until data availability is determined
• Review components/user-message.tsx attachment rendering to ensure the image container reserves space with a fixed aspect ratio before the image loads

🤖 Prompt for AI agents

Improve layout stability to reduce CLS by adding proper dimensions and
aspect-ratio containers to all image components.

**Resolution Image Component (`components/resolution-image.tsx`):**
- Wrap images in fixed aspect-ratio containers (e.g., `aspect-video` or
`aspect-square`)
- Alternatively, migrate to next/image with fill property inside a positioned
container with defined dimensions
- Ensure both thumbnail and full-view dialog images have reserved space before
load

**Search Results Image Grid (`components/search-results-image.tsx`):**
- Confirm all image containers use aspect-ratio utilities consistently
- For carousel full-view images, ensure the container has a fixed height or
aspect ratio before images load
- Consider migrating external image URLs to next/image with configured
remotePatterns in `next.config.mjs` for optimization benefits

**Conditional Content Sections:**
- In `components/search-section.tsx` and `components/video-search-section.tsx`,
ensure skeleton components match the approximate height of final content
- For conditionally rendered sections (Images, Videos), maintain a minimum
placeholder height until data availability is determined
- In `components/user-message.tsx` attachment rendering, ensure the image
container reserves space with a fixed aspect ratio before the image loads

Research

This is a Next.js App Router application with two main routes: the home page (/) and dynamic search pages (/search/[id]). The root layout defines global metadata with an empty title and a generic description that gets inherited by all pages. The codebase uses next/image in some components but relies on raw <img> tags elsewhere. Critical assets in the public directory are significantly oversized (2.23MB logo.svg, 2.14MB opengraph-image.png). The application loads KaTeX CSS globally and renders components like PurchaseCreditsPopup immediately on mount, contributing to blocking time.

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Implement Next.js metadata architecture to eliminate duplicate titles and
descriptions across all routes.

**Root Layout (`app/layout.tsx`):**
- Replace the current metadata export with a title template pattern: `title: {
template: '%s | QCX', default: 'QCX - Language to Maps' }`
- Update the description field to a concise default under 155 characters
describing the application's core value proposition
- Ensure openGraph and twitter metadata objects reference the same
title/description structure for consistency

**Home Page (`app/page.tsx`):**
- Add a metadata export with a unique title (e.g., "Search Maps with Natural
Language") that will use the template from layout
- Provide a description specific to the landing page experience
- Include openGraph and twitter overrides with home-page-specific messaging

**Search Page (`app/search/[id]/page.tsx`):**
- Extend the existing generateMetadata function to return a description based on
chat content or provide a contextual fallback
- Add openGraph and twitter objects that utilize the dynamically generated title
and description
- Consider adding `alternates.canonical` to prevent duplicate content signals
===============================================================================

Task: 2

Optimize assets and defer non-critical resources to improve LCP and reduce TBT.

**Image Asset Optimization:**
- Optimize `public/images/logo.svg` from 2.23MB to under 10KB using SVGO,
removing embedded metadata and simplifying paths, or convert to minimal SVG/WebP
for 20x20 display size
- Compress `public/images/opengraph-image.png` from 2.14MB to under 300KB using
modern compression (MozJPEG, WebP, or AVIF) while maintaining 1200x630
dimensions
- If the logo contains embedded rasters or excessive complexity, export a
simplified version at required dimensions

**Defer KaTeX CSS:**
- Remove the global KaTeX CSS import from `app/layout.tsx`
- Create a wrapper component that dynamically imports KaTeX CSS only when math
rendering is needed (likely in message display components)
- Apply the lazy KaTeX import in components rendering mathematical content
(search results, message displays)

**Defer Component Initialization (`components/header.tsx`):**
- Delay PurchaseCreditsPopup mounting using setTimeout or requestIdleCallback
(3-5 seconds after mount or after user interaction)
- Review other useEffect hooks running on mount in header and layout components;
defer any making network requests or heavy computations
- Consider wrapping non-critical header features in dynamic imports with `ssr:
false` if they add significant bundle weight
===============================================================================

Task: 3

Improve layout stability to reduce CLS by adding proper dimensions and
aspect-ratio containers to all image components.

**Resolution Image Component (`components/resolution-image.tsx`):**
- Wrap images in fixed aspect-ratio containers (e.g., `aspect-video` or
`aspect-square`)
- Alternatively, migrate to next/image with fill property inside a positioned
container with defined dimensions
- Ensure both thumbnail and full-view dialog images have reserved space before
load

**Search Results Image Grid (`components/search-results-image.tsx`):**
- Confirm all image containers use aspect-ratio utilities consistently
- For carousel full-view images, ensure the container has a fixed height or
aspect ratio before images load
- Consider migrating external image URLs to next/image with configured
remotePatterns in `next.config.mjs` for optimization benefits

**Conditional Content Sections:**
- In `components/search-section.tsx` and `components/video-search-section.tsx`,
ensure skeleton components match the approximate height of final content
- For conditionally rendered sections (Images, Videos), maintain a minimum
placeholder height until data availability is determined
- In `components/user-message.tsx` attachment rendering, ensure the image
container reserves space with a fixed aspect ratio before the image loads

💡 Iterate on the plan with: @coderabbitai <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!