Skip to content

docs: SEO optimization for tables and data grids#6704

Merged
carlosabadia merged 2 commits into
mainfrom
claude/tables-data-grids-seo
Jul 3, 2026
Merged

docs: SEO optimization for tables and data grids#6704
carlosabadia merged 2 commits into
mainfrom
claude/tables-data-grids-seo

Conversation

@Alek99

@Alek99 Alek99 commented Jul 2, 2026

Copy link
Copy Markdown
Member

Summary

On-page SEO pass across the tables & data grids docs, grounded in Ahrefs keyword data. Each page now targets the relevant, winnable terms via a keyword-rich intro + a page-specific meta description, plus a new section overview page and internal cross-links.

Type of change

  • This change requires a documentation update (it is a documentation update, plus small supporting docs-infra changes)

What changed

Content

  • Data Table (data_table.md) β€” targets "data table" (16K/mo), "python table" (KD 0), "react data table", "pandas table". Intro now names the component and its pandas DataFrame / search / sort / pagination use case.
  • Data Editor (data_editor.md) β€” targets "datagrid" / "react data grid", "glide data grid" (exact match, KD 1), "editable table", "spreadsheet". Intro rewritten from a one-liner into a keyword-relevant description.
  • Table (table.md) β€” targets "react table" / "react table component" / "table component" via the intro + meta description.
  • New overview page at /library/tables-and-data-grids/ β€” the section root had no content; this targets "data table" / "python table" / "data grid" and links to all three components (also acts as an internal-linking hub).
  • "Related" cross-links added between the three pages.

Supporting docs-infra (shared with the graphing SEO PR #6703)

  • Thread a page-specific meta description through multi_docs β†’ docpage β€” library docs previously inherited the generic site-wide description.
  • Add meta_description/description to the docgen frontmatter known-keys so they aren't misparsed as component-preview lambdas.
  • Render library index.md as a normal doc (not a component) so section overview pages work.

⚠️ Overlap: the three "docs-infra" files here (pages/docs/__init__.py, pages/docs/component.py, reflex-docgen/.../_parser.py) are also touched by #6703. Whichever merges first, the other should rebase β€” the changes are compatible.

Testing

  • ruff check + ruff format --check pass on changed Python files.
  • All frontmatter validated as YAML (incl. table.md's large frontmatter), meta descriptions 184–195 chars, all internal links verified to resolve.
  • ⚠️ I could not run the full pytest suite or reflex compile in the sandbox (pinned Python toolchain unavailable). Please run the docs build + unit tests in CI before merging.

Notes

Rankings move only after deploy + re-crawl (~1–4 weeks). "react table" (KD 48) and "html table" (KD 66) are competitive and unlikely to crack quickly; the realistic near-term wins are "python table", "glide data grid", "editable table", "react data grid", and "data table example".

πŸ€– Generated with Claude Code

https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR


Generated by Claude Code

Optimize the tables & data grids docs, grounded in Ahrefs keyword data:

- Data Table: target "data table" (16K/mo), "python table" (KD 0), "react
  data table", "pandas table"; keyword-rich intro + meta description.
- Data Editor: target "datagrid"/"react data grid", "glide data grid" (exact
  match, KD 1), "editable table", "spreadsheet"; intro + meta description.
- Table: target "react table"/"react table component", "table component".
- New overview page at /library/tables-and-data-grids/ (the section root had
  no content) targeting "data table"/"python table"/"data grid" and linking
  to all three components.
- "Related" cross-links between the three pages.

Supporting docs-infra (shared with the graphing SEO PR #6703): thread a
page-specific meta description through multi_docs (library docs previously
inherited the generic site-wide description); add meta_description/description
to the docgen frontmatter known-keys so they aren't parsed as component
previews; render library index.md as a normal doc so section overview pages
work.

Note: I could not run the full pytest suite / reflex compile in the sandbox
(pinned Python toolchain unavailable); validated ruff, YAML, and links.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR
@codspeed-hq

codspeed-hq Bot commented Jul 2, 2026

Copy link
Copy Markdown

Merging this PR will not alter performance

βœ… 26 untouched benchmarks
⏩ 8 skipped benchmarks1


Comparing claude/tables-data-grids-seo (f82dda9) with main (4c63f00)

Open in CodSpeed

Footnotes

  1. 8 benchmarks were skipped, so the baseline results were used instead. If they were deleted from the codebase, click here and archive them to remove them from the performance reports. ↩

@greptile-apps

greptile-apps Bot commented Jul 2, 2026

Copy link
Copy Markdown
Contributor

Greptile Summary

This PR performs an SEO pass on the tables and data grids documentation section, adding keyword-rich intros, page-specific meta descriptions, and "Related" cross-link sections to data_table.md, data_editor.md, and table.md. It also ships the supporting docs-infra to make this work: threading a description param through multi_docs β†’ docpage, fixing _KNOWN_KEYS in the docgen parser so meta_description/description frontmatter fields aren't misinterpreted as component preview lambdas, and normalizing library overview page titles via get_display_name().

  • Content changes: Three markdown docs each gain a meta_description frontmatter field, an expanded first-paragraph intro targeting relevant search terms, and a "Related" section linking to the other two components and the section overview.
  • Docs-infra changes: handle_library_doc now reads and parses each doc's frontmatter at startup to derive a page-specific meta description, passing it (and the already-read source) into multi_docs to avoid redundant file I/O; the low-level variant appends " (low-level API reference)" to differentiate its description from the parent page.
  • Parser fix: meta_description and description are added to _KNOWN_KEYS in reflex-docgen, preventing them from being misinterpreted as component preview lambda sources β€” a genuine bug fix that would have caused render errors for any doc using these fields.

Confidence Score: 5/5

Safe to merge β€” all changes are documentation content and narrow docs-infra wiring with no runtime logic altered.

The Python changes are additive and well-scoped: new optional parameters with None defaults, a broad except Exception guard around the new file-read path so a parse failure degrades gracefully to no description rather than crashing, and the parser fix corrects a latent bug without touching any rendering logic. The markdown changes are content-only. No existing behavior is removed or altered.

No files require special attention. The overlap with PR #6703 noted in the description means a rebase will be needed on whichever merges second, but the changes are described as compatible.

Important Files Changed

Filename Overview
docs/app/reflex_docs/pages/docs/init.py Adds source read + description extraction in handle_library_doc, passing both to multi_docs to enable page-specific meta descriptions for library docs
docs/app/reflex_docs/pages/docs/component.py Adds description and source params to multi_docs; reuses pre-read source in out() to avoid redundant I/O; differentiates low-level page meta description with "(low-level API reference)" suffix
docs/app/reflex_docs/pages/library_previews.py Updates tables-and-data-grids category description for SEO; fixes page_title to use get_display_name() for proper casing; passes description to docpage decorator
packages/reflex-docgen/src/reflex_docgen/markdown/_parser.py Adds meta_description and description to _KNOWN_KEYS so these frontmatter fields are not misinterpreted as component preview lambdas; formatting changed to multiline frozenset
docs/library/tables-and-data-grids/data_editor.md Adds meta_description frontmatter, rewrites intro for SEO keyword coverage, adds Related section with cross-links
docs/library/tables-and-data-grids/data_table.md Adds meta_description frontmatter, expands intro to mention search/sort/pagination, adds Related section
docs/library/tables-and-data-grids/table.md Adds meta_description as first frontmatter key, rewrites intro for SEO, adds Related section with cross-links
packages/reflex-docgen/news/6704.bugfix.md Changelog entry for the meta_description/description frontmatter fix in reflex-docgen

Reviews (2): Last reviewed commit: "fix: resolve CI failures on tables/data-..." | Re-trigger Greptile

Comment thread docs/app/reflex_docs/pages/docs/component.py Outdated
Comment thread docs/app/reflex_docs/pages/docs/__init__.py
- Duplicate route: the section root /library/tables-and-data-grids/ is already
  served by the create_previews gallery page, so the new index.md collided
  (test_unique_routes). Remove index.md and its routing bypass; instead give
  the existing preview page a real meta description by passing `description`
  into its docpage (it was only used as visible body text before), clean up
  its <title>, and make the tables description keyword-rich.
- changelog: add a news fragment for the reflex-docgen parser fix.

Also addresses two review comments:
- Low-level docpages no longer emit a duplicate meta description (a
  "(low-level API reference)" qualifier differentiates them).
- multi_docs reuses the source already read in handle_library_doc instead of
  re-reading the markdown file.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR
Alek99 pushed a commit that referenced this pull request Jul 2, 2026
- Duplicate route: the section root /library/graphing/general/ is already
  served by the create_previews gallery page, so the new index.md collided
  (test_unique_routes). Remove index.md and its routing bypass; instead give
  the existing preview pages real meta descriptions by passing `description`
  into their docpage, clean up their <title>, and make the charts/general/
  other-charts descriptions keyword-rich (python charts, data visualization,
  recharts, plotly, matplotlib).
- changelog: add a news fragment for the reflex-docgen parser fix.

Also addresses two review comments (same as #6704): low-level docpages no
longer emit a duplicate meta description, and multi_docs reuses the source
already read in handle_library_doc instead of re-reading the file.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR
@adhami3310 adhami3310 added the documentation Improvements or additions to documentation label Jul 3, 2026
@carlosabadia carlosabadia marked this pull request as ready for review July 3, 2026 08:16
@carlosabadia carlosabadia requested a review from a team as a code owner July 3, 2026 08:16
@carlosabadia carlosabadia merged commit a73404a into main Jul 3, 2026
108 checks passed
@carlosabadia carlosabadia deleted the claude/tables-data-grids-seo branch July 3, 2026 08:18
carlosabadia pushed a commit that referenced this pull request Jul 3, 2026
* docs: improve SEO for graphing chart pages

The graphing chart docs (Recharts-based) target high-value, low-difficulty
terms β€” "recharts" (8.4K US/mo, KD 5), "recharts bar/line/area/pie chart"
(KD ~0), where the pages already ranked page 1 but with weak on-page signals.

Two structural gaps hurt every chart page:

- Library docs render via `multi_docs`, which never passed a `description`,
  so every chart (and every other component doc) inherited the generic
  site-wide meta description. `handle_library_doc` now derives a page-specific
  meta description from the doc's frontmatter/body via `extract_doc_description`
  and threads it through `multi_docs` -> `docpage`.
- Titles came from the title-cased filename, rendering "Barchart" instead of
  "Bar Chart". Docs now honor an explicit frontmatter `title:` for a clean,
  keyword-rich page title (and sidebar label).

Each chart page gains a `title:` and a keyword-rich `meta_description:`
(Recharts + Python + chart type), and the intro prose mentions Reflex,
Recharts, and pure Python naturally. The Plotly and Pyplot pages get the same
treatment (pyplot targets "pyplot", 1.5K/mo).

Adds `meta_description`/`description` to the docgen frontmatter known-keys so
they aren't misparsed as component-preview lambdas, with regression tests.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: target general graphing terms and high-value synonyms in chart docs

Broaden the chart docs beyond "recharts X chart" to the general graphing
terms people actually search, and fix term mismatches surfaced by keyword
data:

- Scatter page now leads with "scatter plot" (31K/mo) alongside "scatter
  chart" β€” the page was titled for the less-searched phrasing.
- Pie page calls out "donut chart" (1.9K/mo, KD 3) in the intro.
- Radar page calls out its "spider chart" synonym (radar chart's parent
  topic in Ahrefs).
- Plotly meta description now names the winnable Plotly long-tail
  (Plotly Express, heatmaps, histograms) rather than the KD 47-57 head.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: add Plotly Express chart examples targeting winnable Plotly terms

The Plotly page ranked for essentially nothing (only "reflex charts", vol 10)
despite a cluster of low-difficulty Plotly Express terms β€” plotly express
(450, KD 12), plotly heatmap (250, KD 2), plotly scatter plot (200, KD 8),
plotly bar chart (150, KD 4), plotly pie chart (90, KD 2). The page only
demonstrated a line chart, a 3D surface, and state usage, so it had no on-page
content matching those queries.

Add a "Plotly Express Chart Types" section with runnable bar, scatter, pie,
and heatmap examples (offline px.data datasets), giving the page keyword-aligned
headings and code for the terms above.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: add Plotly histogram and box plot examples

Research surfaced two more winnable, Plotly-native terms with no matching
on-page content: histogram python (1.1K/mo, KD 11, traffic potential 11K)
and box plot python (KD 22). Add px.histogram and px.box examples to the
Plotly Express section.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: cross-link chart pages to fix near-zero internal linking

Per-page SEO audit found 6 of 10 chart docs had no internal links and the
rest had only one, so the sibling pages passed no anchor-text signal or link
authority to each other. Add a keyword-anchored "Related Charts" section
(3 related chart types each) to every chart page that lacked cross-links.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: expand thin chart pages (composed, error bar, radial bar)

The per-page SEO audit flagged three pages as too thin to rank well
(94/122/175 words of prose). Deepen each with explanation and, where useful,
a second worked example:

- Composed Chart: add "When to Use" guidance and a dual-axis bar+line example
  (y_axis_id), plus a Related Charts section.
- Error Bar: explain symmetric vs asymmetric [low, high] errors and the
  direction prop, and add an error-bars-on-a-line-chart example.
- Radial Bar Chart: de-duplicate the definition and add a "When to Use"
  section covering inner/outer radius, start/end angle, min_angle, background.

All added demo blocks use valid Recharts APIs (Line accepts ErrorBar; Bar/Line
support y_axis_id) and parse cleanly.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: fix chart sidebar labels to use frontmatter titles

The sidebar labelled chart pages from the filename key via get_display_name,
so single-word filenames rendered as "Areachart", "Composedchart", etc. β€”
the frontmatter title fix only reached the page <title>, not the nav, because
the sidebar reads clist[0] (also used to build the URL).

Record each doc's frontmatter title in a filename-keyed map and have the
sidebar prefer it for the label while still deriving the link from the
filename. Sidebar now shows "Area Chart", "Composed Chart", etc., with URLs
unchanged.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: target high-traffic chart variant keywords (stacked, gauge, combo, react)

Keyword research surfaced high-volume, low-difficulty terms that map to
existing Recharts features but had no on-page content:

- Bar chart: add a Stacked Bar Chart example (stack_id) targeting "stacked
  bar chart" (5.4K/mo, KD 0) plus "segmented"/"100 stacked"; note grouped/
  clustered on the multiple-bars section and horizontal on the vertical-layout
  section ("grouped bar chart" 1.1K, "clustered" 1.3K, "horizontal" 1.2K).
- Radial bar: frame the half-circle example as a gauge chart ("gauge chart"
  2.8K/mo, KD 6).
- Area: rename the stacking section to "Stacked Area Chart" ("stacked area
  chart" 1K, KD 5).
- Composed: note the "combo chart" synonym (600/mo).
- Line: note "multi-line chart".
- All chart pages: describe Recharts as "a React charting library" so the
  pages also match react bar/line/pie chart intent (Reflex compiles to React).

Bar and radial-bar meta descriptions updated with the new terms. All demo
blocks parse and frontmatter is valid YAML.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: add Treemap page and bubble chart example

Two more high-traffic, on-Recharts opportunities with no existing content:

- Bubble chart (5.5K/mo, KD 14): a scatter chart with a z_axis controlling
  point size. Add a "Bubble Chart" example to the scatter page and mention it
  in the meta description.
- Treemap (rx.recharts.treemap ships in Reflex but had no doc page): new
  treemap.md targeting "treemap chart" (1K/mo, KD 28) / "python treemap",
  with a simple example and an aspect_ratio example.

Verified rx.recharts.z_axis (data_key + range) and ScatterChart's valid
children include ZAxis; Treemap exposes data/data_key/name_key/aspect_ratio.
All demo blocks parse and frontmatter is valid YAML.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: add SEO-optimized graphing overview page at /graphing/general/

The /library/graphing/general/ URL had no backing content β€” the sidebar's
"Overview" link pointed at an unbacked route. Add a real overview page there,
targeting category terms (python data visualization, python charts, python
dashboard, recharts) and acting as an internal-linking hub to every chart
type, the general customization components, and the Plotly/Pyplot pages.

Library section index.md files are now excluded from handle_library_doc (they
were being mis-registered as components, which would add a stray sidebar item
with a broken link) and render as normal docs instead, matching how the
enterprise section index pages already work. A manual title gives the page a
keyword-rich <title>.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* fix: resolve CI failures on graphing/charts SEO

- Duplicate route: the section root /library/graphing/general/ is already
  served by the create_previews gallery page, so the new index.md collided
  (test_unique_routes). Remove index.md and its routing bypass; instead give
  the existing preview pages real meta descriptions by passing `description`
  into their docpage, clean up their <title>, and make the charts/general/
  other-charts descriptions keyword-rich (python charts, data visualization,
  recharts, plotly, matplotlib).
- changelog: add a news fragment for the reflex-docgen parser fix.

Also addresses two review comments (same as #6704): low-level docpages no
longer emit a duplicate meta description, and multi_docs reuses the source
already read in handle_library_doc instead of re-reading the file.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* fix: satisfy pyright in docgen frontmatter test

fm.metadata is typed Mapping[str, object]; coerce the value to str before
calling .startswith so pyright (pre-commit) passes.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* test: rename misleading docgen description test

The test extracts meta_description from the frontmatter block, not the body;
rename from _from_body to _from_frontmatter to match (review nit).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

* docs: fold PR #6702's Plotly H1 and intro into the charts SEO PR

#6702 (an earlier Plotly-only SEO PR) overlaps this PR on plotly.md and is a
subset of it, except for a stronger, keyword-rich H1 and a richer intro.
Adopt those here so this PR fully supersedes #6702:

- H1: "Plotly" -> "Plotly in Python: Interactive Charts with Reflex"
- Intro rewritten to lead with the Plotly link, name the figure types, and
  note the no-JavaScript / live-state angle.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Ez43BK9AhhMPMdRcFmMEPR

---------

Co-authored-by: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

documentation Improvements or additions to documentation

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants