TanStack / TanStack/tanstack.com

feat(seo): add semantic breadcrumbs and BreadcrumbList structured data

Offen
#1,151 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Dieses Issue hat noch niemand übernommen.

enhancement
Vorherrschende Sprache
TypeScript
Sterne
1.1k
Forks
401
Ø Merge
18 Std. 14 Min.
Gemergte PRs (30 T.)
56

Beschreibung

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.

Beitragsleitfaden

Für dieses Repository ist kein Beitragsleitfaden indexiert

Erste Schritte

  1. Lies das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreib ins Issue, dass du es übernimmst — das erspart doppelte Arbeit.
  3. Forke das Repository und arbeite in einem Branch.
  4. Öffne einen Pull Request, der die Issue-Nummer nennt.

Rechercherichtung

Beginne mit src/components/Breadcrumbs.tsx und den Google Breadcrumb structured-data guidance und verfolge anschließend die im Issue genannten repräsentativen Routen für Bibliothek, Docs, Blog, Charts und Partner. Erledigt ist die Aufgabe, wenn gemeinsame Breadcrumb-Daten eine barrierefreie sichtbare Navigation und SSR-sichtbares JSON-LD steuern und die aufgeführte Validierung sowie die automatisierte Abdeckung für Reihenfolge, URLs, Escaping und ausgeschlossene Routen vorhanden sind.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Bewertung

Tech-Stack
typescript
Bereich
documentation, web-dev
Issue-Typ
Feature
Schwierigkeit
4/5
Geschätzter Aufwand
3-5 Tage
Aktivitätsstatus
Ruhig
Klarheit
Größtenteils klar
Anfängerfreundlichkeit
48/100

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.