Add OpenGraph and Twitter card metadata for post previews #30
Labels
No labels
activitypub
actor
admin
ai-safety
article
articles
atproto
bug
cli
configuration
content
dev-environment
docker
enhancement
feature
federation
fediverse
forgejo
garage
health
how-to
logging
markdown
mastodon
media
navigation
opengraph
passkeys
preview
priority:medium
production
release
rendering
s3
settings
setup
status:active
status:done
status:inprogress
technical
webauthn
No milestone
No project
No assignees
1 participant
Notifications
Due date
No due date set.
Dependencies
No dependencies set.
Reference
erik/slugkit.com#30
Loading…
Add table
Add a link
Reference in a new issue
No description provided.
Delete branch "%!s()"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
Problem
Published Slugkit.com articles do not generate rich previews on Mastodon because public post detail pages lack OpenGraph/Twitter card metadata.
Observed on production article:
https://slugkit.com/posts/slug-cli-initThe page includes
<title>,meta name="description", and canonical URL, but does not emit:og:titleog:descriptionog:urlog:typeog:imagetwitter:cardThe article banner image is reachable at:
https://slugkit.com/media/posts/slug-cli-init/banner.pngExpected
Public post/article pages should include absolute preview metadata so Mastodon and other link preview crawlers can render a proper card.
Scope
summary_large_imagewhen a suitable image is available.og:url, and image values.og:imagewhen available.slug-cli-initexposes preview metadata in production-compatible HTML.Acceptance criteria
https://slugkit.com/posts/slug-cli-initemitsog:title,og:description,og:url,og:type, andog:image.og:imagepoints to the article banner or another reachable absolute image URL.twitter:cardis present and usessummary_large_imagewhenog:imageexists.Synced from todu comment by @todu on 2026-06-28T02:55:22.698Z
Review update
erik/slugkit.com#31is open and reviewed.slug-cli-initverified locally with OpenGraph/Twitter card metadata and absolute preview image URL.Synced from todu comment by @todu on 2026-06-28T03:09:22.968Z
Closed
PR
erik/slugkit.com#31was reviewed, approved, merged, and localmainwas fast-forwarded to9465bce.Acceptance criteria met:
og:title,og:description,og:url,og:type, andog:imagewhen an image is available.og:imageandtwitter:imageuse absolute URLs derived from the first markdown image.twitter:cardusessummary_large_imagewith an image andsummarywithout one.Verification completed before merge:
npm run typechecknpm test -- --run src/routes/__tests__/public.test.tsnpm testnpm run buildslug-cli-init.Synced from todu comment by @todu on 2026-06-28T03:39:33.527Z
Follow-up PR
erik/slugkit.com#32og:image:secure_url,og:image:type,og:image:alt,twitter:image:alt, andog:site_name.Synced from todu comment by @todu on 2026-06-28T03:35:46.660Z
Reopened
Task reopened and set back to
inprogress.Do not close this task until the preview fix is deployed and verified in Chromium against the live Mastodon/profile/card behavior.
Current live Mastodon evidence for status
116825331460865197:card.imageisnull.| Slugkit, suggesting Mastodon is not using the intendedog:titleyet or has not accepted the full metadata set.Next work should harden preview metadata and then release/deploy before final verification.
Synced from todu comment by @todu on 2026-06-28T04:06:50.551Z
Release/deploy verification update
Released and deployed follow-up PR #32:
web-v0.1.17c3934cd#23succeeded.evcraddock/slugkit-com:0.1.17and rolled out successfully.Production HTML now includes hardened metadata for
https://slugkit.com/posts/slug-cli-init:og:site_nameog:titleog:descriptionog:urlog:typeog:imageog:image:secure_urlog:image:typeog:image:alttwitter:cardtwitter:imagetwitter:image:altLive Chromium/Mastodon verification still fails the actual outcome:
116825331460865197still reportscard.image: null.| Slugkit, so the existing card appears to be using stored/fetched page-title data rather than the current intended OG title/image.Keeping task open per gate. Next investigation should determine whether this requires ActivityPub object attachment/image metadata, a fresh Mastodon status/link fetch path, or another Mastodon card parser requirement.
Synced from todu comment by @todu on 2026-06-28T04:13:36.518Z
Follow-up PR #33
PR
erik/slugkit.com#33is open and reviewed approved.This copies the working ActivityPub preview pattern from
erikcraddock.me:contents: [content, new LanguageString(content, "en")]so Fedify emitscontentMapand Mastodon has a language hint, which should remove the unwanted Translate control on future delivered statuses.Documentattachment with absolute URL, media type, and alt/name.contentMapand article image attachment metadata.Verification passed:
npm run typechecknpm test -- --run src/federation/__tests__/routes.test.tsnpm testnpm run buildKeep task open after merge until release/deploy and Chromium/Mastodon verification show the card image and no unwanted Translate control.
Synced from todu comment by @todu on 2026-06-28T04:47:15.758Z
Follow-up PR #34
PR
erik/slugkit.com#34is open and reviewed approved.This fixes the latest live issue:
Documentattachment from PR #33 made Mastodon render the banner as attached media.contentMap/language-tagged content.Verification passed:
npm run typechecknpm test -- --run src/federation/__tests__/routes.test.tsnpm testnpm run buildKeep task open after merge until release/deploy, redelivery, and Chromium verification confirm the card opens the article rather than the image.
Synced from todu comment by @todu on 2026-06-28T04:42:38.023Z
Live verification passed
Released/deployed ActivityPub preview fix:
web-v0.1.19on commitf73edd7.web-v0.1.18tag was pushed but did not start a Forgejo Actions run;web-v0.1.19retriggered successfully.#24succeeded.evcraddock/slugkit-com:0.1.19and rolled out successfully.Live slugkit.com ActivityPub outbox for
slug-cli-initnow includes:contentMap.enattachmentasDocumenthttps://slugkit.com/media/posts/slug-cli-init/banner.pngimage/pngBanner image for How to Generate a Slugkit Website with the slug CLIProduction redelivery:
slug --site slugkit.com post edit slug-cli-init ...update to redeliver the ActivityPub object.Mastodon/Chromium verification passed:
edited_atchanged).language: "en".remote_urlpointing to the slugkit.com banner.Note: Mastodon now represents the banner as a media attachment rather than a separate link card image, which satisfies the visible preview/image outcome.
Synced from todu comment by @todu on 2026-06-28T05:08:04.193Z
Final live verification passed
Merged PR #34, released, deployed, redelivered, and verified.
Release/deploy:
web-v0.1.20373e85f#26succeeded.evcraddock/slugkit-com:0.1.20and rolled out successfully.Redelivery:
slug --site slugkit.com post edit slug-cli-init ...update after deploy.Live ActivityPub object now has:
contentMap.enattachmenthttps://slugkit.com/posts/slug-cli-initMastodon API verification:
language: "en"card.imageis presentcard.urlishttps://slugkit.com/posts/slug-cli-initcard.titleisHow to Generate a Slugkit Website with the slug CLIcard.provider_nameisSlugkitmedia_attachmentsis emptyChromium verification:
https://slugkit.com/posts/slug-cli-init.Screenshot captured locally at
/tmp/slugkit-mastodon-fixed-card.png.Synced from todu comment by @todu on 2026-06-28T05:12:37.176Z
Closed
Final close gate passed after deployment and live verification.
Final deployed state:
evcraddock/slugkit-com:0.1.20373e85f#26succeededFinal production ActivityPub state:
slug-cli-initobject includescontentMap.enslug-cli-initobject has noattachmenthttps://slugkit.com/posts/slug-cli-initFinal Mastodon API verification:
language: "en"card.imageis presentcard.urlishttps://slugkit.com/posts/slug-cli-initmedia_attachmentsis emptyFinal Chromium verification:
Acceptance criteria are met, including the added live-verification gate.
Synced from todu comment by @todu on 2026-06-28T06:24:22.536Z
Follow-up PR #35
Compared
https://slugkit.com/feedand Mastodon. The Mastodon preview was duplicating information: the status body included title/excerpt/link and the card repeated title/excerpt/image.PR
erik/slugkit.com#35is open and reviewed approved.Change:
contentMap.enis preserved to keep the Translate control away.Expected Mastodon result after release/deploy/redelivery:
Synced from todu comment by @todu on 2026-06-28T06:38:36.561Z
Follow-up PR #36
Redelivery after PR #35 did not update the existing Mastodon status body. Production outbox was correct, but Mastodon API still showed the previous title/excerpt status content and old
edited_at.Likely cause found: ActivityPub Update activity IDs were constant (
#update), so Mastodon likely deduped later Update activities after accepting the first one.PR
erik/slugkit.com#36is open and reviewed approved.Change:
post.updatedAt, e.g.#update-<encoded timestamp>.Verification passed:
npm run typechecknpm test -- --run src/api/__tests__/posts.test.tsnpm testnpm run buildAfter merge/release/deploy, redeliver
slug-cli-initand verify Mastodon applies the URL-only content update.Synced from todu comment by @todu on 2026-06-28T11:40:02.865Z
Deploy verification after
web-v0.1.22Deployed
evcraddock/slugkit-com:0.1.22and redeliveredslug-cli-init.Result:
Additional finding:
nameandsummaryinto the status body, even whencontentis URL-only.contentalone is insufficient for deduplication.Follow-up PR
erik/slugkit.com#37is open and reviewed approved.Change:
nameandsummary.contentMap.en.attachment,name, orsummary.Verification passed:
npm run typechecknpm test -- --run src/federation/__tests__/routes.test.tsnpm testnpm run buildSynced from todu comment by @todu on 2026-06-28T11:54:59.686Z
Final verification after
web-v0.1.23Merged PR #37, released
web-v0.1.23, deployedevcraddock/slugkit-com:0.1.23, and redeliveredslug-cli-init.Release/deploy:
8a5975a#29succeededevcraddock/slugkit-com:0.1.23Outbox verification:
contentMap.enis present.attachment.name.summary.Mastodon API verification:
edited_at:2026-06-28T11:52:47.093Zlanguage:enhttps://slugkit.com/posts/slug-cli-init.media_attachmentscount is0.Chromium DOM verification:
Result: desired Mastodon preview behavior is verified.