From 77a243c1848e46453d3af034d23b7c9b6bbff43f Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Mon, 3 Aug 2026 00:11:51 +0000
Subject: [PATCH] Fix truncated page titles in auto-generated social preview
 image (RND-11313)

The og:image title was rendered at a fixed text-8xl (96px) with leading-none,
so long titles overflowed the fixed 630px-tall image and were cropped; titles
over 64 chars were also hard-truncated with an ellipsis.

Scale the title font size down as the title grows (96 -> 72 -> 60 -> 48px by
length) so it wraps across a few lines and stays within the image, and raise
the truncation cap from 64 to 128 characters.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01WALQYKu6GghT1N1du6UKeQ
---
 .changeset/rnd-11313-ogimage-long-titles.md |  5 ++++
 packages/gitbook/src/routes/ogimage.tsx     | 29 ++++++++++++++++++---
 2 files changed, 31 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/rnd-11313-ogimage-long-titles.md

diff --git a/.changeset/rnd-11313-ogimage-long-titles.md b/.changeset/rnd-11313-ogimage-long-titles.md
new file mode 100644
index 000000000..9235ff238
--- /dev/null
+++ b/.changeset/rnd-11313-ogimage-long-titles.md
@@ -0,0 +1,5 @@
+---
+"gitbook": patch
+---
+
+Prevent long page titles from being cut off in the auto-generated social/link preview image by wrapping and scaling the title font size to fit.
diff --git a/packages/gitbook/src/routes/ogimage.tsx b/packages/gitbook/src/routes/ogimage.tsx
index d0e6ceb6e..214b7c4c2 100644
--- a/packages/gitbook/src/routes/ogimage.tsx
+++ b/packages/gitbook/src/routes/ogimage.tsx
@@ -20,6 +20,10 @@ import { getExtension } from '@/lib/paths';
 import { getCacheTag } from '@gitbook/cache-tags';
 import { SiteDefaultIcon } from './icon';
 
+// Upper bound on the rendered title length. Kept generous so full titles are
+// shown (the font scales down to fit); only pathological titles get clipped.
+const MAX_TITLE_LENGTH = 128;
+
 /**
  * Render the OpenGraph image for a site content.
  */
@@ -40,8 +44,8 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
 
     // Compute all text to load only the necessary fonts
     const pageTitle = page
-        ? page.title.length > 64
-            ? `${page.title.slice(0, 64)}...`
+        ? page.title.length > MAX_TITLE_LENGTH
+            ? `${page.title.slice(0, MAX_TITLE_LENGTH)}...`
             : page.title
         : 'Not found';
     const pageDescription =
@@ -199,7 +203,8 @@ export async function serveOGImage(baseContext: GitBookSiteContext, params: Page
             {/* Title and description */}
             <div tw="flex flex-col">
                 <h1
-                    tw={`text-8xl my-0 tracking-tight leading-none text-left text-[${colors.title}] font-bold`}
+                    tw={`my-0 tracking-tight leading-none text-left text-[${colors.title}] font-bold`}
+                    style={{ fontSize: getTitleFontSize(pageTitle.length) }}
                 >
                     {transformText(pageTitle)}
                 </h1>
@@ -346,6 +351,24 @@ function transformText(text: string) {
     return '';
 }
 
+/**
+ * Scale the title font size down as the title gets longer, so long titles wrap
+ * across a few lines and stay within the fixed-height image instead of being
+ * cropped. Sizes mirror Tailwind's text-8xl down to text-5xl.
+ */
+function getTitleFontSize(length: number): number {
+    if (length <= 32) {
+        return 96;
+    }
+    if (length <= 64) {
+        return 72;
+    }
+    if (length <= 96) {
+        return 60;
+    }
+    return 48;
+}
+
 type Theme = CustomizationDefaultThemeMode.Dark | CustomizationDefaultThemeMode.Light;
 
 function getTheme(customization: GitBookSiteContext['customization']): Theme {