Canonical Tags on Static HTML
A canonical tag tells search engines "this is the official version of this page, please rank this one." It's a small piece of HTML that solves duplicate content problems before they start.
Most small static websites don't have a duplicate content problem. But adding a canonical tag to every page is cheap insurance, takes 30 seconds per file, and prevents some surprisingly common headaches.
What the tag looks like
It goes in the <head> :
<link rel="canonical" href="https://yoursite.com/about.html">
The href is the URL you want Google to treat as the official version. Use the full URL with https:// and your real domain. Don't use a relative URL.
Why this matters: the trailing slash question
Your website can usually be reached at multiple URLs that all return the same page. For example, these might all show the same content:
https://yoursite.com/about.htmlhttps://yoursite.com/about.html?utm_source=newsletterhttps://www.yoursite.com/about.htmlhttp://yoursite.com/about.html
From Google's perspective, those are four separate URLs with identical content. That's duplicate content, and Google has to guess which version to rank. A canonical tag removes the guesswork: every version of the page points to the same canonical URL, and Google ranks that one.
The self-referencing canonical pattern
The simplest pattern: every page on your website has a canonical tag pointing to itself.
<!-- on about.html --> <link rel="canonical" href="https://yoursite.com/about.html"> <!-- on shop.html --> <link rel="canonical" href="https://yoursite.com/shop.html"> <!-- on contact.html --> <link rel="canonical" href="https://yoursite.com/contact.html">
This handles tracking parameters, the www vs non-www question, and accidental duplicates if someone links to your page with extra junk in the URL. Cheap protection.
When you'd point a canonical somewhere else
The non-self-referencing case is rarer:
- You republished an article from another website (your version's canonical points to theirs)
- You have a print-friendly version of a page (its canonical points to the main version)
- You have two product pages for variants of the same product (the variant pages canonical to a main version)
If you're not sure, use the self-referencing version. It's almost always right.
The trailing slash on static.app
Static.app serves clean URLs by default. A file at about.html is reachable at yourdomain.com/about without the.html extension. You can check the exact public URL for any page in Page Settings under the Link field.
The practical implication: pick one URL form and use it consistently in your sitemap, your internal links, and your canonical tags. The clean form (/about ) is usually best because that's what the platform serves and what visitors will see.
So instead of:
<link rel="canonical" href="https://yoursite.com/about.html">
Use:
<link rel="canonical" href="https://yoursite.com/about">
Sitemap entries should match. Internal links should match. Consistency is the whole point.
How to add canonicals across an existing website
Open each HTML file in static.app. Find the <head> section. Paste in the canonical tag, with the URL adjusted to match the page. Save.
If you have a lot of pages, the easiest workflow is to make a checklist and work through it page by page. Or, if you're deploying via the static.app API or MCP server, add the canonical generation to your build script so every page gets one automatically.
Common mistakes
- Pointing every page's canonical to the homepage. This tells Google your whole website is one page. It will deindex everything else. Don't do this.
- HTTP in the canonical when your website is HTTPS. Match your actual URL scheme.
- Trailing slash mismatch between canonical and sitemap. Pick one form.
- Forgetting to update the canonical when you rename a file. The canonical should match the current URL.
Add a self-referencing canonical to every page
It takes 30 seconds per file. It prevents an entire class of SEO bugs you'd otherwise have to debug after they cost you traffic.