Get custom canonical tags functioning using frontmatter

Author: Alex Krawiec

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

@@ -132,6 +132,17 @@ type MetadataProps = {
   };
 };
 
+// Helper function to clean up canonical tags missing leading or trailing slash
+function checkCanonicalTagFormat(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,11 +172,17 @@ 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 = pageNode.frontmatter.customCanonicalTag;
+      }
     }
   }
 
   let canonical = domain;
-  if (params.path) {
+  if (customCanonicalTag) {
+    canonical = domain + checkCanonicalTagFormat(customCanonicalTag);
+  } else if (params.path) {
     canonical = `${domain}/${params.path.join('/')}/`;
   }
 

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/guides/configuration/options/"
 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).