From f387bcf12def501dae3b2b3da48315382e8f445b Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 25 Sep 2026 09:31:50 +0000
Subject: [PATCH 1/2] feat: update the description tags upon client-side
 navigation (vikejs/vike#3524)

The +description setting (and useConfig({ description })) now also updates
<meta name="description"> and <meta property="og:description"> upon
client-side navigation, the same way +title updates document.title. Some
tools read these tags from the DOM of the current page, e.g. browser
extensions for bookmarking and social sharing.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019AAZpDLjrcSr6BwQgpVs9a
---
 examples/full/.testRun.ts                     | 38 +++++++++++++++++++
 examples/full/pages/images/+Page.tsx          |  2 +-
 examples/full/pages/without-ssr/+config.ts    |  1 +
 packages/vike-react/src/config.ts             |  2 +-
 .../src/hooks/useConfig/configsClientSide.ts  |  2 +-
 .../src/hooks/useConfig/useConfig-client.ts   |  4 +-
 .../src/integration/applyHeadSettings.tsx     | 21 +++++++++-
 .../src/integration/onRenderClient.tsx        |  3 +-
 packages/vike-react/src/types/Config.ts       |  2 +-
 9 files changed, 67 insertions(+), 8 deletions(-)

diff --git a/examples/full/.testRun.ts b/examples/full/.testRun.ts
index b1cd5bd88..427cbea04 100644
--- a/examples/full/.testRun.ts
+++ b/examples/full/.testRun.ts
@@ -5,6 +5,8 @@ import assert from 'node:assert'
 let isProd: boolean
 
 const titleDefault = 'My Vike + React App'
+// Set by <Config description> inside the <Image> component of /images
+const descriptionImages = 'Logo created by Romuald Brillout'
 const pages = {
   '/': {
     title: titleDefault,
@@ -30,6 +32,7 @@ const pages = {
   },
   '/without-ssr': {
     title: 'No SSR',
+    description: 'Page rendered only in the browser',
     text: 'This page is rendered only in the browser',
     counter: true,
     noSSR: true,
@@ -48,6 +51,7 @@ function testRun(cmd: `pnpm run ${'dev' | 'preview'}`) {
   testPages()
   testPageNavigation_betweenWithSSRAndWithout()
   testPageNavigation_titleUpdate()
+  testPageNavigation_descriptionUpdate()
   testUseConfig()
   testReactSetting()
   testClientOnly()
@@ -126,6 +130,38 @@ async function expectTitle(title: string) {
   })
 }
 
+// The description tags are updated upon client-side navigation. https://github.com/vikejs/vike/issues/3524
+function testPageNavigation_descriptionUpdate() {
+  test('description update client-side page navigation', async () => {
+    await page.goto(getServerUrl() + '/')
+    await testCounter()
+    await expectDescription(null)
+    // Set by +description
+    await page.click('a:has-text("Without SSR")')
+    await testCounter()
+    await expectDescription(pages['/without-ssr'].description)
+    // Set by useConfig() inside +data()
+    await page.click('a[href="/star-wars"]')
+    await expectDescription(pages['/star-wars'].description)
+    // Set by <Config> inside UI components
+    await page.click('a:has-text("useConfig()")')
+    await testCounter()
+    await expectDescription(descriptionImages)
+    await page.click('a:has-text("Without SSR")')
+    await testCounter()
+    await expectDescription(pages['/without-ssr'].description)
+    await ensureWasClientSideRouted('/pages/index')
+  })
+}
+async function expectDescription(description: string | null) {
+  await autoRetry(async () => {
+    const getContent = (selector: string) =>
+      page.evaluate((selector) => document.querySelector(selector)?.getAttribute('content') ?? null, selector)
+    expect(await getContent('meta[name="description"]')).toBe(description)
+    expect(await getContent('meta[property="og:description"]')).toBe(description)
+  })
+}
+
 function testPages() {
   Object.entries(pages).forEach(([url, pageInfo]) => {
     testPage({ url, ...pageInfo })
@@ -202,6 +238,8 @@ function testUseConfig() {
   test('useConfig() HTML', async () => {
     const html = await fetchHtml('/images')
     expect(getTitle(html)).toBe(titleImages)
+    expect(html).toContain(`<meta name="description" content="${descriptionImages}" />`)
+    expect(html).toContain(`<meta property="og:description" content="${descriptionImages}" />`)
     expect(html).toMatch(
       partRegex`<script type="application/ld+json">{"@context":"https://schema.org/","contentUrl":{"src":"${getAssetUrl(
         'logo-new.svg',
diff --git a/examples/full/pages/images/+Page.tsx b/examples/full/pages/images/+Page.tsx
index 72baa595c..e68127e97 100644
--- a/examples/full/pages/images/+Page.tsx
+++ b/examples/full/pages/images/+Page.tsx
@@ -31,7 +31,7 @@ function Image({ src, author }: { src: string; author: string }) {
   return (
     <>
       <img src={src} height={48} style={{ verticalAlign: 'middle', marginLeft: 10 }} />
-      <Config title={`Image created by ${author}`} />
+      <Config title={`Image created by ${author}`} description={`Logo created by ${author}`} />
       <Head>
         <script
           type="application/ld+json"
diff --git a/examples/full/pages/without-ssr/+config.ts b/examples/full/pages/without-ssr/+config.ts
index 22ccc8420..b8b647f2d 100644
--- a/examples/full/pages/without-ssr/+config.ts
+++ b/examples/full/pages/without-ssr/+config.ts
@@ -4,4 +4,5 @@ export default {
   // https://vike.dev/ssr
   ssr: false,
   title: 'No SSR',
+  description: 'Page rendered only in the browser',
 } satisfies Config
diff --git a/packages/vike-react/src/config.ts b/packages/vike-react/src/config.ts
index c5e3dd995..1753f03da 100644
--- a/packages/vike-react/src/config.ts
+++ b/packages/vike-react/src/config.ts
@@ -80,7 +80,7 @@ const config = {
       env: { server: true, client: true },
     },
     description: {
-      env: { server: true },
+      env: { server: true, client: true },
     },
     image: {
       env: { server: true },
diff --git a/packages/vike-react/src/hooks/useConfig/configsClientSide.ts b/packages/vike-react/src/hooks/useConfig/configsClientSide.ts
index c8de944b5..f15116d14 100644
--- a/packages/vike-react/src/hooks/useConfig/configsClientSide.ts
+++ b/packages/vike-react/src/hooks/useConfig/configsClientSide.ts
@@ -1,2 +1,2 @@
 // Settings the client-side applies upon navigation, see applyHeadSettings(). The others are HTML-only.
-export const configsClientSide = ['title', 'lang'] as const
+export const configsClientSide = ['title', 'lang', 'description'] as const
diff --git a/packages/vike-react/src/hooks/useConfig/useConfig-client.ts b/packages/vike-react/src/hooks/useConfig/useConfig-client.ts
index 849d4b5d2..9b924f9da 100644
--- a/packages/vike-react/src/hooks/useConfig/useConfig-client.ts
+++ b/packages/vike-react/src/hooks/useConfig/useConfig-client.ts
@@ -36,6 +36,6 @@ function setPageContextConfigViaHook(config: ConfigViaHook, pageContext: PageCon
 }
 
 function applyHead(config: ConfigViaHook) {
-  const { title, lang } = config
-  applyHeadSettings(title, lang)
+  const { title, lang, description } = config
+  applyHeadSettings(title, lang, description)
 }
diff --git a/packages/vike-react/src/integration/applyHeadSettings.tsx b/packages/vike-react/src/integration/applyHeadSettings.tsx
index 1c583dbea..52ebd206c 100644
--- a/packages/vike-react/src/integration/applyHeadSettings.tsx
+++ b/packages/vike-react/src/integration/applyHeadSettings.tsx
@@ -7,7 +7,26 @@ type Value = string | null | undefined
 //   - Most of the time, the user sets a default himself (i.e. a value defined at /pages/+config.js)
 //     - If he doesn't have a default then he can use `null` to opt into Vike's defaults
 
-function applyHeadSettings(title: Value, lang: Value) {
+function applyHeadSettings(title: Value, lang: Value, description: Value) {
   if (title !== undefined) document.title = title || ''
   if (lang !== undefined) document.documentElement.lang = lang || 'en'
+  if (description !== undefined) {
+    setMetaTag('name', 'description', description)
+    setMetaTag('property', 'og:description', description)
+  }
+}
+
+// An empty value removes the tag (the server-side doesn't render the tag either)
+function setMetaTag(attrName: 'name' | 'property', attrValue: string, content: string | null) {
+  let tag = document.head.querySelector<HTMLMetaElement>(`meta[${attrName}="${attrValue}"]`)
+  if (!content) {
+    tag?.remove()
+    return
+  }
+  if (!tag) {
+    tag = document.createElement('meta')
+    tag.setAttribute(attrName, attrValue)
+    document.head.appendChild(tag)
+  }
+  tag.content = content
 }
diff --git a/packages/vike-react/src/integration/onRenderClient.tsx b/packages/vike-react/src/integration/onRenderClient.tsx
index 55a81137a..777eee09c 100644
--- a/packages/vike-react/src/integration/onRenderClient.tsx
+++ b/packages/vike-react/src/integration/onRenderClient.tsx
@@ -82,7 +82,8 @@ async function onRenderClient(pageContext: PageContextClient & PageContextIntern
 function applyHead(pageContext: PageContextClient) {
   const title = getHeadSetting<string | null>('title', pageContext)
   const lang = getHeadSetting<string | null>('lang', pageContext)
-  applyHeadSettings(title, lang)
+  const description = getHeadSetting<string | null>('description', pageContext)
+  applyHeadSettings(title, lang, description)
 }
 
 // Global callback, attached once upon hydration.
diff --git a/packages/vike-react/src/types/Config.ts b/packages/vike-react/src/types/Config.ts
index 799c7b1e5..6c99fcb7b 100644
--- a/packages/vike-react/src/types/Config.ts
+++ b/packages/vike-react/src/types/Config.ts
@@ -69,7 +69,7 @@ declare global {
        *
        * https://vike.dev/description
        */
-      description?: string | null | ((pageContext: PageContextServer) => string | null | undefined)
+      description?: string | null | ((pageContext: PageContext_) => string | null | undefined)
 
       /**
        * Set the page's preview image upon URL sharing.

From 20ec7d4c46d6982af13e2945c43b3c739cc15329 Mon Sep 17 00:00:00 2001
From: Claude <noreply@anthropic.com>
Date: Fri, 25 Sep 2026 09:36:08 +0000
Subject: [PATCH 2/2] feat: also update og:title upon client-side navigation

+title renders <title> and <meta property="og:title">, but upon client-side
navigation only document.title was updated. Also update og:title, so that
all tags rendered by +title and +description reflect the current page.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_019AAZpDLjrcSr6BwQgpVs9a
---
 examples/full/.testRun.ts                              | 10 ++++++----
 .../vike-react/src/integration/applyHeadSettings.tsx   |  5 ++++-
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/examples/full/.testRun.ts b/examples/full/.testRun.ts
index 427cbea04..3dd29f0fd 100644
--- a/examples/full/.testRun.ts
+++ b/examples/full/.testRun.ts
@@ -127,6 +127,7 @@ async function expectTitle(title: string) {
   await autoRetry(async () => {
     const titleActual = await page.evaluate(() => window.document.title)
     expect(titleActual).toBe(title)
+    expect(await getMetaContent('meta[property="og:title"]')).toBe(title)
   })
 }
 
@@ -155,12 +156,13 @@ function testPageNavigation_descriptionUpdate() {
 }
 async function expectDescription(description: string | null) {
   await autoRetry(async () => {
-    const getContent = (selector: string) =>
-      page.evaluate((selector) => document.querySelector(selector)?.getAttribute('content') ?? null, selector)
-    expect(await getContent('meta[name="description"]')).toBe(description)
-    expect(await getContent('meta[property="og:description"]')).toBe(description)
+    expect(await getMetaContent('meta[name="description"]')).toBe(description)
+    expect(await getMetaContent('meta[property="og:description"]')).toBe(description)
   })
 }
+async function getMetaContent(selector: string) {
+  return await page.evaluate((selector) => document.querySelector(selector)?.getAttribute('content') ?? null, selector)
+}
 
 function testPages() {
   Object.entries(pages).forEach(([url, pageInfo]) => {
diff --git a/packages/vike-react/src/integration/applyHeadSettings.tsx b/packages/vike-react/src/integration/applyHeadSettings.tsx
index 52ebd206c..5dfca9f80 100644
--- a/packages/vike-react/src/integration/applyHeadSettings.tsx
+++ b/packages/vike-react/src/integration/applyHeadSettings.tsx
@@ -8,7 +8,10 @@ type Value = string | null | undefined
 //     - If he doesn't have a default then he can use `null` to opt into Vike's defaults
 
 function applyHeadSettings(title: Value, lang: Value, description: Value) {
-  if (title !== undefined) document.title = title || ''
+  if (title !== undefined) {
+    document.title = title || ''
+    setMetaTag('property', 'og:title', title)
+  }
   if (lang !== undefined) document.documentElement.lang = lang || 'en'
   if (description !== undefined) {
     setMetaTag('name', 'description', description)