Point your custom domain at your site and redirect every URL variant (http, https, www, non-www) to one canonical URL. Step-by-step Cloudflare DNS + Vercel guide with exact record values, verification commands, and troubleshooting.
Loading readme…
The complete, beginner-friendly guide to pointing your custom domain at your site and redirecting every URL variant (http, https, www, non-www) to a single canonical URL, using Cloudflare DNS and Vercel.
<link> tags and trailing-slash notes for the app layerhttps://yourdomain.com — https, non-www, no trailing slash)@, IPv4 76.76.21.21www, Target cname.vercel-dns.com<link> tags so search engines get a consistent signalOut of the box, your site is reachable at four (or more) different addresses:
http://example.comhttps://example.comhttp://www.example.comhttps://www.example.comThey all show the same content, but to browsers, search engines, and analytics tools they are four different URLs. A canonical URL is the single one you choose as the "real" address. Every other variant should permanently redirect (301 or 308) to it.
Why bother?
This guide recommends https + non-www (apex) + no trailing slash, for example https://yourdomain.com. It is short, modern, and the most common choice for personal sites and small projects.
Choosing www as canonical is equally valid — just flip the redirect direction in the instructions below. Some large sites prefer www for cookie and CDN control, but for most projects the apex is the simpler pick.
With https://yourdomain.com as canonical, here is what each variant should do:
| Variant | What should happen |
|---|---|
http://yourdomain.com | Redirects to canonical |
http://www.yourdomain.com | Redirects to canonical |
https://www.yourdomain.com | Redirects to canonical |
https://yourdomain.com | Serves the site (200) |
curl and nslookup for verificationyourdomain.com → assign it to productionwww.yourdomain.com → choose "Redirect to yourdomain.com" (308 Permanent)⚠️ Important: Vercel may show either the legacy values (A
76.76.21.21, CNAMEcname.vercel-dns.com) or newer project-specific values (A216.198.79.1, CNAME likexxxxxxxx.vercel-dns-0xx.com). Both work. Copy whatever your dashboard displays, character for character. This guide's examples use the legacy values.
In the Cloudflare dashboard → your zone → DNS → Records → Add record, and fill in:
| Field | Value |
|---|---|
| Type | A |
| Name | @ (means the apex, yourdomain.com itself) |
| IPv4 address | 76.76.21.21 (or the IP your Vercel dashboard shows) |
| Proxy status | DNS only (grey cloud — click the orange cloud to toggle it off) |
| TTL | Auto |
⚠️ Proxy status MUST be DNS only. With the orange cloud on, Cloudflare sits in front of Vercel: SSL provisioning fails or loops, and Vercel cannot verify the domain.
Same flow: DNS → Records → Add record:
| Field | Value |
|---|---|
| Type | CNAME |
| Name | www |
| Target | cname.vercel-dns.com (or the project-specific target your Vercel dashboard shows) |
| Proxy status | DNS only |
| TTL | Auto |
Cloudflare DNS changes are usually live within seconds to a few minutes. To get an instant, cache-free answer, query your zone's own nameserver directly (find your two nameservers on the Cloudflare zone overview page):
# Query your zone's own nameserver for an instant answer
nslookup yourdomain.com your-ns.ns.cloudflare.com
nslookup -type=CNAME www.yourdomain.com your-ns.ns.cloudflare.com
Expected output for the A record:
Name: yourdomain.com
Address: 76.76.21.21
Expected output for the CNAME:
www.yourdomain.com canonical name = cname.vercel-dns.com
Back in Vercel → Settings → Domains: both entries should flip to valid (checkmark) within a few minutes. SSL certificates (Let's Encrypt) are issued automatically for both hostnames; the www certificate can take a couple of extra minutes after the apex.
This is the money step: prove that all four variants behave correctly. Run one command per variant:
curl -s -o /dev/null -w "%{http_code} -> %{redirect_url}\n" http://yourdomain.com
curl -s -o /dev/null -w "%{http_code} -> %{redirect_url}\n" http://www.yourdomain.com
curl -s -o /dev/null -w "%{http_code} -> %{redirect_url}\n" https://www.yourdomain.com
curl -s -o /dev/null -w "%{http_code}\n" https://yourdomain.com
Expected results:
| URL | Expected |
|---|---|
http://yourdomain.com | 308 → https://yourdomain.com/ |
http://www.yourdomain.com | 308 → https://www.yourdomain.com/ (then hops to apex) |
https://www.yourdomain.com | 308 → https://yourdomain.com/ |
https://yourdomain.com | 200 |
Note the two-hop chain from http://www (http→https first, then www→apex) is normal and fine; browsers follow it instantly. To confirm the whole chain lands on the canonical URL, follow the redirects:
curl -sL -o /dev/null -w "final: %{http_code} %{url_effective}\n" http://www.yourdomain.com
# final: 200 https://yourdomain.com/
DNS redirects handle wrong hostnames; the canonical <link> tag tells search engines the preferred URL for each individual page. Next.js App Router example:
// app/layout.tsx
export const metadata = {
metadataBase: new URL("https://yourdomain.com"),
alternates: { canonical: "./" },
};
The "./" value resolves per-page against metadataBase, so every page gets its own correct canonical URL automatically.
Plain HTML example:
<link rel="canonical" href="https://yourdomain.com/about" />
A brief note on trailing slashes: pick one form and stick with it. The Next.js default is no trailing slash, and it 308-redirects /about/ → /about automatically, so you rarely need to think about it.
Validation is silently failing. Type the IP by hand instead of pasting (paste can bring invisible characters along), check every field has a value, then try a hard refresh, another browser, or disabling extensions.
The DNS records were not saved or contain wrong values. Re-check the name and target exactly against what Vercel displays, confirm both records are DNS only (grey cloud), then wait a few minutes and hit Refresh in Vercel.
Almost always the orange cloud: Cloudflare's proxy sits in front of Vercel and the SSL modes mismatch, so each side keeps bouncing the request back. Set both records to DNS only. If you must proxy, set Cloudflare's SSL/TLS mode to Full (Strict) — but DNS only is the supported, simpler path.
Vercel issues certificates per hostname, and the www certificate can lag the apex by a few minutes. Wait, then retest. Verify with:
curl -sv https://www.yourdomain.com -o /dev/null 2>&1 | grep -iE "subject|issuer"
Stale cache: browsers cache 308 redirects and HSTS aggressively. Hard refresh (Ctrl+F5), try a private window, or clear the cache entry for the domain.
Either the domain is not attached to the right Vercel project, or an old A/CNAME record for the same name still exists in Cloudflare. Delete any leftovers — you should have exactly one A record for @ and one CNAME for www.
Expected — newer projects get 216.198.79.1 and project-specific CNAME targets. Vercel's dashboard is authoritative for your project; the legacy values still work, but you may see a "Recommended update" notice until you match them.
The same pattern maps onto other hosts:
| Host | Apex record | www record |
|---|---|---|
| Netlify | A 75.2.60.5 (or apex-loadbalancer.netlify.com), or use Netlify DNS | CNAME to your *.netlify.app site |
| GitHub Pages | 4 A records (185.199.108.153 etc.) | CNAME to username.github.io |
| Cloudflare Pages | Native (CNAME to your *.pages.dev) | CNAME to your *.pages.dev |
The pattern is always the same — an apex record, a www record, and a host-level redirect to your canonical form.
All the verification commands in one place:
# DNS (instant answers from your zone's nameserver)
nslookup yourdomain.com your-ns.ns.cloudflare.com
nslookup -type=CNAME www.yourdomain.com your-ns.ns.cloudflare.com
# Redirect matrix
curl -s -o /dev/null -w "%{http_code} -> %{redirect_url}\n" http://yourdomain.com
curl -s -o /dev/null -w "%{http_code} -> %{redirect_url}\n" http://www.yourdomain.com
curl -s -o /dev/null -w "%{http_code} -> %{redirect_url}\n" https://www.yourdomain.com
curl -s -o /dev/null -w "%{http_code}\n" https://yourdomain.com
# Follow the full chain to the canonical URL
curl -sL -o /dev/null -w "final: %{http_code} %{url_effective}\n" http://www.yourdomain.com
# Certificate check for www
curl -sv https://www.yourdomain.com -o /dev/null 2>&1 | grep -iE "subject|issuer"
Strict-Transport-Security header) — Vercel sets it on https responsesQ: Should I pick www or non-www?
Either works; the important thing is to be consistent. The apex (non-www) is common for personal sites because it is shorter. Some large sites prefer www for cookie and CDN control.
Q: Why 308 and not 301?
A 308 is a 301 that also preserves the request method (POST stays POST). They are equivalent for SEO purposes; Vercel uses 308.
Q: Do redirects hurt SEO?
No — permanent redirects pass ranking signals through. What hurts is serving the same content on multiple URLs with no redirect at all.
Q: Can I keep Cloudflare's orange-cloud proxy on?
With Vercel, DNS-only is recommended. Proxying doubles the CDN layers and complicates SSL provisioning and domain verification.
Q: How long does propagation take?
For Cloudflare-hosted zones: seconds to minutes locally. Resolvers elsewhere may hold older cached answers up to the previous TTL, worst case 24-48 hours.
Q: What about the trailing slash?
Pick one form; most frameworks 308-redirect the other form automatically. Keep your sitemap and canonical tags consistent with whichever you choose.
Q: Does this work for subdomains like blog.yourdomain.com?
Yes — add a CNAME for the subdomain pointing to your host's target and add the domain in the host's dashboard. The canonical choice applies per hostname.
Current version: v1.0 (2026-07-20). See CHANGELOG.md for the full history.
Contributions are welcome! Fork the repo, create a branch (feature/improvement), commit your changes, and open a pull request. See CONTRIBUTING.md for details.
Especially helpful contributions:
This project is licensed under the MIT License — see the LICENSE file for details.
Done! Every variant of your domain now lands on one canonical URL. 🎉
If this guide helped you, please consider giving it a ⭐ on GitHub!
Made with ❤️ for the open-source community