Canonical URL contains a fragment
What it is
The URL in the page’s canonical tag contains a #, as in https://example.com/pricing#plans. The part after # is a fragment: it tells the browser where to scroll or which state to show, and it is not sent to the server, so it does not identify a separate page.
Why it matters
Google says not to give a fragment URL as the canonical , because it generally does not support fragments. The preference you set may then not count, and Google chooses the main URL itself. A fragment usually gets there when an address copied from the browser, anchor included, is pasted into a canonical field, or on sites that route their pages with #/, where the views are not separate pages to a search engine.
How Asky checks it
Asky reads the href of the first <link rel="canonical"> in the page’s raw HTML and reports it when the value contains # anywhere, even an empty one at the end (/pricing#). Other canonical tags on the page are not checked. The fragment is left out when Asky decides whether the canonical names another page: if the rest of the URL is the page itself, it is not also reported as canonicalised; if it names another page, it is. A relative value with a fragment also raises the relative canonical issue.
Reported as an error with medium severity.
How to fix it
- Remove the
#and everything after it from the canonical URL. - If the fragment pointed at a section of this page, the canonical should simply be the page’s own full URL.
- Look for where it was entered: a canonical override field in the page’s SEO settings or plugin is the usual place for a pasted address. If every page has one, fix the template.
- If the site uses
#/routes for pages that deserve to be found, give each view a real path such as/pricing, so it can carry its own canonical. That is a development change, not a settings fix. - Keep the URL absolute, starting with
https://, and keep one canonical tag in the<head>.
Example
https://example.com/pricing points its canonical at its own plans section:
<!-- Before -->
<link rel="canonical" href="https://example.com/pricing#plans">
<!-- After -->
<link rel="canonical" href="https://example.com/pricing">