feat(demo): give the demo site real metadata and a social card - #34
Merged
Conversation
The page shipped a charset, a title reading "VisualImageTool – Demos" and nothing else: no description, no canonical, no Open Graph tags. Search engines had nothing to index it on, and every link to it — in a tweet, a Slack message, a newsletter — rendered as a bare URL with no preview. Adds a description, canonical, favicon links, and full Open Graph and Twitter card tags, plus the 1200x630 card they point at. The card is rendered from the demo itself, so it shows the actual tool rather than a logo on a gradient. Also aligns the on-page tagline with the meta description, so the page and its preview say the same thing. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
…ial-card # Conflicts: # CHANGELOG.md
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
P1, items 10 and 11 of the discoverability plan.
Why
The demo page shipped a charset, a title reading
VisualImageTool – Demos, and nothing else. No description, no canonical, no Open Graph tags. Two consequences:What changed
theme-color.summary_large_image.demo/social-preview.jpg— the 1200×630 card the tags point at. Rendered from the demo page itself, so it shows the tool actually in use rather than a logo on a gradient. 93 KB.Two follow-ups this does not cover
The og:image URL only resolves after a demo deploy. The tags point at
https://h4md1.fr/visual-image-tool/social-preview.jpg, which needsnpm run publish:demoto exist. Worth deploying soon after merge, before sharing any links.The GitHub repo social preview is a manual step. GitHub does not expose it through the API, so it cannot be set from here.
demo/social-preview.jpgis sized correctly for it — it needs uploading by hand under Settings → General → Social preview. Until then, repo links keep rendering GitHub's generic auto-card.Verification
Loaded the page headless: metadata resolves as intended, the tool still initialises and reports image dimensions, no console errors.
format:checkgreen.🤖 Generated with Claude Code