feat(seo): backfill og:image dimensions and alt text on 110 public pages#62
feat(seo): backfill og:image dimensions and alt text on 110 public pages#62VaultSparkStudios wants to merge 4 commits into
Conversation
All generated OG cards are 1200×630 PNG but 110 pages were missing the companion og:image:width, og:image:height, og:image:type, and og:image:alt meta properties. Social platforms (Facebook, X/Twitter, LinkedIn, Discord) use these to pre-fetch and frame share thumbnails without downloading each image first — missing them degrades share-preview rendering across the site. Adds scripts/backfill-og-dimensions.mjs (8 self-tests, --check drift mode) which derives og:image:alt from each page's og:title with proper HTML entity encoding, truncating at 100 chars. Run again to verify no drift. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DSmCi4f6MbqkjE5xZshoH
Refreshes api/heartbeat.json to clear the check-generated-drift-preflight gate which detected stale heartbeat data in CI. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DSmCi4f6MbqkjE5xZshoH
![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: ba89a448cb
ℹ️ 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".
| <meta property="og:image:width" content="1200" /> | ||
| <meta property="og:image:height" content="630" /> |
There was a problem hiding this comment.
For /brand/, the og:image still points at assets/brand/logo-cinematic.png, whose PNG header and the page's own ImageObject JSON-LD identify it as 1200×1200, but these new tags advertise it as 1200×630. When this URL is shared, crawlers can reserve or crop a large-card frame for a square logo, so either switch this page to a real 1200×630 OG card or report 1200×1200 here.
Useful? React with 👍 / 👎.
- brand/index.html: fix og:image:height 630→1200 (logo-cinematic.png is confirmed 1200×1200, not 1200×630 like generated OG cards) - franchise-architect/404.html, game.html: remove injected dimension tags (cover.png is not a local asset; dimensions are unverified) - backfill-og-dimensions.mjs: guard against non-standard image paths — only inject 1200×630 for images in /assets/og/ or /assets/og-*.png (confirmed generated card paths); adds 9th self-test covering this case - regenerate api/release-proof.json to clear build:check drift Addresses Codex review on brand/index.html line 20. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DSmCi4f6MbqkjE5xZshoH
build-you-asked-shipped --check detected SSR drift in changelog/index.html after the heartbeat timestamp changed. Regenerated both to clear the drift gate. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_011DSmCi4f6MbqkjE5xZshoH
CI status —
|
2 participants
What
Adds
og:image:width,og:image:height,og:image:type, andog:image:altto 110 public pages that hadog:imageset but were missing these companion properties.Before (110 pages looked like this):
After:
Why
Social platforms (Facebook, X/Twitter, LinkedIn, Discord, iMessage, Slack) use these properties to pre-fetch and frame share thumbnails without downloading each image first. Without them, platforms must download the image before they can render the share card — degrading social share preview reliability and speed.
The homepage already had all four properties set. All other public pages were missing them despite having properly generated 1200×630 PNG OG cards (via
build-og-cards.mjs).How
New script:
scripts/backfill-og-dimensions.mjsog:imagebut lackingog:image:widthwidth=1200,height=630,type=image/pngimmediately after theog:imagelineog:image:altfrom each page'sog:title, with proper HTML entity encoding and 100-char truncation--checkdrift mode (exits 1 if any pages need patching) and 8 self-testsCoverage
110 pages patched across: games, journal, leaderboards, pathways, projects, membership, community, privacy, terms, contact, ip, and more.
What to verify
/privacy/,/games/,/join/) on X/Twitter, Facebook, or Discord — the preview card should render immediately without delaynode scripts/backfill-og-dimensions.mjs --checkexits 0 (no drift)node scripts/backfill-og-dimensions.mjs --self-testpasses all 8 tests<meta>tags were added after existingog:imagelinesGenerated by Claude Code