SEO optimization for the Documentation website

main.py

@@ -8,6 +8,7 @@
 from nicegui import app, ui
 from nicegui.page_arguments import RouteMatch
 from website import documentation, fly, header, imprint_privacy, main_page, rate_limits, svg
+from website.seo_constants import NICEGUI_TAGLINE
 
 # session middleware is required for demo in documentation
 app.add_middleware(SessionMiddleware, secret_key=os.environ.get('NICEGUI_SECRET_KEY', ''))
@@ -99,4 +100,4 @@ def _status():
 
 
 # NOTE: do not reload on fly.io (see https://github.com/zauberzeug/nicegui/discussions/1720#discussioncomment-7288741)
-ui.run(uvicorn_reload_includes='*.py, *.css, *.html', reload=not on_fly, reconnect_timeout=10.0)
+ui.run(uvicorn_reload_includes='*.py, *.css, *.html', reload=not on_fly, reconnect_timeout=10.0, title=NICEGUI_TAGLINE)

website/documentation/rendering.py

@@ -1,16 +1,40 @@
 from nicegui import ui
 
+from ..seo_constants import NICEGUI_TAGLINE
 from ..style import section_heading, subheading
 from .content import DocumentationPage
+from .content.overview import tiles
 from .custom_restructured_text import CustomRestructuredText as custom_restructured_text
 from .demo import demo
 from .reference import generate_class_doc
 
+TILES_DICT = {a.__name__.rpartition('.')[-1]: b for a, b in tiles}
+
+
+def _drop_after_params(text: str) -> str:
+    """Drop everything after the first occurrence of ':param' in the given text."""
+    param_index = text.find(':param')
+    return text[:param_index] if param_index != -1 else text
+
 
 def render_page(documentation: DocumentationPage) -> None:
     """Render the documentation."""
+    description = NICEGUI_TAGLINE
+    print(documentation.name)
+    print(TILES_DICT)
+    if documentation.name in TILES_DICT:
+        description = TILES_DICT[documentation.name]
+    elif documentation.parts and documentation.parts[0].description:
+        description = _drop_after_params(documentation.parts[0].description)
+    else:
+        description = NICEGUI_TAGLINE
+
+    if not ui.context.client.has_socket_connection:
+        ui.add_head_html(f'''
+        <meta name="description" content="{(description)}">
+            ''')
     title = (documentation.title or '').replace('*', '')
-    ui.page_title('NiceGUI' if not title else title if title.split()[0] == 'NiceGUI' else f'{title} | NiceGUI')
+    ui.page_title(NICEGUI_TAGLINE if not title else title if title.split()[0] == 'NiceGUI' else f'{title} | NiceGUI')
 
     def render_content():
         section_heading(documentation.subtitle or '', documentation.heading)

website/header.py

@@ -2,6 +2,7 @@
 from pathlib import Path
 
 from nicegui import app, ui
+from website.seo_constants import KEYWORDS
 
 from . import svg
 from .search import Search
@@ -19,6 +20,10 @@ def add_head_html() -> None:
             '<script defer data-domain="nicegui.io" src="https://plausible.io/js/script.hash.outbound-links.js">'
             '</script>'
         )
+    ui.add_head_html(f'''
+        <meta name="keywords" content="{', '.join(KEYWORDS)}">
+        <link rel="canonical" href="https://nicegui.io">
+    ''')
 
 
 def add_header(menu: ui.left_drawer) -> ui.button:

website/imprint_privacy.py

@@ -1,9 +1,13 @@
 from nicegui import ui
 from website.documentation.rendering import section_heading, subheading
+from website.seo_constants import NICEGUI_TAGLINE
 
 
 def create():
     ui.page_title('Imprint & Privacy | NiceGUI')
+    ui.add_head_html(f'''
+        <meta name="description" content="Imprint and Privacy Policy of {NICEGUI_TAGLINE}">
+    ''')
 
     with ui.column().classes('w-full p-8 lg:p-16 max-w-[1250px] mx-auto'):
         section_heading('', 'Imprint')

website/main_page.py

@@ -12,6 +12,10 @@
 
 def create() -> None:
     """Create the content of the main page."""
+    ui.add_head_html('''
+        <meta name="description" content="NiceGUI is an easy-to-use, Python-based UI framework, which shows up in your web browser. You can create buttons, dialogs, Markdown, 3D scenes, plots and much more.">
+    ''')
+
     with ui.row().classes('w-full h-screen items-center gap-8 pr-4 no-wrap into-section'):
         svg.face(half=True).classes('stroke-black dark:stroke-white w-[200px] md:w-[230px] lg:w-[300px]')
         with ui.column().classes('gap-4 md:gap-8 pt-32'):

website/seo_constants.py

@@ -0,0 +1,5 @@
+NICEGUI_TAGLINE = 'NiceGUI - The Full-Stack Python GUI Framework for the Web'  # 50 - 60 characters. This is 57.
+
+# First 5 are from PyPI. The rest from GitHub Copilot
+KEYWORDS = ['GUI', 'UI', 'Web', 'Interface', 'Live', 'Python', 'Framework', 'Dashboard', 'App',
+            'Application', 'Tool', 'Library', 'Frontend', 'Backend', 'Full-Stack', 'Components', 'Widgets', 'Open Source']

website/static/header.html

@@ -1,8 +1,3 @@
-<meta
-  name="description"
-  content="NiceGUI is an easy-to-use, Python-based UI framework, which shows up in your web browser. You can create buttons, dialogs, Markdown, 3D scenes, plots and much more."
-/>
-
 <!-- https://realfavicongenerator.net/ -->
 <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
 <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />