fix(site): resolve Lighthouse contrast & robots.txt issues and overhaul branded OG cards

Author: codercatdev

apps/site/baseline/robots.txt

@@ -1,6 +1,5 @@
 User-Agent: *
 Content-Signal: ai-train=no, search=yes, ai-input=yes
-Content-Usage: / train-ai=n, search=y
 Allow: /
 Allow: /api/search
 Allow: /api/mcp
@@ -55,4 +54,3 @@ Allow: /
 Host: https://codingcat.dev
 Sitemap: https://codingcat.dev/sitemap.xml
 Sitemap: https://codingcat.dev/sitemap-index.xml
-Agentmap: https://codingcat.dev/.well-known/ai-catalog.json

apps/site/src/components/Header.astro

@@ -47,7 +47,7 @@ const desktopLinks = navLinks.filter((link) => link?.sideOnly !== true);
 				<circle cx="11" cy="11" r="8"></circle>
 				<path d="m21 21-4.3-4.3"></path>
 			</svg>
-			<span class="hidden md:inline-flex items-center text-[10px] font-mono bg-muted px-1.5 py-0.5 rounded border border-border">⌘K</span>
+			<span class="hidden md:inline-flex items-center text-[10px] font-mono bg-muted text-foreground px-1.5 py-0.5 rounded border border-border">⌘K</span>
 		</button>
 		<ThemeToggle />
 		<button

apps/site/src/components/SocialMeta.astro

@@ -9,9 +9,12 @@ import { SITE_NAME } from "@/lib/site";
  */
 interface Props {
 	title: string;
+	ogTitle?: string | null;
 	description?: string | null;
+	ogDescription?: string | null;
 	image?: { url: string; alt?: string; width?: number; height?: number } | null;
 	type?: "website" | "article";
+	twitterCard?: string | null;
 	publishedAt?: string | null;
 	modifiedAt?: string | null;
 	authors?: Array<string | null | undefined>;
@@ -21,16 +24,27 @@ interface Props {
 
 const {
 	title,
+	ogTitle,
 	description,
+	ogDescription,
 	image,
 	type = "website",
+	twitterCard,
 	publishedAt,
 	modifiedAt,
 	authors = [],
 	canonical = Astro.url,
 	noindex = false,
 } = Astro.props;
 
+function cleanMetaText(value: string | null | undefined): string | undefined {
+	const cleaned = stegaClean(value)?.trim();
+	if (!cleaned || cleaned.toLowerCase() === "fix me") {
+		return undefined;
+	}
+	return cleaned;
+}
+
 // Per-request, not `Astro.site`: the origin differs between the dev and
 // production Workers but the build is shared.
 const site = Astro.locals.siteUrl;
@@ -39,9 +53,18 @@ const canonicalUrl = new URL(
 	site,
 ).href;
 
-const cleanTitle = stegaClean(title) ?? SITE_NAME;
-const cleanDescription = stegaClean(description) ?? undefined;
+const cleanTitle = cleanMetaText(title) ?? SITE_NAME;
+const cleanOgTitle = cleanMetaText(ogTitle) ?? cleanTitle;
+const cleanDescription = cleanMetaText(description);
+const cleanOgDescription = cleanMetaText(ogDescription) ?? cleanDescription;
 const imageUrl = image?.url ? new URL(stegaClean(image.url), site).href : undefined;
+const imageAlt = cleanMetaText(image?.alt) ?? cleanOgTitle;
+const cardType =
+	cleanMetaText(twitterCard) === "summary"
+		? "summary"
+		: imageUrl
+			? "summary_large_image"
+			: "summary";
 ---
 
 <title>{cleanTitle}</title>
@@ -50,26 +73,34 @@ const imageUrl = image?.url ? new URL(stegaClean(image.url), site).href : undefi
 {noindex && <meta name="robots" content="noindex, nofollow" />}
 
 <meta property="og:site_name" content={SITE_NAME} />
+<meta property="og:locale" content="en_US" />
 <meta property="og:type" content={type} />
-<meta property="og:title" content={cleanTitle} />
-{cleanDescription && <meta property="og:description" content={cleanDescription} />}
+<meta property="og:title" content={cleanOgTitle} />
+{cleanOgDescription && <meta property="og:description" content={cleanOgDescription} />}
 <meta property="og:url" content={canonicalUrl} />
 {
 	imageUrl && (
 		<>
 			<meta property="og:image" content={imageUrl} />
 			{image?.width && <meta property="og:image:width" content={String(image.width)} />}
 			{image?.height && <meta property="og:image:height" content={String(image.height)} />}
-			{image?.alt && <meta property="og:image:alt" content={stegaClean(image.alt)} />}
+			{imageAlt && <meta property="og:image:alt" content={imageAlt} />}
 		</>
 	)
 }
 
-<meta name="twitter:card" content={imageUrl ? "summary_large_image" : "summary"} />
+<meta name="twitter:card" content={cardType} />
 <meta name="twitter:site" content="@CodingCatDev" />
-<meta name="twitter:title" content={cleanTitle} />
-{cleanDescription && <meta name="twitter:description" content={cleanDescription} />}
-{imageUrl && <meta name="twitter:image" content={imageUrl} />}
+<meta name="twitter:title" content={cleanOgTitle} />
+{cleanOgDescription && <meta name="twitter:description" content={cleanOgDescription} />}
+{
+	imageUrl && (
+		<>
+			<meta name="twitter:image" content={imageUrl} />
+			{imageAlt && <meta name="twitter:image:alt" content={imageAlt} />}
+		</>
+	)
+}
 
 {
 	type === "article" && (

apps/site/src/layouts/BaseLayout.astro

@@ -20,17 +20,21 @@ import {
 
 interface Props {
 	title: string;
+	ogTitle?: string | null;
 	description?: string | null;
+	ogDescription?: string | null;
 	image?: { url: string; alt?: string; width?: number; height?: number } | null;
 	type?: "website" | "article";
+	twitterCard?: string | null;
 	publishedAt?: string | null;
 	modifiedAt?: string | null;
 	authors?: Array<string | null | undefined>;
 	canonical?: string | URL;
 	noindex?: boolean;
 	/**
-	 * Used to generate an OG card when `image` is absent. Documents without a
-	 * cover image previously shipped no og:image at all.
+	 * Used to generate an OG card when `image` is absent. When omitted, a
+	 * default branded OG card is generated automatically from `title` and
+	 * `description` so every route ships a 1200×630 social preview image.
 	 */
 	ogFallback?: OgFallback;
 	/** Extra JSON-LD nodes merged into the site-wide @graph. */
@@ -41,9 +45,12 @@ interface Props {
 
 const {
 	title,
+	ogTitle,
 	description,
+	ogDescription,
 	image,
 	type,
+	twitterCard,
 	publishedAt,
 	modifiedAt,
 	authors,
@@ -58,7 +65,14 @@ const origin = Astro.locals.siteUrl.origin;
 const preview = Astro.locals.sanity.preview.enabled;
 
 const socialImage =
-	image ?? (ogFallback ? fallbackOgImage(origin, ogFallback) : undefined);
+	image ??
+	fallbackOgImage(
+		origin,
+		ogFallback ?? {
+			title: ogTitle ?? title,
+			subtitle: ogDescription ?? description,
+		},
+	);
 
 const graph = buildGraph([
 	organizationSchema(origin, absoluteUrl("/icon.svg", origin)),
@@ -78,9 +92,12 @@ const graph = buildGraph([
 		<Font cssVariable="--font-nunito" />
 		<SocialMeta
 			title={title}
+			ogTitle={ogTitle}
 			description={description}
+			ogDescription={ogDescription}
 			image={socialImage}
 			type={type}
+			twitterCard={twitterCard}
 			publishedAt={publishedAt}
 			modifiedAt={modifiedAt}
 			authors={authors}