Skip to main content
3 of 4
Provided the more context as asked in the comment

Building canonical link for pagination formatted URL

We are showing blogs list according to pagination like https://<domain>/blogs/1 and https://<domain>/blogs/2. In the sitecore we have wild card * page under the blogs where 1 and 2 gets mapped and we are handling in our code to do the calculations what page number is coming in the url and what is the page size and then showing the blogs.

But when I see the canonical link, it comes as <link rel="canonical" href="https://<domain>/blogs/,-w-," /> with appending the weird ,-w-, in place of the number.

I checked the layout response in XM Cloud playground for the /blogs/1 or blogs/2 the itemPath is having this ,-w-, as shown below:

{
  "data": {
    "layout": {
      "item": {
        "rendered": {
          "sitecore": {
            "context": {
              "pageEditing": false,
              "site": {
                "name": "mysite"
              },
              "pageState": "normal",
              "editMode": "chromes",
              "language": "en",
              "itemPath": "/blogs/,-w-,"
            },
            "route": {
              "name": "*",
              "displayName": "*",........

I further tried to check the [[...path]].tsx and Layout.tsx to check if something can be done, but no clue.

Is there any idea if itemPath can be customised or if we have to handle in the code, then where can we cater this logic?

EDIT-1:

The canonical Url, I can see in my project is coming from Layout.tsx file as shown below:

{pageUrl && <link rel="canonical" key="meta-canonical" href={pageUrl} />}
        {(fields?.noindex?.value || fields?.nofollow?.value) && (
          <meta
            name="robots"
            key="meta-robots"
            content={
              fields?.noindex?.value && fields?.nofollow?.value
                ? 'noindex,nofollow'
                : fields?.noindex?.value
                ? 'noindex'
                : 'nofollow'
            }
          />
        )}

pageUrl is coming as:

const Layout = ({ layoutData }: LayoutProps): JSX.Element => {
  const { route, context: sitecoreContext } = layoutData.sitecore;
  const fields = route?.fields as RouteFields;
  const pageUrl = sitecoreContext?.itemPath as string;
  const isPageEditing = layoutData.sitecore.context.pageEditing;