feat: Inject description and canonical url into public share links

server/routes/index.ts

@@ -47,7 +47,17 @@ const readIndexFile = async (ctx: Context): Promise<Buffer> => {
   });
 };
 
-const renderApp = async (ctx: Context, next: Next, title = "Outline") => {
+const renderApp = async (
+  ctx: Context,
+  next: Next,
+  options: { title?: string; description?: string; canonical?: string } = {}
+) => {
+  const {
+    title = "Outline",
+    description = "A modern team knowledge base for your internal documentation, product specs, support answers, meeting notes, onboarding, &amp; more…",
+    canonical = ctx.request.href,
+  } = options;
+
   if (ctx.request.path === "/realtime/") {
     return next();
   }
@@ -61,6 +71,8 @@ const renderApp = async (ctx: Context, next: Next, title = "Outline") => {
     .toString()
     .replace(/\/\/inject-env\/\//g, environment)
     .replace(/\/\/inject-title\/\//g, title)
+    .replace(/\/\/inject-description\/\//g, description)
+    .replace(/\/\/inject-canonical\/\//g, canonical)
     .replace(/\/\/inject-prefetch\/\//g, shareId ? "" : prefetchTags)
     .replace(/\/\/inject-slack-app-id\/\//g, env.SLACK_APP_ID || "");
 };
@@ -83,7 +95,15 @@ const renderShare = async (ctx: Context, next: Next) => {
 
   // Allow shares to be embedded in iframes on other websites
   ctx.remove("X-Frame-Options");
-  return renderApp(ctx, next, share?.document?.title);
+
+  // Inject share information in SSR HTML
+  return renderApp(ctx, next, {
+    title: share?.document?.title,
+    description: share?.document?.getSummary(),
+    canonical: share
+      ? ctx.request.href.replace(ctx.request.origin, share.team.url)
+      : undefined,
+  });
 };
 
 // serve static assets

server/static/index.html

@@ -5,9 +5,10 @@
     <meta name="theme-color" content="#FFF" />
     <meta name="slack-app-id" content="//inject-slack-app-id//" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <meta name="color-scheme" content="light dark">
+    <meta name="color-scheme" content="light dark" />
-    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-capable" content="yes" />
-    <meta name="description" content="A modern team knowledge base for your internal documentation, product specs, support answers, meeting notes, onboarding, &amp; more…">
+    <meta name="description" content="//inject-description//" />
+    <link rel="canonical" href="//inject-canonical//" />
     //inject-prefetch//
     <link
       rel="shortcut icon"
@@ -54,10 +55,15 @@
       //inject-env//
     </script>
     <script>
-      if (window.localStorage && window.localStorage.getItem("theme") === "dark") {
+      if (
+        window.localStorage &&
+        window.localStorage.getItem("theme") === "dark"
+      ) {
         var color = "#111319";
         document.querySelector("#root").style.background = color;
-        document.querySelector('meta[name="theme-color"]').setAttribute("content", color);
+        document
+          .querySelector('meta[name="theme-color"]')
+          .setAttribute("content", color);
       }
     </script>
   </body>