Add Open Graph meta tags for link previews - #1368
Merged
Merged
Conversation
The site emitted no description or og:* tags, so LinkedIn, X, Slack and messaging apps could not build a link preview for vortexfinance.co. The og:image is the existing 512px mark padded to 1200x630 on white so the preview works today; swap in a designed asset at public/og-image.png without touching code.
✅ Deploy Preview for vortex-sandbox ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for vortexfi ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for vrtx-dashboard canceled.
|
The placeholder was the 32px circle icon upscaled to 1200x630, so link previews were visibly pixelated. Render the navbar wordmark (blue.svg, recolored white) on the landing page's blue-950 background instead.
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.
Why
vortexfinance.co emits no
descriptionorog:*tags, so LinkedIn, X, Slack, WhatsApp and iMessage cannot build a link preview. LinkedIn refuses the URL outright ("Es konnte keine Vorschau für diesen Link erstellt werden").What
apps/frontend/src/routes/__root.tsx: adddescription,og:title,og:description,og:type,og:url,og:imageandtwitter:cardto the root route'shead()meta. Title and description reuse the site's own landing copy.apps/frontend/public/og-image.png: 1200×630 placeholder made from the existing 512px mark on white. Swap in a designed asset at the same path; no code change needed.Verification
bun run --cwd apps/frontend typecheckpasses.bun run --cwd apps/frontend buildpasses;dist/client/index.htmlcontains all seven tags.__root.tsxwould pull in the wagmi/provider tree for no additional coverage.After deploy
LinkedIn caches previews aggressively. Run the URL through https://www.linkedin.com/post-inspector/ once to force a re-crawl.