Give every public route its own description, and keep canonicals and structured data on the host that serves the page.

Decorative images on the marketing pages stay quiet, and every dialog close button is named Close.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/navigation/ConditionalNavigation.tsx

@@ -1,4 +1,5 @@
 import { getNavAuthSignedIn } from "../../../lib/server/navAuth";
+import { getRequestSiteOrigin } from "../../../lib/requestSiteOrigin";
 import ConditionalNavigationClient from "./ConditionalNavigationClient";
 
 /**
@@ -7,5 +8,11 @@ import ConditionalNavigationClient from "./ConditionalNavigationClient";
  */
 export default async function ConditionalNavigation() {
   const initialSignedIn = await getNavAuthSignedIn();
-  return <ConditionalNavigationClient initialSignedIn={initialSignedIn} />;
+  const siteOrigin = await getRequestSiteOrigin();
+  return (
+    <ConditionalNavigationClient
+      initialSignedIn={initialSignedIn}
+      siteOrigin={siteOrigin}
+    />
+  );
 }

app/components/navigation/ConditionalNavigationClient.tsx

@@ -7,6 +7,7 @@ import TopWithPathname from "./Top/TopWithPathname";
 
 export type ConditionalNavigationClientProps = {
   initialSignedIn: boolean;
+  siteOrigin: string;
 };
 
 /**
@@ -14,14 +15,16 @@ export type ConditionalNavigationClientProps = {
  * parent Server Component (`ConditionalNavigation`) via `initialSignedIn`.
  */
 const ConditionalNavigationClient = memo(
-  ({ initialSignedIn }: ConditionalNavigationClientProps) => {
+  ({ initialSignedIn, siteOrigin }: ConditionalNavigationClientProps) => {
     const pathname = usePathname();
 
     if (isChromelessNavigationPath(pathname)) {
       return null;
     }
 
-    return <TopWithPathname initialSignedIn={initialSignedIn} />;
+    return (
+      <TopWithPathname initialSignedIn={initialSignedIn} siteOrigin={siteOrigin} />
+    );
   },
 );
 

app/components/navigation/Footer.tsx

@@ -6,13 +6,14 @@ import Link from "next/link";
 import Logo from "../asset/Logo";
 import Divider from "../utility/Divider";
 import { getAssetPath, ASSETS } from "../../../lib/assetUtils";
+import { PRODUCTION_SITE_ORIGIN } from "../../../lib/siteMetadata";
 
 /**
  * Figma: "Navigation / Footer" (18411-62917).
  * Tiers: smallest viewports (below `md`), `md` through `lg`, `lg` and up.
  * Matches `--breakpoint-md: 640px`, `--breakpoint-lg: 1024px` in `app/tailwind.css`.
  */
-const Footer = memo(() => {
+const Footer = memo(({ siteOrigin = PRODUCTION_SITE_ORIGIN }: { siteOrigin?: string }) => {
   const t = useTranslation("footer");
   const tChrome = useTranslation("controlsChrome");
 
@@ -36,7 +37,7 @@ const Footer = memo(() => {
     "@type": "Organization",
     name: t("organization.name"),
     email: t("organization.email"),
-    url: t("organization.url"),
+    url: siteOrigin,
     sameAs: [
       t("social.bluesky.url"),
       t("social.gitea.url"),

app/components/navigation/FooterWithOrigin.tsx

@@ -0,0 +1,8 @@
+import Footer from "./Footer";
+import { getRequestSiteOrigin } from "../../../lib/requestSiteOrigin";
+
+/** Footer JSON-LD uses the request origin, same host as the page canonical. */
+export default async function FooterWithOrigin() {
+  const siteOrigin = await getRequestSiteOrigin();
+  return <Footer siteOrigin={siteOrigin} />;
+}

app/components/navigation/Top/Top.container.tsx

@@ -14,6 +14,7 @@ import Button from "../../buttons/Button";
 import AvatarContainer from "../../asset/AvatarContainer";
 import Avatar from "../../asset/Avatar";
 import { getAssetPath, ASSETS } from "../../../../lib/assetUtils";
+import { PRODUCTION_SITE_ORIGIN, websiteJsonLd } from "../../../../lib/siteMetadata";
 import { prepareFreshCreateFlowEntrySync } from "../../../(app)/create/utils/prepareFreshCreateFlowEntry";
 import { TopView } from "./Top.view";
 import type { TopProps } from "./Top.types";
@@ -24,10 +25,10 @@ export const avatarImageSources = [
   getAssetPath(ASSETS.AVATAR_1),
 ] as const;
 
-/** @deprecated Use `avatarImageSources` — alts are resolved in `TopContainer` via `topNav` messages. */
-export const avatarImages = avatarImageSources.map((src, index) => ({
+/** @deprecated Use `avatarImageSources`. The portraits are decorative. */
+export const avatarImages = avatarImageSources.map((src) => ({
   src,
-  alt: `Avatar ${3 - index}`,
+  alt: "",
 }));
 
 /** Padding/type that tracks lg/xl Menu sizes without cloning the items per breakpoint. */
@@ -44,12 +45,17 @@ const FOLDER_CREATE_RULE_RESPONSIVE_CLASS =
   "md:p-[var(--space-200)] md:gap-[var(--space-050)] md:text-x-small-label lg:p-[var(--space-300)] lg:gap-[var(--space-150)] lg:text-medium-label xl:p-[var(--space-400)] xl:gap-[var(--space-200)] xl:text-x-large-label";
 
 const TopContainer = memo<TopProps>(
-  ({ folderTop = false, loggedIn = false, profile = false, logIn = true }) => {
+  ({
+    folderTop = false,
+    loggedIn = false,
+    profile = false,
+    logIn = true,
+    siteOrigin = PRODUCTION_SITE_ORIGIN,
+  }) => {
     const pathname = usePathname();
     const router = useRouter();
     const { openLogin } = useAuthModal();
     const t = useTranslation("header");
-    const tTopNav = useTranslation("topNav");
 
     /**
      * `Top` is hidden on `/create` routes by ConditionalNavigationClient, so
@@ -64,20 +70,7 @@ const TopContainer = memo<TopProps>(
       router.push("/create/informational");
     }, [loggedIn, router]);
 
-    const schemaData = {
-      "@context": "https://schema.org",
-      "@type": "WebSite",
-      name: "CommunityRule",
-      url: "https://communityrule.com",
-      ...(folderTop && {
-        description: tTopNav("schemaDescription"),
-      }),
-      potentialAction: {
-        "@type": "SearchAction",
-        target: "https://communityrule.com/search?q={search_term_string}",
-        "query-input": "required name=search_term_string",
-      },
-    };
+    const schemaData = websiteJsonLd(siteOrigin);
 
     const logoSize = folderTop ? "topNavFolderTop" : "topNavHeader";
 
@@ -188,11 +181,11 @@ const TopContainer = memo<TopProps>(
                 : "max-sm:hidden lg:-space-x-[var(--space-250)] xl:-space-x-[13px]"
             }
           >
-            {avatarImageSources.map((src, index) => (
+            {avatarImageSources.map((src) => (
               <Avatar
                 key={src}
                 src={src}
-                alt={tTopNav(`avatarAlts.${3 - index}`)}
+                alt=""
                 size="small"
                 className={
                   folderTop

app/components/navigation/Top/Top.types.ts

@@ -7,6 +7,8 @@ export interface TopProps {
   folderTop?: boolean;
   profile?: boolean;
   logIn?: boolean;
+  /** Absolute origin for the WebSite JSON-LD block. */
+  siteOrigin?: string;
 }
 
 export interface TopViewProps {
@@ -15,16 +17,10 @@ export interface TopViewProps {
   profile: boolean;
   logIn: boolean;
   schemaData: {
-    "@context": string;
-    "@type": string;
+    "@context": "https://schema.org";
+    "@type": "WebSite";
     name: string;
     url: string;
-    description?: string;
-    potentialAction: {
-      "@type": string;
-      target: string;
-      "query-input": string;
-    };
   };
   logoSize: "topNavFolderTop" | "topNavHeader";
   renderNavigationItems: () => React.ReactNode;

app/components/navigation/Top/Top.view.tsx

@@ -1,7 +1,6 @@
 "use client";
 
 import { memo } from "react";
-import Script from "next/script";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import { ASSETS, getAssetPath } from "../../../../lib/assetUtils";
 import Menu from "../Menu";
@@ -32,8 +31,7 @@ function TopView({
   if (folderTop) {
     return (
       <>
-        <Script
-          id="top-navigation-schema"
+        <script
           type="application/ld+json"
           dangerouslySetInnerHTML={{ __html: JSON.stringify(schemaData) }}
         />