Add share redirect page with OG meta tags and thumbnail generation#2156
Add share redirect page with OG meta tags and thumbnail generation#2156
Conversation
Shared conversation URLs (/r/[id]) now generate dynamic thumbnails showing the conversation topic, so social media previews display meaningful content instead of the generic HuggingChat image. - Add thumbnail.png endpoint using Satori+Resvg (same as model thumbnails) - Convert /r/[id] from redirect-only to SSR page with OG meta tags - Redirect logic moved to client-side onMount (crawlers see OG tags) - Exclude /r/ paths from layout default OG tags to prevent duplicates https://claude.ai/code/session_01TWxkFGJP7HbWyUHpBwx26N
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: e996b3c009
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
src/routes/+layout.svelte
Outdated
| <!-- use those meta tags everywhere except on special listing pages --> | ||
| <!-- feel free to refacto if there's a better way --> | ||
| {#if !page.url.pathname.includes("/models/")} | ||
| {#if !page.url.pathname.includes("/models/") && !page.url.pathname.startsWith("/r/")} |
There was a problem hiding this comment.
I checked svelte.config.js and kit.paths.base is configurable via APP_BASE, so page.url.pathname can be prefixed (for example /chat/r/<id>). With the current pathname.startsWith('/r/') guard, those deployments won't skip the default OG/Twitter tags, so /r/[id] pages render both global and share-specific metadata and crawlers may pick the wrong preview title/image.
Useful? React with 👍 / 👎.
Use `${base}/r/` instead of hardcoded `/r/` so deployments with
a custom APP_BASE path correctly skip default OG tags on share pages.
The thumbnail was only served on /r/[id] but users land on /conversation/[id] after redirect, so sharing that URL had no custom OG preview. Now shared conversations render OG meta tags on the conversation page too, pointing to /r/[id]/thumbnail.png. Also exclude shared conversations from layout default OG tags.
- Return 404 instead of rendering an expensive fallback thumbnail
when the shared conversation doesn't exist (prevents CPU exhaustion
from random ID requests)
- Use fromShare query param for OG image URL on imported conversations
so the thumbnail points to the correct /r/{shareId}/thumbnail.png
instead of /r/{objectId}/thumbnail.png
2 participants
Summary
This PR adds a new share redirect page (
/r/[id]) that handles conversation sharing with proper Open Graph meta tags for social media previews and dynamic thumbnail generation.Key Changes
New share redirect route (
src/routes/r/[id]/+page.svelte):Server-side data loading (
src/routes/r/[id]/+page.server.ts):Dynamic thumbnail generation (
src/routes/r/[id]/thumbnail.png/+server.ts):Thumbnail component (
src/routes/r/[id]/thumbnail.png/ConversationThumbnail.svelte):Updated page load logic (
src/routes/r/[id]/+page.ts):+page.svelte'sonMountto allow SSR rendering of OG tagsLayout adjustment (
src/routes/+layout.svelte):/r/routes from default meta tags to prevent conflicts with share-specific OG tagsImplementation Details
https://claude.ai/code/session_01TWxkFGJP7HbWyUHpBwx26N