Add canonical tags for SEO (#8296)

* adding SEO canonical tag

Author: shanamatthews

src/components/basePage.tsx

@@ -21,6 +21,7 @@ export type PageContext = {
 };
 
 type Props = {
+  slug: string;
   children?: React.ReactNode;
   data?: {
     file?: {
@@ -46,6 +47,7 @@ export function BasePage({
   sidebar,
   children,
   prependToc,
+  slug,
 }: Props) {
   const tx = getCurrentTransaction();
   if (tx) {
@@ -67,6 +69,7 @@ export function BasePage({
         title={seoTitle ?? title ?? 'Sentry Docs'}
         description={pageDescription}
         noindex={pageContext.noindex}
+        slug={slug}
       />
 
       <div className="row">

src/components/seo.tsx

@@ -16,6 +16,7 @@ const detailsQuery = graphql`
 `;
 
 type Props = {
+  slug: string;
   title: string;
   description?: string;
   keywords?: string[];
@@ -45,9 +46,16 @@ export function BaseSEO({
   keywords = [],
   title,
   noindex,
+  slug,
 }: ChildProps) {
   const metaDescription = description || data.site.siteMetadata.description;
 
+  // slug === '' is the homepage and a valid value
+  const canonical =
+    data.site.siteMetadata.sitePath && (slug || slug === '')
+      ? `https://${data.site.siteMetadata.sitePath}/${slug}`
+      : false;
+
   return (
     <Helmet
       htmlAttributes={{
@@ -123,7 +131,9 @@ export function BaseSEO({
             : []
         )
         .concat(meta)}
-    />
+    >
+      {canonical && <link rel="canonical" href={canonical} />}
+    </Helmet>
   );
 }
 

src/pages/404.tsx

@@ -16,6 +16,7 @@ function NotFoundPage() {
       <SEO
         title="Page Not Found"
         description="We couldn’t find the page you were looking for."
+        slug="404/"
       />
       <h1>Page Not Found</h1>
       <p>We couldn&apos;t find the page you were looking for.</p>

src/pages/index.tsx

@@ -60,7 +60,7 @@ function IndexPage() {
 
   return (
     <div className="index-wrapper">
-      <SEO title="Sentry Documentation" />
+      <SEO title="Sentry Documentation" slug="" />
       <div className="hero-section">
         <div className="index-container">
           <div className="index-navbar">

src/templates/apiDoc.tsx

@@ -10,8 +10,12 @@ export default function ApiDoc(props) {
   const {
     data: {allOpenApi, apiDescription},
   } = props;
+
+  // remove leading '/'
+  const slug = props.location.pathname.replace(/^\//, '');
+
   return (
-    <BasePage sidebar={<ApiSidebar />} {...props}>
+    <BasePage sidebar={<ApiSidebar />} slug={slug} {...props}>
       {apiDescription && <Content file={apiDescription} />}
       <ul data-noindex>
         {allOpenApi.edges.map(({node: {path}}) => (

src/templates/apiPage.tsx

@@ -172,11 +172,14 @@ export default function ApiPage(props) {
     ? ['RESPONSE', 'SCHEMA']
     : ['RESPONSE'];
 
+  // remove leading '/'
+  const slug = props.location.pathname.replace(/^\//, '');
+
   useEffect(() => {
     Prism.highlightAll();
   }, []);
   return (
-    <BasePage sidebar={<ApiSidebar />} {...props}>
+    <BasePage sidebar={<ApiSidebar />} slug={slug} {...props}>
       <div className="row">
         <div className="col-12">
           <div className="api-block">

src/templates/doc.tsx

@@ -13,8 +13,12 @@ export default function Doc(props: any) {
   } else if (props.path.startsWith('/contributing/')) {
     sidebar = <InternalDocsSidebar />;
   }
+
+  // remove leading '/'
+  const slug = props.location.pathname.replace(/^\//, '');
+
   return (
-    <BasePage sidebar={sidebar} {...props}>
+    <BasePage sidebar={sidebar} slug={slug} {...props}>
       <Content file={props.data.file} />
     </BasePage>
   );

src/templates/platform.tsx

@@ -10,6 +10,9 @@ type Props = {
   data: {
     file: any;
   };
+  location: {
+    pathname: string;
+  };
   pageContext: {
     platform: {
       name: string;
@@ -36,9 +39,14 @@ export default function Platform(props: Props) {
       : `${props.pageContext.title} for ${
           (props.pageContext.guide || props.pageContext.platform).title
         }`;
+
+  // remove leading '/'
+  const slug = props.location.pathname.replace(/^\//, '');
+
   return (
     <BasePage
       {...props}
+      slug={slug}
       seoTitle={seoTitle}
       prependToc={<PlatformSdkDetail />}
       sidebar={

src/templates/wizardDebugIndex.tsx

@@ -10,7 +10,7 @@ export default function WizardDebug({
   },
 }) {
   return (
-    <BasePage pageContext={{title: 'Wizard Previews'}}>
+    <BasePage pageContext={{title: 'Wizard Previews'}} slug="wizard-debug/">
       <ul>
         {nodes
           .sort((a, b) =>