---json
{
    "h1": "ComboStrap Page Metadata - Canonical URL",
    "name": "Canonical Path",
    "page_id": "zm4f9kcot500cdy704ky2"
}
---
====== Page - Canonical Path ======


===== About =====
A ''canonical'' is a short unique path identifier for a page on your website.



===== Usage =====

==== Named permalink ====

The canonical is used to create a [[docs:router:permalink|named permalink]] in order to get quickly to a page without knowing its [[:docs:page:system:path|full path]]

Example:
<code url>
https://yourdomain.com/your/canonical
</code>



==== Canonical Url ====

The canonical path can be used as path in the [[docs:page:url|canonical url]].

==== Tracking Metrics ====

The canonical path can be used in your tracking metrics in order to aggregate the page view even if the page:
  * is accessed via different url
  * or has [[docs:page:move|moved]]

You can:
  * enable it via the [[docs:analytics:google_analytics#pageview|Google Analytics pageview configuration]]
  * or integrate it in your actual tracker. See the [[#javascript|javascript example]], to know how to access this value from your page.

===== Value =====


The canonical path should have a meaning and be understandable by humans.

The ''canonical'' value:
  * should be unique for all pages of your website (ie domain).
  * should be written as wiki path (ie with a '':'' semi-colon as path separator)
  * does not need to be the [[:docs:page:system:path|page path]]
  * is always lowercase

===== Demo =====
This page has the canonical value set to ''canonical'' and therefore is also available at the following [[docs:router:permalink|named permalink]]. ''https://combostrap.com/canonical''


You can try it your self.

<btn>
[[https://combostrap.com/canonical#demo|Navigate to this page via its canonical URL !]]
</btn>

or

<btn>
[[docs:page:canonical#demo|Navigate to this page via its standard URL !]]
</btn>


===== How to set the canonical value ? =====

==== Manually ====

To set the canonical value, uses the [[..:metadata:manager|metadata manager]] and set the ''canonical'' property in a wiki path format (ie the path separator should be a colon)

Example:
<code dw>
my:path
</code>

==== Automatically ====

You can also create a canonical value based on the last parts of a [[:docs:page:system:path|page path]]. See [[canonical_automatic]]


===== Javascript Example =====
If you want to retrieve the canonical value to add it to your [[#tracking metrics]], you can access it via the ''JSINFO'' javascript variable.

Example:
<webcode name="Default" frameborder="0">
<code javascript>
console.log(`The canonical for this page is '${window.parent.JSINFO["canonical"]}'`);
</code>
</webcode>

===== Configuration =====

==== Google Analytics ====
You can send the canonical path as page identifier to [[docs:analytics:google_analytics|Google Analytics]].

For further information, see the [[docs:analytics:google_analytics#pageview|Google Analytics Pageview section]]