How to Redirect Netlify Deploy Preview URL to Production URL

If you’re using Netlify to deploy your static site, you’ll receive a new Deploy Preview URL.

The permalink is formatted like this:

https://{build-key}--{project-name}.netlify.app

Every time you trigger a new build, you’ll get a new build-key. So if your project name is example, it will produce a Deploy Preview URL like:

https://699b283687ed466708b569dc--example.netlify.app/

This is great for testing.

But there are some concerns if those URLs get leaked:

• It can confuse readers if they find this random URL and wonder why it has the same content as your production site.
• It could potentially affect SEO due to duplicate content (though this can be minimized with proper canonical URLs setup).
• It can clutter Google Analytics. I noticed a bunch of --example.netlify.app domains appearing under Cross-domain Linking Configuration as suggested domains.

At first, I wondered if I could simply turn it off. Based on my research, it’s not possible (for now).

Here’s a quote from a Netlify Technical Program Manager when someone asked whether it’s possible to disable Deploy Preview URLs:

Thanks for reaching out with this question! There is always a deploy preview URL for every deploy — no way to disable it. I am sorry I don’t have the news you are looking for.

Let me know if you have other questions!

Well, that’s unfortunate.

My next idea was to try redirecting it using Netlify’s _redirects rule, something like this:

https://*--example.netlify.app/*  https://example.com/:splat  301!

That didn’t work either, because Netlify doesn’t support wildcard subdomain redirects — only path-based rules are supported.

So the last solution I came up with was to handle the redirect using JavaScript.

Redirect Netlify Preview URL to Production with JavaScript

Before adding the JavaScript redirect, make sure you always set the canonical meta tag to your production base URL.

This is important for SEO.

For example, in my Hugo website, I use something like this:

<link rel="canonical" href="{{ $canonical | safeURL }}" />

Then add the following JavaScript to your HTML template (since this is a static site, you can just include it globally):

(function () {
    const previewDomain = '--example.netlify.app';
    if (location.hostname.endsWith(previewDomain)) {

        var baseUrlStr = 'https://example.com';
        var targetUrl = new URL(location.href);
        var baseUrl = new URL(baseUrlStr);

        targetUrl.hostname = baseUrl.hostname;
        targetUrl.protocol = baseUrl.protocol;

        location.replace(targetUrl.toString());
    }
})();

Don’t forget to modify the script with:

• Replace previewDomain with your Netlify project domain.
• Replace baseUrlStr with your production base URL.

The next time you open a Netlify Deploy Preview URL, it will automatically redirect to your main production URL.

If you open the production URL directly, everything works as usual — no performance impact.

Final Thoughts

In an ideal world, there would be a simple “turn off” option.

In another ideal world, wildcard subdomain redirects would be supported.

But hey — better to have a working solution than nothing.

As usual, if you have any questions or a better method, leave a comment below.

Thanks for reading, and see you next time!

References

• How to disable deploy preview when deploying from local CLI - Support - Netlify Support Forums
• How to disable page view after deploy - Support - Netlify Support Forums
• Redirect wildcard subdomain to a path - Support - Netlify Support Forums