Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

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

Offen
  • Stimmt etwas nicht?
#1,151 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

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

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.

Beschreibung

enhancement

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.

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

Entwicklungsumgebung

Die Einrichtungsdateien dieses Projekts haben wir noch nicht geprüft. Beginnen Sie mit der README; die allgemeinen Schritte stehen in unserem Leitfaden für den ersten Beitrag.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus TanStack/tanstack.com

Alle Issues in TanStack/tanstack.com

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

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