GitMetricsLab · Jai-Shankar1033 · Jun 15, 2026 · Jun 15, 2026 · Jun 23, 2026 · Jun 23, 2026
diff --git a/index.html b/index.html
@@ -4,7 +4,31 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/crl-icon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Github Tracker</title>
+    <meta name="theme-color" content="#1a1a1a" />
+    <title>GitHub Tracker - Monitor GitHub User Activity</title>
+
+    <!-- Primary Meta Tags -->
+    <meta name="title" content="GitHub Tracker - Monitor GitHub User Activity" />
+    <meta name="description" content="Track and analyze the activity of any GitHub user. Monitor commits, PRs, issues, and repositories in real time." />
+
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://github-spy.netlify.app/" />
+    <meta property="og:site_name" content="GitHub Tracker" />
+    <meta property="og:title" content="GitHub Tracker - Monitor GitHub User Activity" />
+    <meta property="og:description" content="Track and analyze the activity of any GitHub user. Monitor commits, PRs, issues, and repositories in real time." />
+    <meta property="og:image" content="https://github-spy.netlify.app/og-image.png" />
+    <meta property="og:image:width" content="1200" />
+    <meta property="og:image:height" content="630" />
+    <meta property="og:image:alt" content="GitHub Tracker preview" />
+
+    <!-- Twitter Card -->
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:url" content="https://github-spy.netlify.app/" />
+    <meta name="twitter:title" content="GitHub Tracker - Monitor GitHub User Activity" />
+    <meta name="twitter:description" content="Track and analyze the activity of any GitHub user. Monitor commits, PRs, issues, and repositories in real time." />
+    <meta name="twitter:image" content="https://github-spy.netlify.app/og-image.png" />
+    <meta name="twitter:image:alt" content="GitHub Tracker preview" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/public/og-image.png b/public/og-image.png
diff --git a/src/hooks/usePageTitle.ts b/src/hooks/usePageTitle.ts
@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+
+const APP_NAME = 'GitHub Tracker';
+
+const usePageTitle = (title: string): void => {
+  useEffect(() => {
+    document.title = title ? `${title} — ${APP_NAME}` : APP_NAME;
+    return () => {
+      document.title = APP_NAME;
+    };
+  }, [title]);
+};
+
+export default usePageTitle;
diff --git a/src/pages/About/About.tsx b/src/pages/About/About.tsx
@@ -1,5 +1,6 @@
 import { motion } from "framer-motion";
 import { Lightbulb, Users, Settings, Search } from "lucide-react";
+import usePageTitle from "../../hooks/usePageTitle";
 
 const features = [
   {
@@ -20,6 +21,7 @@ const features = [
 ];
 
 const About = () => {
+  usePageTitle("About");
   return (
     <div className="bg-gradient-to-br from-white to-gray-100 dark:from-gray-900 dark:to-gray-800 text-black dark:text-white min-h-screen">
 

diff --git a/src/pages/Activity.tsx b/src/pages/Activity.tsx
@@ -1,5 +1,7 @@
+import usePageTitle from "../hooks/usePageTitle";
 import ActivityFeed from "../components/ActivityFeed";
 export default function Activity() {
+  usePageTitle("Activity");
   return (
     <div className="w-full h-full p-6 bg-gray-50 dark:bg-gray-800">
       <div className="max-w-2xl mx-auto">

diff --git a/src/pages/Contact/Contact.tsx b/src/pages/Contact/Contact.tsx
@@ -9,8 +9,9 @@ import {
 } from "lucide-react";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
-
+import usePageTitle from "../../hooks/usePageTitle";
 function Contact() {
+  usePageTitle("Contact");
   const [showPopup, setShowPopup] = useState(false);
   const [isSubmitting, setIsSubmitting] = useState(false);
   const themeContext = useContext(ThemeContext) as ThemeContextType;

diff --git a/src/pages/ContributorProfile/ContributorProfile.tsx b/src/pages/ContributorProfile/ContributorProfile.tsx
@@ -1,6 +1,7 @@
 import { useParams } from "react-router-dom";
 import { useEffect, useState } from "react";
 import toast from "react-hot-toast";
+import usePageTitle from "../../hooks/usePageTitle";
 
 type PR = {
   title: string;
@@ -16,6 +17,7 @@ type Profile = {
 
 export default function ContributorProfile() {
   const { username } = useParams();
+  usePageTitle(username ? `${username} — Contributor` : "Contributor Profile");
   const [profile, setProfile] = useState<Profile | null>(null);
   const [prs, setPRs] = useState<PR[]>([]);
   const [loading, setLoading] = useState(true);

diff --git a/src/pages/Contributors/Contributors.tsx b/src/pages/Contributors/Contributors.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import usePageTitle from "../../hooks/usePageTitle";
 import {
   Container,
   Grid,
@@ -25,6 +26,7 @@ interface Contributor {
 }
 
 const ContributorsPage = () => {
+  usePageTitle("Contributors");
   const [contributors, setContributors] = useState<Contributor[]>([]);
   const [loading, setLoading] = useState<boolean>(true);
   const [error, setError] = useState<string | null>(null);

diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
@@ -1,8 +1,10 @@
 import Hero from "../../components/Hero";
 import HowItWorks from "../../components/HowItWorks";
 import Features from "../../components/Features";
+import usePageTitle from "../../hooks/usePageTitle";
 
 function Home() {
+  usePageTitle("Home");
   return (
     <div className="">
         <Hero />

diff --git a/src/pages/Login/Login.tsx b/src/pages/Login/Login.tsx
@@ -3,6 +3,7 @@ import axios from "axios";
 import { useNavigate, Link } from "react-router-dom";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
+import usePageTitle from "../../hooks/usePageTitle";
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
@@ -12,6 +13,7 @@ interface LoginFormData {
 }
 
 const Login: React.FC = () => {
+  usePageTitle("Login");
   const [formData, setFormData] = useState<LoginFormData>({ email: "", password: "" });
   const [message, setMessage] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);

diff --git a/src/pages/Privacy/PrivacyPolicy.tsx b/src/pages/Privacy/PrivacyPolicy.tsx
@@ -1,10 +1,12 @@
 import React from 'react';
+import usePageTitle from '../../hooks/usePageTitle';
 import { 
   FaShieldAlt, FaKey, FaDatabase, FaUserCheck, FaCheckCircle, 
   FaLock, FaClock, FaShareAlt, FaCookieBite, FaChild 
 } from 'react-icons/fa';
 
 const PrivacyPolicy: React.FC = () => {
+  usePageTitle("Privacy Policy");
   return (
     <div className="w-full flex-1 flex flex-col items-stretch bg-gray-50 dark:bg-[#0f172a] min-h-full transition-colors duration-200 self-stretch">
 

diff --git a/src/pages/Signup/Signup.tsx b/src/pages/Signup/Signup.tsx
@@ -5,6 +5,8 @@ import { motion } from "framer-motion";
 import { User, Mail, Lock, Eye, EyeOff } from "lucide-react";
 import { ThemeContext } from "../../context/ThemeContext";
 import type { ThemeContextType } from "../../context/ThemeContext";
+import usePageTitle from "../../hooks/usePageTitle";
+
 
 const backendUrl = import.meta.env.VITE_BACKEND_URL;
 
@@ -15,6 +17,7 @@ interface SignUpFormData {
 }
 
 const SignUp: React.FC = () => {
+  usePageTitle("Sign Up")
   const [formData, setFormData] = useState<SignUpFormData>({
     username: "",
     email: "",

diff --git a/src/pages/Tracker/Tracker.tsx b/src/pages/Tracker/Tracker.tsx
@@ -33,6 +33,7 @@ import { useTheme } from "@mui/material/styles";
 import { useGitHubAuth } from "../../hooks/useGitHubAuth";
 import { useGitHubData } from "../../hooks/useGitHubData";
 import { KeyIcon } from "lucide-react";
+import usePageTitle from "../../hooks/usePageTitle";
 
 const ROWS_PER_PAGE = 10;
 
@@ -49,6 +50,7 @@ interface GitHubItem {
 const Home: React.FC = () => {
 
   const theme = useTheme();
+   usePageTitle("Tracker");
 
   const {
     username,