Fix canonical attribute when using hreflang

Author: ppcano

gatsby-config.js

@@ -12,13 +12,6 @@ const shouldAnnouncementBannerBeShown = false;
 
 const plugins = [
   'gatsby-plugin-react-helmet',
-  {
-    resolve: `gatsby-plugin-react-helmet-canonical-urls`,
-    options: {
-      siteUrl: process.env.GATSBY_DEFAULT_MAIN_URL,
-      noTrailingSlash: true,
-    },
-  },
   'gatsby-transformer-sharp',
   'gatsby-plugin-sharp',
   'gatsby-plugin-catch-links',
@@ -171,6 +164,17 @@ if (process.env.GATSBY_DRIFT_API) {
   });
 }
 
+const autoCanonicalURL = false;
+if (autoCanonicalURL) {
+  plugins.push({
+    resolve: `gatsby-plugin-react-helmet-canonical-urls`,
+    options: {
+      siteUrl: process.env.GATSBY_DEFAULT_MAIN_URL,
+      noTrailingSlash: true,
+    },
+  });
+}
+
 if (
   process.env.ALGOLIA_ADMIN_KEY &&
   process.env.GATSBY_ALGOLIA_APP_ID &&

src/components/shared/seo/seo.view.js

@@ -40,6 +40,16 @@ export const SEO = ({
   const currentUrl = slug ? `${docs}/${slug}` : docs;
   const currentImage = createMetaImagePath(image, siteUrl, siteImage);
 
+  const hrefLangRelAttributeHash = {
+    en: 'alternate',
+    es: 'alternate',
+  };
+  if (slug && (slug.startsWith('es/') || slug === 'es')) {
+    hrefLangRelAttributeHash.es = 'canonical';
+  } else {
+    hrefLangRelAttributeHash.en = 'canonical';
+  }
+
   return (
     <>
       {I18N_CONFIG.hideEsFromRobots &&
@@ -73,14 +83,14 @@ export const SEO = ({
           <link
             hrefLang="en"
             href={`${siteUrl}/docs${pageTranslations.en.path}`}
-            rel="alternate"
+            rel={`${hrefLangRelAttributeHash.en}`}
           />
         )}
         {pageTranslations && pageTranslations.es !== undefined && (
           <link
             hrefLang="es"
             href={`${siteUrl}/docs${pageTranslations.es.path}`}
-            rel="alternate"
+            rel={`${hrefLangRelAttributeHash.es}`}
           />
         )}
         {pageTranslations && (