How to Redirect to a New Domain with Netlify and NameCheap
Let’s say we have a site hosted on Netlify accessible through olddomain.com
, which was bought through NameCheap.
Suppose we want to rebrand and move our domain to newdomain.com
.
And we want the following:
- Accessing
newdomain.com
will direct us to the Netlify site - Accessing
olddomain.com
will redirect us tonewdomain.com
- Google search results will slowly phase out
olddomain.com
and addnewdomain.com
This article assumes our old domain is registered through NameCheap, connected to a Netlify app, and verified with Google Search Console.
1. Add new domain to Netlify
Netlify allows us to easily assign multiple domains to the same site. Naturally, we’ll need to include our new domain as a domain alias for our Netlify site.
First, navigate to your site’s Netlify Dashboard.
- Navigate to
Site settings
→Domain management
→Domains
- Select
Add domain alias
- Type in your new domain:
newdomain.com
- Find your new domain and select
Options
→Set as primary domain
- Don’t worry! Your site will still be accessible via your old domain
- Select
Check DNS Configuration
and thenSet up Netlify DNS
- Click through the wizard until you get to
Active Netlify DNS
with some nameservers (dns1.p07.nsone.net
,dns2.p07.nsone.net
, etc.) - Leave this page open, and open a new tab for the next section
2. Change NameCheap nameservers
Let’s head over to NameCheap.
- Go to
Account
→Dashboard
- Click
Manage
for the domain you’re using - Under
NAMESERVERS
, selectCustom DNS
- Paste in each nameserver, one-by-one from the Netlify
- Save by clicking the check mark
3. Renew SSL certificate in Netlify
Let’s return to our site’s Netlify Dashboard to ensure SSL certificate coverage for all the domains.
- Navigate to
Site settings
→Domain management
→Domains
- Under
SSL/TLS certificate
, selectRenew certificate
- Confirm certificate renewal in the modal
4. Set up redirect rules in Netlify site
We want to set up 301
permanent redirects for our site.
We can either set it up using the _redirects
file or the Netlify configuration file, which is explained in the section below.
To properly set up redirects, we’ll need to:
- Add redirect rules to either a
_redirects
file ORnetlify.toml
- Push changes to trigger another Netlify build
- Test that each domain works as expected
If the redirect is not working, attempt to
Clear cache and retry deploy
.
4.1. Using _redirects
In our app, we’ll want to create a file named _redirects
(no file extension) in the publish
directory. How we write this file to the publish
directory during the build depends on the type of app hosted.
_redirects
will contain the following lines:
http://www.olddomain.com/* https://newdomain.com/:splat 301!
https://www.olddomain.com/* https://newdomain.com/:splat 301!
http://olddomain.com/* https://newdomain.com/:splat 301!
https://olddomain.com/* https://newdomain.com/:splat 301!
The first value is the source domain we’re redirecting from. The asterisk *
is referred to as a splat, which indicates that everything after the trailing slash should redirect to the same resource on the new domain.
The second value is the destination domain we’re redirecting to. You might notice that :splat
is a dynamic path that matches the *
from the first domain.
The third value explicitly states that the redirect is a 301
. The exclamation mark is an example of shadowing.
4.2. Using Netlify configuration file
The same configuration using netlify.toml
can be found here.
[[redirects]]
from = "http://www.olddomain.com/*"
to = "https://newdomain.com/:splat"
status = 301
force = true
[[redirects]]
from = "https://www.olddomain.com/*"
to = "https://newdomain.com/:splat"
status = 301
force = true
[[redirects]]
from = "http://olddomain.com/* "
to = "https://newdomain.com/:splat"
status = 301
force = true
[[redirects]]
from = "https://olddomain.com/* "
to = "https://newdomain.com/:splat"
status = 301
force = true
5. Notify Google of domain change in Google Search Console
At this point, we assume you have the old domain registered properly with Google Search Console.
First, we’ll want to add a new property for our new domain.
- Head to Google Search Console (GSC)
- Select your list of properties and click
Add property
- Type in the new domain name
- Verify DNS ownership
- Go to your site’s Netlify Dashboard
- Navigate to
Site settings
→Domain management
→Domains
- Under
Custom domains
, find yournewdomain.com
- Select
Options
→Go to DNS panel
- Select
Add new record
- Add
TXT, @, google-site-verification=*
- Return to GSC and select
Verify
Once this new domain is verified and registered with GSC, we can notify Google of the change of address.
- Go to
Settings
→Change of address
- We’ve already set up the
301
redirects in the previous section - Under
Update Google
, select the newly verified property (newdomain.com
) - Select
Validate & Update
6. Update sitemap.xml
Let’s also submit the sitemap of the new domain to Google Search Console property.
If you have sitemap, it will generally be under
newdomain.com/sitemap.xml
.
- Head to Google Search Console (GSC)
- Select the property associated with the new domain
- Navigate to
Index
→Sitemaps
- Under
Add a new sitemap
, enter innewdomain.com/sitemap.xml
and selectSubmit
While we’re at it, let’s also request indexing for our new domain’s homepage.
- Navigate to
URL inspection
- Type in
newdomain.com
- If available, select
Request Indexing
7. Update URL in Google Analytics
It’s also a good idea to update the URL in Google Analytics.
- Open your website’s Google Analytics
- Select
Admin
→Property Settings
- Update
Default URL
andProperty Name
if needed - Click
Save