feat(seo): proper OG/Twitter meta tags + default share card#29
Open
mastermanas805 wants to merge 1 commit into
Open
feat(seo): proper OG/Twitter meta tags + default share card#29mastermanas805 wants to merge 1 commit into
mastermanas805 wants to merge 1 commit into
Conversation
Pre-launch (HN/PH/Twitter) the site needs a real share card. The base index.html previously pointed og:image at apple-touch-icon.png (180px square), so Slack/Discord/Twitter rendered a tiny thumbnail with no context. Replaces that with a 1200x630 default card and gives every pre-rendered route its own title + description. - public/og-default.png: 1200x630 PNG generated from a Playwright screenshot of an in-memory HTML template. Dark canvas (#08080a) matching --ink, mint accent (#00e48e), wordmark + value prop + a sample curl. Committed to source so CI doesn't need a browser; re-run scripts/generate-og-image.mjs to regenerate. - index.html: og:image now points to /og-default.png with explicit width, height, and alt. Adds og:site_name and twitter:image:alt. twitter:site=@instanode preserved (handle exists). - scripts/prerender.mjs: per-route OG splicing. * Marketing pages (/, /pricing, /for-agents, /status, /docs, /blog, /use-cases): hard-coded titles + descriptions. * Blog posts: title + excerpt from frontmatter, og:type=article, plus article:published_time and article:author from frontmatter. * Use cases: title + scenario from frontmatter, og:type=article. * Helpers: htmlEscape, clamp(200), firstParagraph fallback. Verified via `npm run build` + `npm run preview`: /og-default.png returns 200 (208 kB), /blog/why-anonymous-is-the-trial/ emits its own og:title and article:published_time. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
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.
Summary
/og-default.png. Dark canvas, mint accent, wordmark + value prop + sample curl. Generated byscripts/generate-og-image.mjs(Playwright screenshot of an in-memory HTML template) and committed to source so CI doesn't need a browser.scripts/prerender.mjsto splice per-route<title>, description,og:*,twitter:*, and canonical tags into every pre-rendered HTML file. Marketing pages use hard-coded copy; blog posts and use-cases pull from frontmatter (title + excerpt / scenario). Blog posts getog:type=articleplusarticle:published_timeandarticle:author.index.htmlcleaned up:og:urlends in/, addsog:site_name,og:image:width/height/alt,twitter:image:alt.Why now
The GTM bundle in
/tmp/gtm-next-push/lands on HN / Product Hunt / Twitter. Right now pastinginstanode.devinto Slack/Discord/Twitter renders a tiny apple-touch-icon thumbnail with no value-prop. After this PR every share renders the 1200x630 card with the mint wordmark and the "real infrastructure for AI agents" tagline. Per-route variation means each blog post and use-case page gets its own card title + description.What's in the image
Test plan
npm run buildsucceeds (116 pre-rendered HTML files)npm test— 96 unit tests passdist/og-default.pngexists, 1200x630, 208 KBdist/index.htmlhas og:image pointing at/og-default.pngwith width/height/altdist/pricing/index.htmlhas its own og:title and description (not the homepage default)dist/blog/why-anonymous-is-the-trial/index.htmlhasog:type=article,article:published_time,article:authordist/use-cases/24-hour-hackathon-backend/index.htmlhas its scenario as descriptionnpm run preview+curl localhost:4173/og-default.pngreturns 200instanode.devinto a Slack / Discord channel to confirm the card renders. Use https://www.opengraph.xyz/url/https%3A%2F%2Finstanode.dev for a multi-platform preview.🤖 Generated with Claude Code