TanStack / TanStack/tanstack.com
feat(seo): add semantic breadcrumbs and BreadcrumbList structured data
まだ誰も着手していません。
- 主要言語
- TypeScript
- スター
- 1.1k
- フォーク
- 401
- 平均マージ
- 18時間 14分
- マージ済み PR(30日)
- 56
説明
Context
TanStack has a deep, meaningful content hierarchy, especially across library landing pages, documentation, blog posts, chart examples, and partner pages. These pages currently do not emit BreadcrumbList JSON-LD.
The shared src/components/Breadcrumbs.tsx component is currently a section label plus an on-page table-of-contents control. It renders div elements rather than a complete semantic breadcrumb trail, so it cannot serve as the source of truth for either accessible navigation or structured data.
Google documentation: https://developers.google.com/search/docs/appearance/structured-data/breadcrumb
Proposed scope
- Define a shared breadcrumb item model with a label and optional absolute or site-relative URL.
- Render visible breadcrumbs as nav with aria-label="Breadcrumb".
- Generate an SSR-visible BreadcrumbList JSON-LD object from the same breadcrumb items.
- Use representative user paths rather than mechanically mirroring URL segments.
- Cover at least:
- Library landing pages: Libraries → Query
- Docs: Libraries → Query → React Docs → Guides → Query Keys
- Blog posts: Blog → Post title
- Charts catalog examples: Charts → Catalog → Example title
- Partner detail pages: Partners → Partner name
- Do not emit breadcrumb markup on the homepage, errors, or non-indexable pages.
Acceptance criteria
- Visible breadcrumbs and JSON-LD are derived from one shared data model.
- BreadcrumbList is present in the raw SSR response, not added only after hydration.
- Every BreadcrumbList contains at least two ListItem entries with contiguous positions.
- Linked breadcrumb items use absolute canonical HTTPS URLs in JSON-LD.
- The current page name matches the visible page heading/title.
- Representative routes pass Google Rich Results Test validation.
- Automated tests cover ordering, URL generation, escaping, and routes that should not emit breadcrumbs.
Notes
The current UI component can retain its on-this-page control, but that control should be separate from the hierarchical breadcrumb data.
コントリビューションガイド
このリポジトリのコントリビューションガイドは索引されていません
はじめの一歩
- issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
- 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
- リポジトリをフォークし、ブランチを切って変更します。
- issue 番号を参照したプルリクエストを送ります。
調査の方向性
src/components/Breadcrumbs.tsx と Google Breadcrumb structured-data guidance から始め、その後、issue に記載された library、docs、blog、charts、partner の代表的なルートを追跡します。共通の Breadcrumb データによって、アクセシブルな表示ナビゲーションと SSR で確認できる JSON-LD が生成され、順序、URL、エスケープ、除外されたルートについて、記載されたバリデーションと自動テストのカバレッジがあれば完了です。
索引モデルが issue の本文から書いたものです。
評価
- 技術スタック
- typescript
- 領域
- documentation, web-dev
- issue の種類
- 機能追加
- 難易度
- 4/5
- 見積もり時間
- 3〜5日
- 活発さ
- 静か
- 明瞭さ
- おおむね明確
- 初心者へのやさしさ
- 48/100