Fix duplicate h1 on homepage (SEO) - #118
Merged
Merged
Conversation
…bug-3aekma Fix share_created not firing for copy-link on mobile
The homepage renders two responsive hero variants — a mobile layout (md:hidden) and a desktop layout (hidden md:block) — that are both always present in the page source, only toggled by CSS per breakpoint. Both used size="hero", which maps to <h1>, so crawlers reading the raw source (e.g. Bing Webmaster Tools) saw two <h1> tags on the page. Keep the single <h1> on the mobile hero (mobile-first indexing) and render the desktop duplicate as a visually-identical <p> via a new as="p" option on Heading. Layout and styling are unchanged. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01EPFpwJ3zNtXFu9rHJKtGLd
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
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.
What & why
Bing Webmaster Tools flagged the homepage with "More than one h1 tag — 2 instances found."
The homepage (
app/page.tsx) ships two responsive hero variants:<div className="md:hidden"><div className="hidden md:block">Only one is visible at a given breakpoint, but both are always in the page source — CSS only toggles visibility. Both used
size="hero", which theHeadingcomponent maps to<h1>, so any crawler reading the raw HTML (Bing, and static SEO parsers generally) saw two<h1>tags.The fix
as="p"option toHeading(components/ui/Heading.tsx) so a heading can keep its visual size without emitting a heading tag.<h1>(aligns with mobile-first indexing).<p>.Result: exactly one
<h1>in the page source, with no visual or layout change on either breakpoint.Testing
npx tsc --noEmit— 0 errorsnpx jest— 67/67 passing🤖 Generated with Claude Code
Generated by Claude Code