fix: og image for glossary

app/glossary/glossary-client.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { useState, useMemo, useRef, useEffect, useCallback } from "react";
+import { useRouter } from "next/navigation";
 import Link from "next/link";
 import { Search, X, Menu, ChevronLeft, ChevronRight } from "lucide-react";
 import { Input } from "@/components/ui/input";
@@ -289,6 +290,7 @@ export function GlossaryClient({
   letters,
   letterCounts,
 }: Props) {
+  const router = useRouter();
   const [query, setQuery] = useState("");
   const [activeTermRaw, setActiveTerm] = useState(entries[0]?.term || "");
   const contentRef = useRef<HTMLDivElement>(null);
@@ -347,6 +349,17 @@ export function GlossaryClient({
     return idx !== undefined ? entries[idx] : null;
   }, [entries, termIndex, activeTerm]);
 
+  // Update URL with ?term= when active term changes (for OG + shareable links)
+  useEffect(() => {
+    const url = new URL(window.location.href);
+    if (activeTerm) {
+      url.searchParams.set("term", activeTerm);
+    } else {
+      url.searchParams.delete("term");
+    }
+    window.history.replaceState({}, "", url.toString());
+  }, [activeTerm]);
+
   const handleSelectTerm = useCallback((term: string) => {
     setActiveTerm(term);
     contentRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });