From 3b24f4560f3afd5fd937fedf52307deb889b18b8 Mon Sep 17 00:00:00 2001
From: root <root@opencode.lan>
Date: Sat, 11 Apr 2026 09:35:21 +0500
Subject: [PATCH] feat: add OG/Twitter meta tags on book and chapter pages

Add og:title, og:description, og:image (book cover), og:url, og:type,
og:site_name, twitter:card, twitter:image, and rel=canonical to the
book detail and chapter reader pages so link previews in Telegram,
WhatsApp, Twitter/X, Discord etc. show the cover image instead of
the site logo.
---
 ui/src/routes/books/[slug]/+page.svelte       | 23 +++++++++++++++++++
 .../books/[slug]/chapters/[n]/+page.svelte    | 17 ++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/ui/src/routes/books/[slug]/+page.svelte b/ui/src/routes/books/[slug]/+page.svelte
index 3aa7c69..5416ba5 100644
--- a/ui/src/routes/books/[slug]/+page.svelte
+++ b/ui/src/routes/books/[slug]/+page.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { onMount, untrack } from 'svelte';
 	import { goto, invalidateAll } from '$app/navigation';
+	import { page } from '$app/state';
 	import type { PageData } from './$types';
 	import CommentsSection from '$lib/components/CommentsSection.svelte';
 	import StarRating from '$lib/components/StarRating.svelte';
@@ -660,6 +661,28 @@
 
 <svelte:head>
 	<title>{data.scraping ? m.book_detail_scraping() : (data.book?.title ?? 'Book')} — libnovel</title>
+	{#if data.book && !data.scraping}
+		{@const ogTitle = `${data.book.title} — libnovel`}
+		{@const ogDesc = data.book.summary ? (data.book.summary.length > 200 ? data.book.summary.slice(0, 200) + '…' : data.book.summary) : `${data.book.total_chapters} chapters · ${data.book.author}`}
+		{@const ogUrl = `${page.url.origin}/books/${data.book.slug}`}
+		<link rel="canonical" href={ogUrl} />
+		<meta property="og:type" content="book" />
+		<meta property="og:site_name" content="libnovel" />
+		<meta property="og:url" content={ogUrl} />
+		<meta property="og:title" content={ogTitle} />
+		<meta property="og:description" content={ogDesc} />
+		{#if data.book.cover}
+			<meta property="og:image" content={data.book.cover} />
+			<meta property="og:image:width" content="300" />
+			<meta property="og:image:height" content="450" />
+			<meta name="twitter:card" content="summary_large_image" />
+			<meta name="twitter:image" content={data.book.cover} />
+		{:else}
+			<meta name="twitter:card" content="summary" />
+		{/if}
+		<meta name="twitter:title" content={ogTitle} />
+		<meta name="twitter:description" content={ogDesc} />
+	{/if}
 </svelte:head>
 
 {#if data.scraping}
diff --git a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
index c9e88bb..c12c95d 100644
--- a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
+++ b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte
@@ -332,6 +332,23 @@
 
 <svelte:head>
 	<title>{cleanTitle} — {data.book.title} — libnovel</title>
+	<link rel="canonical" href="{page.url.origin}/books/{data.book.slug}/chapters/{data.chapter.number}" />
+	<meta property="og:type" content="book" />
+	<meta property="og:site_name" content="libnovel" />
+	<meta property="og:url" content="{page.url.origin}/books/{data.book.slug}/chapters/{data.chapter.number}" />
+	<meta property="og:title" content="{cleanTitle} — {data.book.title} — libnovel" />
+	<meta property="og:description" content="Chapter {data.chapter.number} of {data.book.title}" />
+	{#if data.book.cover}
+		<meta property="og:image" content={data.book.cover} />
+		<meta property="og:image:width" content="300" />
+		<meta property="og:image:height" content="450" />
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:image" content={data.book.cover} />
+	{:else}
+		<meta name="twitter:card" content="summary" />
+	{/if}
+	<meta name="twitter:title" content="{cleanTitle} — {data.book.title} — libnovel" />
+	<meta name="twitter:description" content="Chapter {data.chapter.number} of {data.book.title}" />
 </svelte:head>
 
 <!-- Reading progress bar (scroll mode, fixed at top of viewport) -->