feat: Custom canonical tags (#11658)

* Get custom canonical tags functioning using frontmatter

* Add more canonical tags and refactored code logic

* Small refactor of tag format helper function for readability

---------

Co-authored-by: Alex Krawiec <[email protected]>

Author: coolguyzone

app/[[...path]]/page.tsx

@@ -132,6 +132,17 @@ type MetadataProps = {
   };
 };
 
+// Helper function to clean up canonical tags missing leading or trailing slash
+function formatCanonicalTag(tag: string) {
+  if (tag.charAt(0) !== '/') {
+    tag = '/' + tag;
+  }
+  if (tag.charAt(tag.length - 1) !== '/') {
+    tag = tag + '/';
+  }
+  return tag;
+}
+
 export async function generateMetadata({params}: MetadataProps): Promise<Metadata> {
   const domain = isDeveloperDocs
     ? 'https://develop.sentry.dev'
@@ -142,6 +153,7 @@ export async function generateMetadata({params}: MetadataProps): Promise<Metadat
     : domain;
   let title =
     'Sentry Docs | Application Performance Monitoring &amp; Error Tracking Software';
+  let customCanonicalTag;
   let description =
     'Self-hosted and cloud-based application performance monitoring &amp; error tracking that helps software teams see clearer, solve quicker, &amp; learn continuously.';
   const images = [{url: `${previewDomain ?? domain}/meta.jpg`, width: 1200, height: 822}];
@@ -160,13 +172,18 @@ export async function generateMetadata({params}: MetadataProps): Promise<Metadat
         pageNode.frontmatter.title +
         (guideOrPlatform ? ` | Sentry for ${guideOrPlatform.title}` : '');
       description = pageNode.frontmatter.description ?? '';
+
+      if (pageNode.frontmatter.customCanonicalTag) {
+        customCanonicalTag = formatCanonicalTag(pageNode.frontmatter.customCanonicalTag);
+      }
     }
   }
 
-  let canonical = domain;
-  if (params.path) {
-    canonical = `${domain}/${params.path.join('/')}/`;
-  }
+  const canonical = customCanonicalTag
+    ? domain + customCanonicalTag
+    : params.path
+      ? `${domain}/${params.path.join('/')}/`
+      : domain;
 
   return {
     title,

docs/platforms/javascript/common/configuration/options.mdx

@@ -1,6 +1,7 @@
 ---
 title: Basic Options
 description: "Learn more about how to configure the SDK. These options are set when the SDK is first initialized, passed to the init function as an object."
+customCanonicalTag: "/platforms/javascript/configuration/options/"
 sidebar_order: 1
 ---
 

docs/platforms/javascript/common/enriching-events/level/index.mdx

@@ -1,6 +1,7 @@
 ---
 title: Event Level
 description: "The level - similar to logging levels - is generally added by default based on the integration. You can also override it within an event."
+customCanonicalTag: "/platforms/javascript/enriching-events/level/"
 ---
 
 The level - similar to logging levels - is generally added by default by the SDK. You can either provide a dedicated level directly in `captureMessage`, or configure a level on the scope in order to apply it to all events.

docs/platforms/javascript/common/session-replay/privacy.mdx

@@ -18,6 +18,7 @@ notSupported:
   - javascript.nestjs
   - javascript.cloudflare
 description: "Configuring Session Replay to maintain user and data privacy."
+customCanonicalTag: "/platforms/javascript/session-replay/privacy/"
 ---
 
 <Include name="session-replay-web-report-bug.mdx" />

docs/platforms/javascript/common/sourcemaps/uploading/vite.mdx

@@ -1,6 +1,7 @@
 ---
 title: Vite
 description: "Upload your source maps with the Sentry Vite Plugin."
+customCanonicalTag: "/platforms/javascript/sourcemaps/uploading/vite/"
 sidebar_order: 3
 ---
 

docs/platforms/javascript/common/sourcemaps/uploading/webpack.mdx

@@ -1,6 +1,7 @@
 ---
 title: Webpack
 description: "Upload your source maps with our webpack plugin."
+customCanonicalTag: "/platforms/javascript/sourcemaps/uploading/webpack/"
 sidebar_order: 1
 ---
 

src/types/frontmatter.ts

@@ -14,6 +14,8 @@ export interface FrontMatter {
   /**
    * A description to use in the <meta> header, as well as in auto generated page grids.
    */
+  customCanonicalTag?: string;
+  /**  Add this if you want to add a canonical tag (without this it will default to the page url). Should be a relative path without the domain (e.g. `/platforms/react/options/`) */
   description?: string;
   /**
    * Set this to true to mark this page as a draft, and hide it from various other components (such as the PageGrid).