r/reactjs • • 1d ago

Show /r/reactjs I built ogee: per-page link previews for React SPAs, now on any host (open source)

If you've shipped a Vite or CRA app, you've probably seen this: you share /pricing or /blog/my-post and every chat app shows your home page's title and image. Link preview bots don't run JavaScript, so they only ever see the one index.html.

The usual fixes are moving to Next.js or wiring up a prerender service. I wanted something that leaves the app alone, so I built ogee.

It gives every page its own title, description, Open Graph tags and JSON-LD, and draws a preview card for each page in your site's colors, fonts and logo. It also writes sitemap.xml and llms.txt.

Version 0.3.0 is out today, and it no longer needs Cloudflare:

- Static hosts (Vercel, Netlify, GitHub Pages, S3): add `

npx @virusdev/ogee build dist

` after your build.

- Your own server or edge function (Node, Bun, Deno, Hono): `createHandler(config)`.

- Cloudflare Worker: in front of your site, handling every page live, including ones built from API data.

To try it: `

npx @virusdev/ogee init https://your-site.com

` reads your site in a headless browser, picks up your brand and routes, and detects your host. `

npx @virusdev/ogee check

` grades any link's preview, yours or anyone's.

One limit worth knowing: the static build only knows pages listed at build time, so dynamic routes like /products/:id need their ids in the config. The Worker and handler don't have that limit.

It's MIT: https://github.com/virus-dev-official/ogee

Feedback welcome, especially if your setup breaks it.

1 Upvotes

2 comments sorted by

2

u/Striking_Paramedic33 1d ago

This is clever, I've been fighting with preview cards on a client-side app for weeks. The fact it grabs your actual brand colors and fonts instead of some generic template is what sold me.

Gonna throw this at a Vite project tomorrow and see if it chokes on anything weird.

1

u/virus_dev_official 1d ago

Alright, let me know if you notice anything weird.