Netlify Redirects vs Gatsby Redirects: My Traffic Drop 90%

This blog was originally built with Jekyll, but due to the challenges of running and maintaining it locally, I migrated to Gatsby. Initially, I retained the /experience/:slug path for my blog posts to avoid losing traffic. However, I later decided to change the path to /blog/:slug, which unfortunately led to a significant 90% drop in traffic. Here’s what happened and how I attempted to fix it.

In early December 2024, I naively added createRedirect in gatsby-node.js to redirect the old path to the new one.

createPage({
-  path: `/experience/${slug}`,
+  path: `/blog/${slug}`,
  component: slash(postTemplate),
  context: { slug },
})
// Redirect from /experience/slug to /blog/slug
+ createRedirect({
+   fromPath: `/experience/${slug}`,
+   toPath: `/blog/${slug}`,
+   isPermanent: true,
+   redirectInBrowser: true,
+ });

I suspect the traffic drop was due to Google indexing the old /experience/:slug paths and returning 404 errors because Gatsby redirects happen on the client side.

When you curl the page, it still returns a 404. In a browser, you see a 404 momentarily before being redirected to the new page. The 404 errors likely caused Google to remove the experience pages from search results, significantly impacting my traffic.

To resolve this, I needed to ensure that Google indexing the old /experience/:slug paths would return a 301 redirect to the new /blog/:slug paths. I decided to use Netlify redirects, which are easy to implement. I added the new redirect rules to the _redirects file in the static folder.

+ /experience/*              /blog/:splat

This redirects paths like /experience/image-lazy-load to /blog/image-lazy-load at the hosting level, returning a proper 301 HTTP code. Learn more about Netlify wildcard redirects here.

For now, I will push the changes and monitor the traffic to see if it recovers.

The second attempt

After completing the blog, I realized that a 301 status code would still prevent Google from indexing the page. Therefore, I needed another solution.

I decided to rewrite the URL from /experience/:slug to /blog/:slug using Netlify’s _redirects file. Here’s how I did it:

When you assign an HTTP status code of 200 to a redirect rule, it becomes a rewrite. This means that the URL in the visitor’s address bar remains the same, while Netlify’s servers fetch the new location behind the scenes.

- /experience/*              /blog/:splat
+ /experience/*              /blog/:splat  200

This is similar to the redirect rule, but by adding the status code 200, it becomes a rewrite. This means that when I curl the page, it will return a 200 status code and could potentially be indexed by Google.

It appears that after implementing the changes, the traffic is starting to recover. I’m not certain if this improvement is due to the rewrite or merely coincidental. I will keep monitoring the traffic and update this blog with any new developments.