Hacktoberfest 2026 : les issues que les mainteneurs ont marquées pour octobre, ouvertes et accessibles aux débutants. Parcourir les issues Hacktoberfest

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

Ouverte
#1,151 0 commentaires 0 réactions 0 personnes assignées Voir sur GitHub

Personne n'a encore pris cette issue.

Évaluation

Difficulté
4/5
Temps estimé
3-5 jours
Accessibilité débutants
48/100
Type d'issue
Fonctionnalité
Clarté
Plutôt claire
Activité
Calme
Stack technique
typescript

Piste de recherche

Commencez par src/components/Breadcrumbs.tsx et la Google Breadcrumb structured-data guidance, puis suivez les routes représentatives de library, docs, blog, charts et partner mentionnées dans l’issue. Le travail est terminé lorsque des données Breadcrumb partagées alimentent une navigation visible accessible ainsi que du JSON-LD visible côté SSR, avec la validation indiquée et une couverture automatisée de l’ordre, des URLs, de l’échappement et des routes exclues.

Rédigé par le modèle d'indexation à partir du texte de l'issue.

Description

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.

Langage dominant
TypeScript
Étoiles
1.1k
Forks
401
Merge moyen
16 h 8 min
PR mergées (30 j)
58

Guide de contribution

Aucun guide de contribution indexé pour ce dépôt

Par où commencer

  1. Lisez l'issue en entier, puis le guide de contribution du projet.
  2. Signalez en commentaire que vous la prenez — cela évite que deux personnes fassent le même travail.
  3. Forkez le dépôt et travaillez sur une branche.
  4. Ouvrez une pull request qui référence le numéro de l'issue.

Autres issues de TanStack/tanstack.com

Toutes les issues de TanStack/tanstack.com

Issues similaires

Plus d'issues TypeScript

Recevez les nouvelles issues par e-mail

Un résumé court des issues GitHub adaptées aux débutants.