fix: transcripts source and og image

app/transcriptions/[slug]/page.tsx

@@ -40,7 +40,7 @@ export async function generateMetadata({
 
   if (hlQuote) {
     return buildOgMeta({
-      title: t.name,
+      title: `Transcripts: ${t.name}`,
       detail: detail || undefined,
       quote: hlQuote,
     });
@@ -60,7 +60,7 @@ export async function generateMetadata({
     });
   }
 
-  return ogForTranscription(t.name, detail || undefined);
+  return ogForTranscription(`Transcripts: ${t.name}`, detail || undefined);
 }
 
 export default async function TranscriptionPage({

lib/source-reference.ts

@@ -164,6 +164,52 @@ export function getSourceReference(): {
     return { title: parentTitle, detail: chapterTitle, url };
   }
 
+  // /transcriptions/[slug]
+  if (
+    parts[0] === "transcriptions" &&
+    parts.length === 2 &&
+    parts[1] !== "year" &&
+    parts[1] !== "place" &&
+    parts[1] !== "type"
+  ) {
+    const h1 = document.querySelector("h1");
+    const title =
+      "Transcripts: " + (h1?.textContent?.trim() || "Transcription");
+
+    // The metadata line contains badges + date + place + reference + duration
+    // Grab the text from the header's muted-foreground elements after h1
+    const metaContainer = document.querySelector(
+      "header .flex.items-center.gap-3",
+    );
+    if (metaContainer) {
+      // Collect text from spans (skip badges which are in their own elements)
+      const spans = metaContainer.querySelectorAll("span");
+      const metaParts: string[] = [];
+      spans.forEach((span) => {
+        const text = span.textContent?.trim();
+        if (
+          text &&
+          text !== "Lecture" &&
+          text !== "Conversation" &&
+          text.length > 1 &&
+          !text.includes("min") &&
+          !span.closest(".text-primary")
+        ) {
+          metaParts.push(text);
+        }
+      });
+      const detail = metaParts.join(" · ") || null;
+      return { title, detail, url };
+    }
+
+    // Fallback: try the <p> after h1
+    const metaP = document.querySelector(
+      "header p.text-muted-foreground, header p[class*='muted']",
+    );
+    const meta = metaP?.textContent?.trim() || null;
+    return { title, detail: meta, url };
+  }
+
   // /glossary/[letter]?term=...
   if (parts[0] === "glossary") {
     const h1 = document.querySelector("h1");