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

Abierto
#1,151 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Nadie ha tomado este issue todavía.

Evaluación

Dificultad
4/5
Tiempo estimado
3-5 días
Aptitud para principiantes
48/100
Tipo de issue
Nueva funcionalidad
Claridad
Bastante claro
Estado de actividad
Tranquilo
Stack tecnológico
typescript

Línea de trabajo

Comienza con src/components/Breadcrumbs.tsx y la Google Breadcrumb structured-data guidance; después, sigue las rutas representativas de library, docs, blog, charts y partner mencionadas en el issue. Se considera terminado cuando unos datos compartidos de Breadcrumbs controlen una navegación visible accesible y JSON-LD visible en SSR, con la validación indicada y cobertura automatizada para el orden, las URLs, el escaping y las rutas excluidas.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

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.

Lenguaje dominante
TypeScript
Estrellas
1.1k
Forks
401
Merge medio
18 h 44 min
PR fusionados (30 d)
55

Guía de contribución

No hay ninguna guía de contribución indexada para este repositorio

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/tanstack.com

Todos los issues de TanStack/tanstack.com

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.