How to Add a Canonical Tag in HTML (With Examples)

Where the canonical tag goes

The canonical tag is a <link> element that belongs in the <head> section of an HTML document, alongside other metadata like the title tag and meta description. Google only recognizes rel=canonical when it appears in the <head>; a canonical tag placed in the <body> is ignored entirely.

Each page should carry exactly one canonical tag. Google's guidance is not to declare different canonicals through different techniques on the same page - for example, one URL in the HTML head and a different URL in an HTTP header. When multiple, conflicting canonical declarations exist on one page, the widely observed behavior is that Google is likely to ignore all of them and fall back to its own selection, which means the site owner loses control over the outcome entirely.

How to add a self-referencing canonical tag

A self-referencing canonical is a rel=canonical tag on a page that points to that same page's own preferred URL. Google recommends this as a best practice - John Mueller has described self-referencing canonicals as "not critical" in the sense that a site will not break without them, but they remove ambiguity whenever a page happens to be reachable through variant URLs, such as with a tracking parameter or a different trailing slash.

To add one, open the page's HTML source (or its template, if the page is generated by a CMS) and insert a link element inside the head, using the exact absolute URL of the page as the preferred version is meant to appear:

<head>
  <title>Example Page Title</title>
  <link rel="canonical" href="https://www.example.com/page/" />
</head>

The URL inside the href attribute must exactly match the preferred, indexable version of the page - same protocol, same host, same case, same trailing-slash convention as the version a site wants indexed.

How to add a canonical to a non-HTML file with an HTTP header

Files that have no HTML head at all - PDFs are the most common example - can still carry a canonical declaration. Since 2011, Google has supported specifying rel=canonical through an HTTP Link header, sent as part of the server's response rather than embedded in the document itself.

A server response for a PDF file might include a header like this:

Link: <https://www.example.com/downloads/file.pdf>; rel="canonical"

This tells crawlers which URL is the preferred, canonical location of that file, exactly the same way an HTML rel=canonical tag would for a web page. This approach is configured at the server or application level - in Apache, Nginx, or the application code generating the response - rather than in a document a browser renders.

Absolute vs relative canonical URLs

A canonical tag's href value can technically be written as either an absolute URL (https://www.example.com/page/) or a relative one (/page/), and both are technically supported. Google's guidance, however, is to use absolute URLs: "Use absolute paths rather than relative paths with the rel=canonical link element."

The risk with relative canonicals is that they resolve against whatever host and protocol the page happens to be crawled on at that moment. Google specifically warns that relative paths "can cause problems in the long run" - for example, if a staging or testing subdomain is unintentionally crawled, a relative canonical on that staging copy will resolve to the staging host rather than the intended production URL, which can create exactly the kind of conflicting signal that gets a canonical ignored. Writing the full absolute URL removes that ambiguity regardless of where or how the page is crawled.

How to test that your canonical tag works

A few checks confirm a canonical tag is actually in place and being read correctly:

View source: use the browser's "View Page Source" function (not the rendered DOM inspector) to confirm the raw HTML delivered by the server includes exactly one rel=canonical tag in the head, pointing at the intended URL. Viewing source, rather than the inspected DOM, matters because it shows what a crawler actually receives before any JavaScript runs.
URL Inspection tool: in Google Search Console, the URL Inspection tool reports both the "User-declared canonical" and the "Google-selected canonical" for a given URL. If the two differ, that is a direct signal that Google disagreed with the declared preference.
A crawler: site crawling tools such as Screaming Frog can crawl an entire site and report canonical tags in bulk - flagging missing canonicals, self-referencing canonicals, and pages with multiple or conflicting canonical declarations across hundreds or thousands of URLs at once.

Adding canonicals at scale

Manually editing HTML head elements works for a handful of pages, but most sites need canonical tags applied consistently across hundreds or thousands of URLs. There are two general approaches:

CMS or plugin fields: most content management systems and SEO plugins expose a canonical URL field per page or generate one automatically from a template, meaning the tag is inserted without hand-editing HTML for every page.
Templates or code: for custom-built sites or applications, the canonical tag is typically generated programmatically as part of the page template, pulling the current page's preferred URL into the head on every render.

Whichever approach is used, the priority at scale is the same one that matters for a single page: keep every signal consistent. The canonical tag, the sitemap, and internal links across the entire site should agree on the same preferred URL form - same protocol, same host, same trailing-slash convention - because a mismatch between rel=canonical and any of those other signals is exactly what leads Google to override the declared canonical.

Frequently Asked Questions

Can I put the canonical tag in the body of the page instead of the head?

No. Google only recognizes rel=canonical tags placed in the HTML head. A canonical tag placed in the body is ignored entirely.

Can a page have more than one canonical tag?

A page should have exactly one. Google's guidance is not to declare different canonicals through different techniques on the same page, and the widely observed behavior when a page has multiple, conflicting canonical declarations is that Google ignores all of them and selects its own canonical instead.

How do I add a canonical tag to a PDF?

PDFs and other non-HTML files do not have an HTML head, so the canonical is declared through an HTTP Link header sent by the server instead, in the form: Link: <https://www.example.com/downloads/file.pdf>; rel="canonical". Google has supported this since 2011.

Should canonical URLs be absolute or relative?

Google recommends absolute URLs. Relative canonical URLs resolve against whatever host and protocol the page is crawled on, which Google warns can cause problems if a staging or alternate host is ever crawled unintentionally.

What is the fastest way to check if my canonical tag is working?

View the page's raw HTML source to confirm the tag is present and correct, then check the same URL in Google Search Console's URL Inspection tool to see whether Google's selected canonical matches the one declared.

How to Add a Canonical Tag in HTML