Add social sharing previews (Open Graph + Twitter cards)#44
Merged
Conversation
Shared links (LinkedIn, Slack, X, etc.) now render a preview card instead of a bare URL. Add og:* and twitter:* tags to both the English and German home routes, each pointing at a branded 1200x630 card (name, role, avatar) served as a static asset. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Regenerate both social cards with resvg using the actual Fraunces display serif (opsz 144, wght 600, WONK 1) instead of the Georgia fallback, matching the site hero. Localize the DE card's location line to "Freiburg, Deutschland". Co-Authored-By: Claude Fable 5 <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.
Sharing ruehe.me (LinkedIn, Slack, X, iMessage, …) currently shows a bare URL with no preview. This adds Open Graph and Twitter card meta so links render a proper preview card.
Changes
og:*andtwitter:*tags added to both home routes (home.tsx,home-de.tsx): title, description, url, type, site_name, locale (+ alternate), and asummary_large_imageTwitter card.og.jpg/og-de.jpg). The German card uses the German role and the DE tags point at/dewithog:localede_DE.Verification
Built the site and confirmed the prerendered
index.htmlandde/index.htmlcontain the full tag set with the correct per-languageog:url,og:locale, andog:image, and that both card images are emitted intobuild/client. Typecheck passes.Note: the images were generated with macOS
sips, so the name renders in Georgia rather than the site's Fraunces (Fraunces isn't available to the rasterizer) — consistent with how the favicon was produced.🤖 Generated with Claude Code