When you deploy your static website to a typical Jamstack-savvy hosting vendor, your host generates the site within a subdomain for one of that host’s top-level domains (which may be something ending in
.dev). This continues to exist as a “live” website even if you’ve assigned a custom domain to your site, as I have assigned the brycewray.com domain to this site.
With some hosts—notably, Netlify and the Digital Ocean App Platform—the subdomain may be some randomly generated nonsense, resulting in a URL of, say, wondrous-weasel-d38a82.netlify.app (although you usually can edit this subdomain to be something less, um, weird). Other hosts may use the name of your originating Git project, as do Cloudflare Pages and Vercel.
For example, let’s say you have a site on Cloudflare Pages and have assigned the domain example.com to the site. If the project’s online repo is called our-website-repo, it would exist on the web as not only example.com but also something like our-website-repo-8dx.pages.dev. This presents you with a potential problem for your site’s search engine optimization (SEO): you must ensure that, when Google and other search engines find your content, they’ll “know” which one—your “real” site at example.com or the .pages.dev version—to feature in their respective indices. Otherwise, the SEO “search juice” might go to that other version and not to the desired location at example.com.
The good thing is, it’s simple to avoid this problem: just provide a canonical URL. This indication, which takes the form of a canonical tag in your HTML’s
head element, tells search engines which online instance of each page to index.
If you’re building your site with a static site generator (SSG) or other method that creates pages through templating, this is fairly simple to do. In a more manually built site, you may have a lot of pages to edit.
Anyway, continuing with our example.com example (?), here are links to explain how to do this in my three favorite SSGs:
- Astro: An
Astro.urlcode sample from the Astro documentation.
- Eleventy: “Absolute URLs” from Aleksandr Hovhannisyan’s article, “A Set of Useful 11ty Filters.”
- Hugo: “Hugo SEO Best Practices,” a tutorial I helped to write for CloudCannon. (Scroll down to the section, “Set the canonical URL.”)
Take these simple steps to maximize the likelihood that the content of your real site, and not that of the site’s oddly named twin out on the host’s platform, will garner all the “search juice” it deserves.