Skip to content

Fix: Add Page Titles and Meta Tags β€” All pages show blank/default browser tab titleΒ #89

@Ananya-CM

Description

@Ananya-CM

πŸ› Bug Report

Area: SEO / Page Metadata
Type: Bug β€” Missing Page Titles
Priority: Medium

πŸ“Œ Description

FlowForge currently has no page-specific titles or
meta tags configured. Every page in the app shows
the same generic browser tab title with no
meaningful content. This affects:

  • User experience β€” can't distinguish tabs
  • SEO β€” search engines see no page descriptions
  • Professionalism β€” production apps always
    have proper page titles

πŸ” Proof β€” No Metadata in Source Code

In frontend/app/layout.tsx:

import "./globals.css";
import AppShell from "@/app/components/AppShell";

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <AppShell>{children}</AppShell>
      </body>
    </html>
  );
}

No <title>, no metadata export, no
<meta description> anywhere.


❌ Current Behaviour

  • Browser tab shows blank or "localhost:3000"
  • No meaningful title on any page
  • No meta description for any route
  • All pages identical from browser perspective

βœ… Expected Behaviour

Each page should have a descriptive title:

  • Homepage β†’ "FlowForge β€” Where your team's
    work actually gets done"
  • Dashboard β†’ "Dashboard β€” FlowForge"
  • Projects β†’ "Projects β€” FlowForge"
  • Login β†’ "Sign In β€” FlowForge"
  • Signup β†’ "Create Account β€” FlowForge"

πŸ’‘ Proposed Fix

1. Add global metadata in layout.tsx

import type { Metadata } from "next";

export const metadata: Metadata = {
  title: {
    default: "FlowForge",
    template: "%s β€” FlowForge",
  },
  description: "Kanban boards, team chat, and 
    project tracking without the extra tools 
    you don't need.",
};

2. Add page-specific metadata exports

In each page file:

export const metadata: Metadata = {
  title: "Dashboard",
};

Files to Modify

  • frontend/app/layout.tsx ← global metadata
  • frontend/app/page.tsx ← homepage title
  • frontend/app/dashboard/page.tsx ← dashboard
  • frontend/app/login/page.tsx ← login
  • frontend/app/signup/page.tsx ← signup
  • frontend/app/projects/page.tsx ← projects

πŸ–₯️ Steps to Reproduce

  1. Run app locally (npm run dev)
  2. Open any page in the browser
  3. Look at the browser tab β€” no meaningful title
  4. Open multiple FlowForge tabs β€” all look same

@Shriii19
I'd like to work on this issue.
Could you please assign it to me?

nsoc26

Metadata

Metadata

Assignees

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions