chore: improve SEO with canonical URLs, better titles and descriptions (#1904)

mxkaske · claude · web-flow · commit 4e694a87158a · 2026-03-01T21:23:42.000+01:00
Co-authored-by: Claude Opus 4.6 &lt;noreply@anthropic.com&gt;
diff --git a/apps/web/src/app/(landing)/blog/category/[slug]/page.tsx b/apps/web/src/app/(landing)/blog/category/[slug]/page.tsx
@@ -8,25 +8,35 @@ import {
 } from "@/lib/metadata/shared-metadata";
 import type { Metadata } from "next";
 
-const TITLE = "Blog Category";
-const DESCRIPTION = "All the latest articles and news from openstatus.";
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const TITLE = `Blog - ${slug.charAt(0).toUpperCase()}${slug.slice(1)}`;
+  const DESCRIPTION = "All the latest articles and news from openstatus.";
 
-export const metadata: Metadata = {
-  ...defaultMetadata,
-  title: TITLE,
-  description: DESCRIPTION,
-  openGraph: {
-    ...ogMetadata,
+  return {
+    ...defaultMetadata,
     title: TITLE,
     description: DESCRIPTION,
-  },
-  twitter: {
-    ...twitterMetadata,
-    title: TITLE,
-    description: DESCRIPTION,
-    images: [`/api/og?title=${TITLE}&description=${DESCRIPTION}`],
-  },
-};
+    alternates: {
+      canonical: `/blog/category/${slug}`,
+    },
+    openGraph: {
+      ...ogMetadata,
+      title: TITLE,
+      description: DESCRIPTION,
+    },
+    twitter: {
+      ...twitterMetadata,
+      title: TITLE,
+      description: DESCRIPTION,
+      images: [`/api/og?title=${TITLE}&description=${DESCRIPTION}`],
+    },
+  };
+}
 
 export const dynamicParams = false;
 
diff --git a/apps/web/src/app/(landing)/blog/page.tsx b/apps/web/src/app/(landing)/blog/page.tsx
@@ -6,13 +6,17 @@ import Link from "next/link";
 import { ContentCategory } from "../content-category";
 import { ContentList } from "../content-list";
 
-const TITLE = "Blog";
-const DESCRIPTION = "All the latest articles and news from openstatus.";
+const TITLE = "Blog - Engineering, Product & Monitoring Insights";
+const DESCRIPTION =
+  "Read engineering deep dives, product updates, and monitoring best practices from the openstatus team. Learn about uptime monitoring, incident communication, and building reliable systems.";
 
 export const metadata: Metadata = {
   ...defaultMetadata,
   title: TITLE,
   description: DESCRIPTION,
+  alternates: {
+    canonical: "/blog",
+  },
   openGraph: {
     ...ogMetadata,
     title: TITLE,
diff --git a/apps/web/src/app/(landing)/changelog/category/[slug]/page.tsx b/apps/web/src/app/(landing)/changelog/category/[slug]/page.tsx
@@ -8,25 +8,35 @@ import {
 } from "@/lib/metadata/shared-metadata";
 import type { Metadata } from "next";
 
-const TITLE = "Changelog Category";
-const DESCRIPTION = "All the latest changes and updates to openstatus.";
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const TITLE = `Changelog - ${slug.charAt(0).toUpperCase()}${slug.slice(1)}`;
+  const DESCRIPTION = "All the latest changes and updates to openstatus.";
 
-export const metadata: Metadata = {
-  ...defaultMetadata,
-  title: TITLE,
-  description: DESCRIPTION,
-  openGraph: {
-    ...ogMetadata,
+  return {
+    ...defaultMetadata,
     title: TITLE,
     description: DESCRIPTION,
-  },
-  twitter: {
-    ...twitterMetadata,
-    title: TITLE,
-    description: DESCRIPTION,
-    images: [`/api/og?title=${TITLE}&description=${DESCRIPTION}`],
-  },
-};
+    alternates: {
+      canonical: `/changelog/category/${slug}`,
+    },
+    openGraph: {
+      ...ogMetadata,
+      title: TITLE,
+      description: DESCRIPTION,
+    },
+    twitter: {
+      ...twitterMetadata,
+      title: TITLE,
+      description: DESCRIPTION,
+      images: [`/api/og?title=${TITLE}&description=${DESCRIPTION}`],
+    },
+  };
+}
 
 export const dynamicParams = false;
 
diff --git a/apps/web/src/app/(landing)/changelog/page.tsx b/apps/web/src/app/(landing)/changelog/page.tsx
@@ -13,6 +13,9 @@ export const metadata: Metadata = {
   ...defaultMetadata,
   title: TITLE,
   description: DESCRIPTION,
+  alternates: {
+    canonical: "/changelog",
+  },
   openGraph: {
     ...ogMetadata,
     title: TITLE,
diff --git a/apps/web/src/app/(landing)/compare/page.tsx b/apps/web/src/app/(landing)/compare/page.tsx
@@ -13,13 +13,17 @@ import {
   ContentBoxUrl,
 } from "../content-box";
 
-const TITLE = "Compare Alternatives";
-const DESCRIPTION = "Compare OpenStatus with other tools.";
+const TITLE = "Compare Uptime Monitoring & Status Page Alternatives";
+const DESCRIPTION =
+  "See how openstatus compares to BetterStack, UptimeRobot, Checkly, Instatus, and other monitoring tools. Side-by-side feature and pricing comparisons to help you choose the right solution.";
 
 export const metadata: Metadata = {
   ...defaultMetadata,
   title: TITLE,
   description: DESCRIPTION,
+  alternates: {
+    canonical: "/compare",
+  },
   openGraph: {
     ...ogMetadata,
     title: TITLE,
diff --git a/apps/web/src/app/(landing)/guides/category/[slug]/page.tsx b/apps/web/src/app/(landing)/guides/category/[slug]/page.tsx
@@ -8,25 +8,35 @@ import {
 } from "@/lib/metadata/shared-metadata";
 import type { Metadata } from "next";
 
-const TITLE = "Guide Category";
-const DESCRIPTION = "All the latest guides from openstatus.";
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}): Promise<Metadata> {
+  const { slug } = await params;
+  const TITLE = `Guides - ${slug.charAt(0).toUpperCase()}${slug.slice(1)}`;
+  const DESCRIPTION = "All the latest guides from openstatus.";
 
-export const metadata: Metadata = {
-  ...defaultMetadata,
-  title: TITLE,
-  description: DESCRIPTION,
-  openGraph: {
-    ...ogMetadata,
+  return {
+    ...defaultMetadata,
     title: TITLE,
     description: DESCRIPTION,
-  },
-  twitter: {
-    ...twitterMetadata,
-    title: TITLE,
-    description: DESCRIPTION,
-    images: [`/api/og?title=${TITLE}&description=${DESCRIPTION}`],
-  },
-};
+    alternates: {
+      canonical: `/guides/category/${slug}`,
+    },
+    openGraph: {
+      ...ogMetadata,
+      title: TITLE,
+      description: DESCRIPTION,
+    },
+    twitter: {
+      ...twitterMetadata,
+      title: TITLE,
+      description: DESCRIPTION,
+      images: [`/api/og?title=${TITLE}&description=${DESCRIPTION}`],
+    },
+  };
+}
 
 export const dynamicParams = false;
 
diff --git a/apps/web/src/app/(landing)/guides/page.tsx b/apps/web/src/app/(landing)/guides/page.tsx
@@ -12,6 +12,9 @@ export const metadata: Metadata = {
   ...defaultMetadata,
   title: TITLE,
   description: DESCRIPTION,
+  alternates: {
+    canonical: "/guides",
+  },
   openGraph: {
     ...ogMetadata,
     title: TITLE,
diff --git a/apps/web/src/app/(landing)/oss-friends/page.tsx b/apps/web/src/app/(landing)/oss-friends/page.tsx
@@ -20,6 +20,9 @@ export const metadata: Metadata = {
   ...defaultMetadata,
   title: TITLE,
   description: DESCRIPTION,
+  alternates: {
+    canonical: "/oss-friends",
+  },
   openGraph: {
     ...ogMetadata,
     title: TITLE,
diff --git a/apps/web/src/app/(landing)/play/checker/[slug]/page.tsx b/apps/web/src/app/(landing)/play/checker/[slug]/page.tsx
@@ -35,7 +35,10 @@ export async function generateMetadata({
   const { slug } = await params;
   const page = getToolsPage("checker-slug");
 
-  const metadata = getPageMetadata(page);
+  const metadata = {
+    ...getPageMetadata(page, "play"),
+    alternates: { canonical: `${BASE_URL}/play/checker/${slug}` },
+  };
 
   const data =
     process.env.NODE_ENV === "development"
diff --git a/apps/web/src/app/(landing)/play/page.tsx b/apps/web/src/app/(landing)/play/page.tsx
@@ -19,6 +19,9 @@ export const metadata: Metadata = {
   ...defaultMetadata,
   title: TITLE,
   description: DESCRIPTION,
+  alternates: {
+    canonical: "/play",
+  },
   openGraph: {
     ...ogMetadata,
     title: TITLE,
diff --git a/apps/web/src/app/(landing)/status/page.tsx b/apps/web/src/app/(landing)/status/page.tsx
@@ -24,6 +24,9 @@ export const metadata: Metadata = {
   ...defaultMetadata,
   title: TITLE,
   description: DESCRIPTION,
+  alternates: {
+    canonical: "/status",
+  },
   openGraph: {
     ...ogMetadata,
     title: TITLE,
diff --git a/apps/web/src/content/pages/changelog/public-monitors.mdx b/apps/web/src/content/pages/changelog/public-monitors.mdx
@@ -11,11 +11,8 @@ You can now change the monitors visibility to public. This will allow you to
 share the monitor's metrics _(the overview page)_ with your users. The period is
 restricted to **1d** and **7d** for now.
 
-The monitor can be accessed either by the **public URL** or/and by embedding the
-monitor within a **status page**.
+The monitor can be accessed within a **status page**.
 
-- Public URL:
-  [openstatus.dev/public/monitors/1](https://openstatus.dev/public/monitors/1)
 - Status Page URL:
   [status.openstatus.dev/monitors/1](https://status.openstatus.dev/monitors/1)
 
diff --git a/apps/web/src/content/pages/home.mdx b/apps/web/src/content/pages/home.mdx
@@ -32,7 +32,7 @@ faq:
 
 <Image src="/assets/landing/dashboard.png" alt="dashboard monitor overview" priority />
 
-## Used by awesome folks
+## Trusted by teams who value transparency
 
 <Grid cols={4}>
   <a href="https://cal.com">Cal.com</a>
@@ -45,7 +45,7 @@ faq:
   <a href="https://superwall.com">Superwall</a>
 </Grid>
 
-## Status Pages
+## Beautiful, open-source status pages
 
 A status page helps you communicate incidents more effectively. It adds **transparency**, so users aren't left guessing. It enables **proactive communication**, giving updates without users needing to ask. And it shows **reliability**, not just in uptime but in how you handle downtime and keep people informed.
 
@@ -59,7 +59,7 @@ Make it yours with [themes from our Theme Store](https://themes.openstatus.dev),
 
 Read more [about status pages](/status-page).
 
-## Monitoring
+## Global uptime monitoring from 28 regions
 
 Uptime monitoring helps you detect when your website or service goes down. Instead of learning about issues from users, you get **notified immediately** and can respond faster. Monitor your APIs to ensure they return the expected values within a **defined threshold**, helping you **catch** slow responses or failures before they affect users.
 
@@ -104,7 +104,7 @@ Check your website's latency
 
 </Grid>
 
-## FAQs
+## Frequently asked questions
 
 <Details summary="What is openstatus?">
 
diff --git a/apps/web/src/content/pages/product/api-monitoring.mdx b/apps/web/src/content/pages/product/api-monitoring.mdx
@@ -2,7 +2,7 @@
 title: "API Monitoring"
 publishedAt: "2025-11-10"
 author: "openstatus"
-description: "Openstatus allows your to monitor your API from multiple regions around the world. "
+description: "Monitor REST, GraphQL, and webhook endpoints from 28 global regions. Validate status codes, headers, and response bodies with assertions and alert thresholds. Open source."
 category: "Product"
 faq:
   - question: "What types of API endpoints can I monitor?"
diff --git a/apps/web/src/content/pages/product/monitoring-as-code.mdx b/apps/web/src/content/pages/product/monitoring-as-code.mdx
@@ -2,7 +2,7 @@
 title: "Monitoring as Code"
 publishedAt: "2025-11-10"
 author: "Maximilian Kaske"
-description: "Openstatus gives you the possibility to store your monitoring as code."
+description: "Define your monitors as YAML configuration files, manage them with the OpenStatus CLI, and automate deployments with GitHub Actions. Version control your monitoring setup."
 category: "Product"
 howto:
   totalTime: "PT15M"
diff --git a/apps/web/src/content/pages/product/private-locations.mdx b/apps/web/src/content/pages/product/private-locations.mdx
@@ -2,7 +2,7 @@
 title: "Private Locations"
 publishedAt: "2025-11-10"
 author: "Thibault Le Ouay Ducasse"
-description: "Openstatus allows your to monitor your service from your own network."
+description: "Deploy a lightweight 8.5MB Docker image to monitor internal services behind your firewall. Check APIs and endpoints not exposed to the public internet from your own infrastructure."
 category: "Product"
 howto:
   totalTime: "PT10M"
diff --git a/apps/web/src/content/pages/product/uptime-monitoring.mdx b/apps/web/src/content/pages/product/uptime-monitoring.mdx
@@ -2,7 +2,7 @@
 title: "Uptime Monitoring"
 publishedAt: "2025-11-10"
 author: "Thibault Le Ouay Ducasse"
-description: "Openstatus provides a global multi-cloud uptime monitoring solution."
+description: "Monitor your websites and APIs from 28 regions across multiple cloud providers. Get instant alerts via Slack, Discord, email, and more. Open source with a free plan available."
 category: "Product"
 faq:
   - question: "How many regions should I monitor from?"
diff --git a/apps/web/src/content/pages/unrelated/pricing.mdx b/apps/web/src/content/pages/unrelated/pricing.mdx
@@ -2,7 +2,7 @@
 title: "Pricing"
 publishedAt: "2025-11-10"
 author: "Maximilian Kaske"
-description: "All plans. Start free today, upgrade later."
+description: "Start free with uptime monitoring and a status page. Upgrade to Starter ($30/mo) or Pro ($100/mo) for more monitors, team collaboration, and advanced features. No credit card required."
 category: "company"
 ---
 
diff --git a/apps/web/src/lib/metadata/shared-metadata.ts b/apps/web/src/lib/metadata/shared-metadata.ts
@@ -3,9 +3,9 @@ import type { Metadata } from "next";
 
 export const TITLE = "openstatus";
 export const HOMEPAGE_TITLE =
-  "OpenStatus - Open-Source Status Page & Uptime Monitoring";
+  "openstatus - Open-Source Status Page & Uptime Monitoring";
 export const DESCRIPTION =
-  "Monitor your services globally and showcase your uptime with a status page. Get started for free with our open-source status page with uptime monitoring solution.";
+  "Monitor your services globally and showcase uptime with a status page. Get started for free with our open-source status page and uptime monitoring solution.";
 
 export const OG_DESCRIPTION =
   "Open-source status page and uptime monitoring system";
