feat(hub): search title, description, canonical and noscript in the shell

A descriptive <title>, a two-line meta description apart from the
short one messengers get, "/" canonical for every shell path, and a
<noscript> pitch with the download and doc links for crawlers that
do not run app.js.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

1 files changed, 30 insertions, 3 deletions

diff --git a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
index c9cb8d5..1d3bc7e 100644
--- a/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
+++ b/packages/meshbay-hub/src/meshbay_hub/api/webapp.py
@@ -164,11 +164,20 @@ async def index():
 # square icon, which is the shape a thumbnail is cut to anyway.
 PREVIEW_DESCRIPTION = "Your files stay at home. Reach them from anywhere."
 
+# What a search engine shows under the link: two lines, about 150 characters,
+# so it can say what the preview has no room for. welcome.lead, shortened.
+SEARCH_TITLE = "MeshBay — private, encrypted sharing from your own computer"
+SEARCH_DESCRIPTION = ("Your photos, music, videos and conversations stay on your "
+                      "own computer. MeshBay lets you reach them from anywhere "
+                      "and share them with the people you choose.")
+
 
 def _preview_tags(hub_id: str) -> str:
     origin = html.escape(f"https://{hub_id}", quote=True)
     return f"""\
-  <meta name="description" content="{PREVIEW_DESCRIPTION}">
+  <meta name="description" content="{SEARCH_DESCRIPTION}">
+  <!-- "/" and every /app/* path serve this same shell: one URL for all. -->
+  <link rel="canonical" href="{origin}/">
   <meta property="og:type" content="website">
   <meta property="og:site_name" content="MeshBay">
   <meta property="og:title" content="MeshBay">
@@ -203,13 +212,31 @@ _HTML = """\
        Ignored by browsers that do not know it. -->
   <meta name="viewport"
         content="width=device-width, initial-scale=1, interactive-widget=resizes-content">
-  <title>MeshBay</title>
+  <title>{title}</title>
 {preview}  <link rel="icon" href="/a/{v}/favicon.ico" sizes="16x16 32x32 48x48">
   <link rel="apple-touch-icon" href="/a/{v}/apple-touch-icon.png">
   <link rel="stylesheet" href="/a/{v}/style.css">
 </head>
 <body>
   <div id="app"></div>
+  <!-- The only text in this page before app.js runs: what a crawler that does
+       not execute scripts reads and follows, and what a browser with scripts
+       off shows instead of a blank page. The links are the welcome page's
+       (auth-page.js), pointing at the project's site like it does. -->
+  <noscript>
+    <h1>MeshBay</h1>
+    <p>Your photos, music, videos and conversations stay at home, on your own
+      computer. MeshBay lets you enjoy them from anywhere, and share them with
+      the people you choose.</p>
+    <p>Signing in needs JavaScript, which is turned off in this browser.</p>
+    <ul>
+      <li><a href="https://meshbay.org/downloads/">Download (beta)</a></li>
+      <li><a href="https://git.meshbay.org/meshbay.git/about/docs/QUICKSTART.md">Quick start</a></li>
+      <li><a href="https://git.meshbay.org/meshbay.git/about/docs/USERGUIDE.md">User guide</a></li>
+      <li><a href="https://git.meshbay.org/meshbay.git/about/">Source code</a></li>
+      <li><a href="https://meshbay.org/legal/">Legal information</a></li>
+    </ul>
+  </noscript>
   <!-- Everything below is loaded from a path that carries the fingerprint of
        what we are serving, so a browser holding a heuristically-cached copy of
        an older build fetches this one instead of deciding it need not ask —
@@ -239,6 +266,6 @@ _HTML = """\
   <script type="module" src="/a/{v}/app.js"></script>
 </body>
 </html>
-""".replace("{v}", ASSET_V)
+""".replace("{v}", ASSET_V).replace("{title}", html.escape(SEARCH_TITLE))
 
 _shell = _HTML.replace("{preview}", _preview_tags("meshbay.org"))