Add social preview metadata for posts #31

Merged

erik merged 1 commit from task-2494df77-preview-metadata into main

2026-06-27 22:07:44 -05:00

erik commented

2026-06-27 21:54:35 -05:00

Owner

Summary

add OpenGraph and Twitter card metadata to public pages
derive post detail preview images from the first markdown image
use absolute URLs for canonical, og:url, and preview images
document Mastodon/social crawler preview caching

Verification

npm run typecheck
npm test -- --run src/routes/tests/public.test.ts
npm test
npm run build
Chromium dev article check confirmed og:title, og:description, og:url, og:type, og:image, twitter:card, and twitter:image for slug-cli-init

Task: task-2494df77

## Summary - add OpenGraph and Twitter card metadata to public pages - derive post detail preview images from the first markdown image - use absolute URLs for canonical, `og:url`, and preview images - document Mastodon/social crawler preview caching ## Verification - npm run typecheck - npm test -- --run src/routes/__tests__/public.test.ts - npm test - npm run build - Chromium dev article check confirmed `og:title`, `og:description`, `og:url`, `og:type`, `og:image`, `twitter:card`, and `twitter:image` for `slug-cli-init` Task: task-2494df77

erik added 1 commit

2026-06-27 21:54:35 -05:00

Add social preview metadata for posts d0fbd123c1

erik commented

2026-06-27 21:55:13 -05:00

Author

Owner

Review summary

Approved. The PR adds social preview metadata for public pages and wires post detail pages to emit article-specific OpenGraph/Twitter metadata with absolute URLs and image-aware card selection.

Acceptance criteria

https://slugkit.com/posts/slug-cli-init emits og:title, og:description, og:url, og:type, and og:image.
- Post detail pages now pass preview: { type: "article", imageUrl: extractFirstImageUrl(post.content) } into the public layout.
og:image points to the article banner or another reachable absolute image URL.
- The first markdown image is converted through toAbsoluteUrl(...); local Chromium verification for slug-cli-init showed an absolute banner URL.
twitter:card is present and uses summary_large_image when og:image exists.
- Layout emits summary_large_image with preview images and summary when no image is available.
Existing page title, description, canonical URL, and article rendering remain intact.
- Canonical URL still uses the same absolute URL helper; existing article rendering assertions remain.
Tests cover post detail preview metadata with and without a post image.
- Public tests cover og:image/twitter:image and no-image fallback behavior.
Notes document that Mastodon may cache old previews after deploy.
- README Social previews section documents crawler cache behavior.

Verification

npm run typecheck
npm test -- --run src/routes/__tests__/public.test.ts
npm test
npm run build
Chromium dev article check confirmed og:title, og:description, og:url, og:type, og:image, twitter:card, and twitter:image for slug-cli-init.

Blocking issues

None.

Warnings

None.

Verdict

Approved.

## Review summary Approved. The PR adds social preview metadata for public pages and wires post detail pages to emit article-specific OpenGraph/Twitter metadata with absolute URLs and image-aware card selection. ## Acceptance criteria - [x] `https://slugkit.com/posts/slug-cli-init` emits `og:title`, `og:description`, `og:url`, `og:type`, and `og:image`. - Post detail pages now pass `preview: { type: "article", imageUrl: extractFirstImageUrl(post.content) }` into the public layout. - [x] `og:image` points to the article banner or another reachable absolute image URL. - The first markdown image is converted through `toAbsoluteUrl(...)`; local Chromium verification for `slug-cli-init` showed an absolute banner URL. - [x] `twitter:card` is present and uses `summary_large_image` when `og:image` exists. - Layout emits `summary_large_image` with preview images and `summary` when no image is available. - [x] Existing page title, description, canonical URL, and article rendering remain intact. - Canonical URL still uses the same absolute URL helper; existing article rendering assertions remain. - [x] Tests cover post detail preview metadata with and without a post image. - Public tests cover `og:image`/`twitter:image` and no-image fallback behavior. - [x] Notes document that Mastodon may cache old previews after deploy. - README Social previews section documents crawler cache behavior. ## Verification - `npm run typecheck` - `npm test -- --run src/routes/__tests__/public.test.ts` - `npm test` - `npm run build` - Chromium dev article check confirmed `og:title`, `og:description`, `og:url`, `og:type`, `og:image`, `twitter:card`, and `twitter:image` for `slug-cli-init`. ## Blocking issues None. ## Warnings None. ## Verdict Approved.

erik merged commit 9465bcee3d into main

2026-06-27 22:07:44 -05:00

erik deleted branch task-2494df77-preview-metadata

2026-06-27 22:07:44 -05:00

erik referenced this pull request from a commit

2026-06-27 22:07:46 -05:00

Add social preview metadata for posts (#31)

erik referenced this pull request

2026-06-27 22:39:22 -05:00

Harden social preview image metadata #32