feat(website): SEO-optimal landing title + description for share previews#195
Merged
Conversation
…iews opengraph.xyz flagged two issues on the landing page when previewing shares: title too short (9 chars, "StrayMark") and description too short (48 chars). Both stemmed from the page falling back to the site title/tagline since `src/pages/index.tsx` only set `description`. Fix: pass explicit `title` and `description` to <Layout> on the landing only — site title and tagline stay short for the navbar and the hero H1. Docusaurus auto-appends ` | StrayMark` to the Layout title, so the message strings are the tagline portion only. Rendered titles after this change: EN 60 chars Cognitive discipline for AI-assisted engineering | StrayMark ES 65 chars Disciplina cognitiva para ingeniería asistida por IA | StrayMark zh-CN 49 chars 面向 AI 辅助工程的认知纪律 | StrayMark Descriptions land at 157 / 187 / 71 chars respectively — comfortably inside the 110-160 sweet spot for EN, slightly above for ES (acceptable for the longer phrasing), and the Chinese version is dense by nature. The "missing call-to-action in image" warning is intentionally not addressed: the card design is intentionally restrained and the straymark.dev URL serves as a soft CTA. Imperative verbs would clash with the brand voice. 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
Follow-up to #193 (branded OG card). opengraph.xyz flagged two warnings on the landing page after that PR shipped:
StrayMarkbecause the page fell back to the site title.This PR fixes both by passing explicit
titleanddescriptionprops on the landing page's<Layout>, with separate translate keys so the H1 and hero copy stay short and punchy. Docusaurus auto-appends| StrayMarkto the Layout title, so the message strings are the tagline portion only.Rendered titles after this change
Cognitive discipline for AI-assisted engineering | StrayMarkDisciplina cognitiva para ingeniería asistida por IA | StrayMark面向 AI 辅助工程的认知纪律 | StrayMarkDescriptions land at ~157 / ~187 / ~71 chars respectively — comfortably inside the 110-160 SEO sweet spot for EN, slightly above for ES (acceptable for the longer phrasing), zh-CN dense by nature.
What's intentionally NOT addressed
opengraph.xyz also warned "Missing call-to-action in your image." Skipped on purpose:
straymark.devURL on the card already serves as a soft CTA.Test plan
After deploy:
/quickstart,/features/cli, …) still get their own page titles unchanged/es/and/zh-CN/show the localised meta strings🤖 Generated with Claude Code