Add buildMeta utility for consistent page meta tags (SEO fix)#211
Merged
Conversation
Ports the buildMeta() utility from oxidecomputer/oxide-computer#751 to the RFD site so every HTML route emits a consistent set of OpenGraph, Twitter Card, and canonical tags. - New app/utils/meta.ts that reuses SITE_URL/canonicalUrl from app/utils/canonicalUrl.ts (no duplicate base-URL constant). The image arg is optional; og:image/twitter:image are only emitted when supplied. - root.tsx and rfd.$slug.tsx switched to buildMeta. Title separator standardized on " | " to match #751. - _index.tsx and login.tsx now use buildMeta and drop their separate links() canonical exports — buildMeta owns the canonical link. - Resource routes (search, sitemap, PDF/raw, auth callbacks, etc.) are intentionally left alone since they don't render HTML. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
kev507
changed the title
Prettier prefers the description string on a single line. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
- Make description optional in buildMeta; skip description/og:description/ twitter:description tags when absent. Drop title-as-description on the RFD slug page (it was a low-quality duplicate of the title). - Add normalizeDescription: strip HTML, collapse whitespace, truncate at a word boundary to 160 chars. - Only emit twitter:card=summary_large_image when an image is actually present (was unconditional). - Return MetaDescriptor[] from react-router instead of Array<Record<string, string>>. - Drop the duplicate meta export from /_index — root.tsx already covers the index route. - Skip the dash in the RFD slug title when title is null.
Contributor
|
Looks good, and I see #210 covers the need for a default OG image. |
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
2 participants
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
Ports the
buildMeta()utility from oxidecomputer/oxide-computer#751 to the RFD site so every HTML route emits a consistent set of OpenGraph, Twitter Card, and canonical tags.Today, only
app/root.tsx(title only) andapp/routes/rfd.$slug.tsx(title + canonical) set any metadata — there are noog:*,twitter:*, ordescriptiontags anywhere on the site, so links shared on social media or in chat clients show no preview cards and search engines have no description to surface.What's in here
app/utils/meta.ts—buildMeta({ title, description, image?, path, type? })returns the full set of title, description, og:, twitter:, and<link rel="canonical">tags. It reuses the existingSITE_URLandcanonicalUrl()fromapp/utils/canonicalUrl.tsrather than introducing a parallel base-URL constant.root.tsx,rfd.$slug.tsxswitched tobuildMeta. Added meta to_index.tsxandlogin.tsx, removing their separatelinks()canonical exports sincebuildMetanow owns the canonical link.|to match #751 (e.g.,0001 - <title> | RFD | Oxide).Adapted vs. #751
/img/meta/og-oxide.png; rfd-site has no comparable static image yet.imageis optional, andog:image/twitter:imageare simply omitted when none is supplied. Adding a default image (or hooking up the existingrfd.image.$rfd.$.tsxendpoint as per-RFD social art) is a follow-up.search.tsxis JSON-only, plus the PDF/raw/fetch/jobs/discussion/auth/sitemap endpoints) are intentionally left alone since they don't render HTML.Test plan
npm run tscpassesnpm run lintpasses/,/rfd/0001,/loginin dev — verify<title>,<meta name="description">, og:* / twitter:* tags, and<link rel="canonical">render with the expected values/rfd/nonexistent— confirm fallbackPage not found | Oxidetitle still renders🤖 Generated with Claude Code