SEO audit fixes: docs meta/titles/H1/alt + shared redirect & structured-data

docs/advanced_onboarding/code_structure.md

@@ -9,7 +9,7 @@ The main app module is responsible for importing all other modules that make up
 
 **All other modules containing pages, state, and models MUST be imported by the main app module or package** for Reflex to include them in the compiled output.
 
-# Breaking the App into Smaller Pieces
+## Breaking the App into Smaller Pieces
 
 As applications scale, effective organization is crucial. This is achieved by breaking the application down into smaller, manageable modules and organizing them into logical packages that avoid circular dependencies.
 

docs/advanced_onboarding/how-reflex-works.md

@@ -55,7 +55,10 @@ The diagram below provides a detailed overview of how a Reflex app works. We'll
 
 ```python eval
 rx.el.a(
-    rx.image(src="https://web.reflex-assets.dev/other/architecture.webp"),
+    rx.image(
+        src="https://web.reflex-assets.dev/other/architecture.webp",
+        alt="Reflex app architecture diagram",
+    ),
     href="https://web.reflex-assets.dev/other/architecture.webp",
     target="_blank",
 )

docs/ai_builder/app_lifecycle/copy_app.md

@@ -12,6 +12,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/copy_light.avif",
+            alt="Copying an app in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/app_lifecycle/deploy_app.md

@@ -18,6 +18,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/deploy_light.avif",
+            alt="Deploying an app in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/app_lifecycle/download_app.md

@@ -13,6 +13,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/download_light.avif",
+            alt="Downloading an app in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/app_lifecycle/fork_app.md

@@ -10,6 +10,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/fork_template_light.avif",
+        alt="Forking an app in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/app_lifecycle/general.md

@@ -11,6 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/general_light.avif",
+            alt="General app settings in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/app_lifecycle/share_app.md

@@ -11,6 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/app_lifecycle/share_light.avif",
+            alt="Sharing an app in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/features/automated_testing.md

@@ -16,6 +16,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/test_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/test_dark.webp",
         ),
+        alt="Automated testing in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/features/connect_to_github.md

@@ -16,6 +16,7 @@ The Github integration is important to make sure that you don't lose your progre
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/connecting_to_github.avif",
+        alt="Connecting a Reflex AI Builder app to GitHub",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -36,6 +37,7 @@ The commit history is a great way to see the changes that you have made to your
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/github_commit_history.avif",
+        alt="GitHub commit history for a Reflex AI Builder app",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/features/customization.md

@@ -24,6 +24,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/style_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/style_dark.webp",
         ),
+        alt="Custom styling options in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -51,6 +52,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/theme_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/theme_dark.webp",
         ),
+        alt="Theme customization in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/features/editor_modes.md

@@ -11,6 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/features/diff_light.avif",
+            alt="Reflex AI Builder editor diff view",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/features/image_as_prompt.md

@@ -15,6 +15,7 @@ Below is an image showing how to upload an image to the AI Builder, you can clic
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/image_upload.avif",
+        alt="Using an image as a prompt in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/features/installing_external_packages.md

@@ -20,6 +20,7 @@ Enter the name of the package you want to install in the chat interface. The AI
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/external_packages_input.avif",
+        alt="Installing external packages via the chat interface",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -35,6 +36,7 @@ Add the package to the `requirements.txt` file and then save the app. This will
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/external_packages_requirements.avif",
+        alt="Installing external packages via requirements.txt",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/features/integration_shortcut.md

@@ -17,6 +17,7 @@ rx.el.div(
             "https://web.reflex-assets.dev/ai_builder/features/shortcut_light.webp",
             "https://web.reflex-assets.dev/ai_builder/features/shortcut_dark.webp",
         ),
+        alt="Integrations shortcut in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/features/knowledge.md

@@ -10,6 +10,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/features/knowledge_light.avif",
+            alt="Reflex AI Builder knowledge section",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),

docs/ai_builder/features/restore_checkpoint.md

@@ -10,6 +10,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/features/restore_light.avif",
+        alt="Restoring a checkpoint in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/features/secrets.md

@@ -11,6 +11,7 @@ def render_image():
     return rx.el.div(
         rx.image(
             src="https://web.reflex-assets.dev/ai_builder/features/secrets_light.avif",
+            alt="Adding secrets in Reflex AI Builder",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -49,6 +50,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/features/secret_bulk_light.avif",
+        alt="Adding secrets in bulk with the raw editor",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/figma.md

@@ -1 +1,3 @@
+# Figma Integration
+
 Integration Coming Soon!

docs/ai_builder/images.md

@@ -32,6 +32,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/add_images_to_assets.avif",
+        alt="Uploading an image to app assets in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/overview/templates.md

@@ -10,6 +10,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/templates_light.avif",
+        alt="Reflex AI Builder templates gallery",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -25,6 +26,7 @@ To use a template, simply click the template and then in the bottom right corner
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/fork_template_light.avif",
+        alt="Forking a template in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/overview/tutorial.md

@@ -33,6 +33,7 @@ import reflex as rx
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_1_light.avif",
+        alt="Creating a dashboard in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -55,6 +56,7 @@ Your dashboard now becomes much more useful with real-time filtering. Users can
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_2_light.avif",
+        alt="Adding interactive filtering in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -79,6 +81,7 @@ Your app now has full CRUD capability for employee records. The modal form provi
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_3_light.avif",
+        alt="Enabling data entry in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),
@@ -103,6 +106,7 @@ Your app now has proper navigation between the dashboard and chat functionality.
 rx.el.div(
     rx.image(
         src="https://web.reflex-assets.dev/ai_builder/overview/tutorial_4_light.avif",
+        alt="Building a multi-page app in Reflex AI Builder",
         class_name="rounded-md h-auto",
         border=f"0.81px solid {rx.color('slate', 5)}",
     ),

docs/ai_builder/overview/what_is_reflex_build.md

@@ -130,6 +130,7 @@ def _docs_app_section_features_small_screen(feature: dict):
     return rx.el.div(
         rx.image(
             src=feature["img"],
+            alt="Reflex Build feature illustration",
             class_name="rounded-md h-auto",
             border=f"0.81px solid {rx.color('slate', 5)}",
         ),
@@ -179,6 +180,7 @@ def _docs_app_sections():
         rx.el.div(
             rx.image(
                 src=features_data[0]["img"],
+                alt="Reflex Build feature illustration",
                 class_name="rounded-md h-auto",
                 border=f"0.81px solid {rx.color('slate', 5)}",
             ),

docs/api-reference/browser_javascript.md

@@ -219,7 +219,7 @@ def global_key_demo():
             ),
         ),
         rx.text("Press a, s, d or w to trigger an event"),
-        rx.heading(f"Last watched key pressed: {GlobalHotkeyState.key}"),
+        rx.heading(f"Last watched key pressed: {GlobalHotkeyState.key}", as_="h2"),
     )
 ```
 

docs/api-reference/browser_storage.md

@@ -204,7 +204,7 @@ rx.button(
 )
 ```
 
-# Serialization Strategies
+## Serialization Strategies
 
 If a non-trivial data structure should be stored in a `Cookie`, `LocalStorage`, or `SessionStorage` var it needs to be serialized before and after storing it. It is recommended to use a pydantic class for the data which provides simple serialization helpers and works recursively in complex object structures.
 
@@ -298,7 +298,7 @@ def app_settings_example():
     )
 ```
 
-# Comparison of Storage Types
+## Comparison of Storage Types
 
 Here's a comparison of the different client-side storage options in Reflex:
 
@@ -313,7 +313,7 @@ Here's a comparison of the different client-side storage options in Reflex:
 | Syncing Across Tabs | No                                | Yes (with sync=True)        | No                          |
 | Use Case            | Authentication, Server-side state | User preferences, App state | Temporary session data      |
 
-# When to Use Each Storage Type
+## When to Use Each Storage Type
 
 ## Use rx.Cookie When:
 

docs/api-reference/event_triggers.md

@@ -75,7 +75,7 @@ def protected_page():
 
 For more details on page load events, see the [page load events documentation](/docs/events/page-load-events).
 
-# Event Reference
+## Event Reference
 
 ---
 
@@ -225,7 +225,7 @@ class MountState(rx.State):
 
 def mount_example():
     return rx.vstack(
-        rx.heading("Component Lifecycle Demo"),
+        rx.heading("Component Lifecycle Demo", as_="h2"),
         rx.foreach(MountState.events, rx.text),
         rx.cond(
             MountState.loading,
@@ -261,7 +261,7 @@ class UnmountState(rx.State):
 
 def unmount_example():
     return rx.vstack(
-        rx.heading("Unmount Demo"),
+        rx.heading("Unmount Demo", as_="h2"),
         rx.foreach(UnmountState.events, rx.text),
         rx.text(UnmountState.status),
         rx.link(

docs/api-reference/utils.md

@@ -103,7 +103,7 @@ class RunInThreadState(rx.State):
 
 def run_in_thread_example():
     return rx.vstack(
-        rx.heading("run_in_thread Example", size="3"),
+        rx.heading("run_in_thread Example", as_="h2", size="3"),
         rx.hstack(
             rx.button(
                 "Run Quick Task",