Shared book links show the generic homepage image instead of the book cover (Open Graph previews)

[arnonrdp]

When a book link such as https://livrolog.com/books/B-JJYV-YBQM is shared on iMessage, Slack, Twitter/X, WhatsApp, Facebook, etc., the link preview shows the generic homepage screenshot and the title "LivroLog" instead of the book's cover, title and author.

Steps to reproduce

1. Open a book page, e.g. https://livrolog.com/books/B-JJYV-YBQM
2. Paste the URL into iMessage / Slack / WhatsApp / a link-preview debugger
3. The preview uses the homepage image and the generic "LivroLog" title

Expected

The preview should show the book cover, the book title (and author), and a book-specific description.

Actual

Every URL serves the same generic homepage Open Graph tags.

Root cause

The webapp is a Quasar/Vue 3 SPA. The static index.html ships hardcoded meta tags pointing at the homepage, and any per-page tags are injected client-side via JavaScript. Social/link-preview crawlers (Facebook, iMessage, Slackbot, Twitterbot, WhatsApp) do not run JavaScript — they read the raw HTML — so they always receive the homepage tags.

Confirmed by fetching the raw HTML of the book URL, which returns:

og:title     = LivroLog
og:url       = https://livrolog.com
og:image     = https://livrolog.com/screenshot-web.jpg
canonical    = https://livrolog.com
twitter:card = summary_large_image

No book-specific data is present in the server response.

Proposed fix

Serve per-book Open Graph tags in the server response for /books/{id} so crawlers receive them without executing JS. Given the stack (Laravel 12 + Nginx, Quasar SPA), options in rough order of effort:

1. (Recommended) Server-side meta injection for /books/{id}. A Laravel route/middleware (or Nginx rule) returns the SPA shell with og:*, twitter:*, <title>, description and canonical rewritten per book (cover URL, title, author). Optionally gate on known crawler User-Agents and serve the normal SPA to real users.
2. Prerendering for bot UAs (Prerender.io / headless-Chrome prerender service) in front of the SPA.
3. Quasar SSR mode for these routes (largest change).

Acceptance criteria

• Sharing a book URL shows the book cover as the preview image (when a cover is available); fallback to the generic image otherwise.
• og:title / twitter:title = book title (+ author).
• og:url and canonical = the book's own URL, not the homepage.
• og:image is an absolute HTTPS URL with appropriate dimensions; twitter:card = summary_large_image.
• Verified green in the Facebook Sharing Debugger and Twitter Card Validator (or equivalent).

Notes

• Facebook/LinkedIn cache OG data — re-scrape via their debuggers after deploying.
• Ensure book cover images allow hotlinking and are served over HTTPS with the correct content-type.