docs: SEO optimization for tables and data grids

docs/app/reflex_docs/pages/docs/__init__.py

@@ -357,14 +357,33 @@ def handle_library_doc(
         graphing_components[resolved.category].append(clist)
     else:
         component_list[resolved.category].append(clist)
+    # Library docs render via multi_docs (not make_docpage), so without this
+    # they'd inherit the generic site-wide meta description. Derive a
+    # page-specific meta description from the doc's frontmatter/body prose, and
+    # prefer an explicit frontmatter `title:` for the page title.
+    try:
+        source: str | None = Path(actual_path).read_text(encoding="utf-8")
+        document = parse_document(source)
+    except Exception:
+        source, document = None, None
+    frontmatter = document.frontmatter if document is not None else None
+    metadata = dict(frontmatter.metadata) if frontmatter is not None else None
+    description = extract_doc_description(source, metadata) if source else None
+    display_title = (
+        frontmatter.title
+        if frontmatter is not None and frontmatter.title
+        else resolved.display_title
+    )
     return multi_docs(
         path=resolved.route,
         virtual_path=doc,
         actual_path=actual_path,
         previews=previews,
         component_list=clist,
-        title=resolved.display_title,
+        title=display_title,
         ll_component_list=ll_clist,
+        description=description,
+        source=source,
     )
 
 

docs/app/reflex_docs/pages/docs/component.py

@@ -930,6 +930,8 @@ def multi_docs(
     component_list: list,
     title: str,
     ll_component_list: list | None = None,
+    description: str | None = None,
+    source: str | None = None,
 ):
     components = [
         component_docs(component_tuple, previews)
@@ -990,10 +992,15 @@ def links(current_page, ll_doc_exists, path):
                 )
         return rx.fragment()
 
-    @docpage(set_path=path, t=title)
+    @docpage(set_path=path, t=title, description=description)
     def out():
         toc = get_docgen_toc(actual_path)
-        doc_content = Path(actual_path).read_text(encoding="utf-8")
+        # Reuse the source already read by the caller to avoid a second read.
+        doc_content = (
+            source
+            if source is not None
+            else Path(actual_path).read_text(encoding="utf-8")
+        )
         # Append API Reference headings for the component list
         if components:
             toc.append((1, "API Reference"))
@@ -1018,7 +1025,13 @@ def out():
             class_name="flex flex-col w-full",
         )
 
-    @docpage(set_path=path + "low", t=title + " (Low Level)")
+    # Differentiate the low-level page's meta description so search engines
+    # don't see it as a duplicate of the high-level page's description.
+    ll_description = f"{description} (low-level API reference)" if description else None
+
+    @docpage(
+        set_path=path + "low", t=title + " (Low Level)", description=ll_description
+    )
     def ll():
         ll_virtual = virtual_path.replace(".md", "-ll.md")
         toc = get_docgen_toc(ll_actual_path)

docs/app/reflex_docs/pages/library_previews.py

@@ -103,7 +103,8 @@ def create_previews(
     @docpage(
         right_sidebar=False,
         set_path=f"/library{prefix.rstrip('/')}/" + path.strip("/") + "/",
-        page_title=component_category + " Component Library · Reflex Docs",
+        page_title=f"{get_display_name(component_category)} Component Library · Reflex Docs",
+        description=description,
     )
     def page() -> rx.Component:
         from reflex_docs.templates.docpage.sidebar.sidebar_items import (
@@ -195,7 +196,7 @@ def page() -> rx.Component:
     },
     "tables_and_data_grids": {
         "path": "tables-and-data-grids",
-        "description": "Powerful table components for organizing and displaying data efficiently. Includes versatile options like standard tables, interactive datatables, and editable data grids. Perfect for creating responsive, user-friendly interfaces that present information clearly and allow for easy data manipulation.",
+        "description": "Build tables and data grids in Python with Reflex. Includes a composable table, a searchable and sortable data table for pandas DataFrames, and an editable data grid — perfect for dashboards and data apps, all in pure Python.",
         "component_category": "Tables-And-Data-Grids",
     },
     "typography": {

docs/library/tables-and-data-grids/data_editor.md

@@ -1,11 +1,12 @@
 ---
 components:
   - rx.data_editor
+meta_description: "Build an editable data grid in Python with Reflex. The rx.data_editor component is a fast, spreadsheet-like data grid based on Glide Data Grid for editing tabular data — all in pure Python."
 ---
 
 # Data Editor
 
-A datagrid editor based on [Glide Data Grid](https://grid.glideapps.com/)
+The Reflex data editor (`rx.data_editor`) is a fast, editable data grid based on [Glide Data Grid](https://grid.glideapps.com/). Use it for spreadsheet-like editing of tabular data in pure Python — add, edit, and format cells across many rows and columns.
 
 ```python exec
 import reflex as rx
@@ -453,3 +454,11 @@ rx.data_editor(
     height="30vh",
 )
 ```
+
+## Related
+
+Explore the other ways to work with tabular data in Reflex, all in pure Python:
+
+- [Data Table](/docs/library/tables-and-data-grids/data-table)
+- [Table](/docs/library/tables-and-data-grids/table)
+- [Tables and Data Grids](/docs/library/tables-and-data-grids/)

docs/library/tables-and-data-grids/data_table.md

@@ -1,6 +1,7 @@
 ---
 components:
   - rx.data_table
+meta_description: "Display data in an interactive table in Python with Reflex. The rx.data_table component turns a pandas DataFrame into a searchable, sortable, paginated data table — all in pure Python."
 ---
 
 ```python exec
@@ -9,8 +10,8 @@ import reflex as rx
 
 # Data Table
 
-The data table component is a great way to display static data in a table format.
-You can pass in a pandas dataframe to the data prop to create the table.
+Reflex's data table component (`rx.data_table`) is a great way to display static data — such as a pandas DataFrame — as an interactive table in pure Python.
+You can pass a pandas dataframe to the data prop to create the table, with built-in search, sorting, and pagination.
 
 In this example we will read data from a csv file, convert it to a pandas dataframe and display it in a data_table.
 
@@ -68,3 +69,11 @@ def index():
         columns=State.columns,
     )
 ```
+
+## Related
+
+Explore the other ways to work with tabular data in Reflex, all in pure Python:
+
+- [Table](/docs/library/tables-and-data-grids/table)
+- [Data Editor](/docs/library/tables-and-data-grids/data-editor)
+- [Tables and Data Grids](/docs/library/tables-and-data-grids/)

docs/library/tables-and-data-grids/table.md

@@ -1,4 +1,5 @@
 ---
+meta_description: "Build tables in Python with Reflex. The rx.table component is a semantic, composable React table for presenting tabular data with headers, rows, and cells — all in pure Python, no JavaScript."
 components:
   - rx.table.root
   - rx.table.header
@@ -149,7 +150,7 @@ class Customer(rx.Model, table=True):
 
 # Table
 
-A semantic table for presenting tabular data.
+The Reflex table component (`rx.table`) is a semantic, composable table for presenting tabular data in pure Python. It renders a standard React/HTML table with headers, rows, and cells that you compose yourself.
 
 If you just want to [represent static data](/docs/library/tables-and-data-grids/data-table) then the [`rx.data_table`](/docs/library/tables-and-data-grids/data-table) might be a better fit for your use case as it comes with in-built pagination, search and sorting.
 
@@ -1303,3 +1304,11 @@ rx.flex(
     spacing="2",
 )
 ```
+
+## Related
+
+Explore the other ways to work with tabular data in Reflex, all in pure Python:
+
+- [Data Table](/docs/library/tables-and-data-grids/data-table)
+- [Data Editor](/docs/library/tables-and-data-grids/data-editor)
+- [Tables and Data Grids](/docs/library/tables-and-data-grids/)

packages/reflex-docgen/news/6704.bugfix.md

@@ -0,0 +1 @@
+Fixed `meta_description` and `description` frontmatter keys being misinterpreted as component preview lambdas.

packages/reflex-docgen/src/reflex_docgen/markdown/_parser.py

@@ -40,7 +40,13 @@
 
 
 #: Known frontmatter keys that are not component preview lambdas.
-_KNOWN_KEYS = frozenset({"components", "only_low_level", "title"})
+_KNOWN_KEYS = frozenset({
+    "components",
+    "only_low_level",
+    "title",
+    "meta_description",
+    "description",
+})
 
 
 def _extract_frontmatter(source: str) -> tuple[FrontMatter | None, str]: