Building canonical link for pagination formatted URL

Question

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;

I also noticed this in the [[...path]].tsx

// This function gets called at build time on server-side.
// It may be called again, on a serverless function, if
// revalidation (or fallback) is enabled and a new request comes in.
export const getStaticProps: GetStaticProps = async (context) => {
  // reset context.params.path for /blogs only if
  // page is immediate descendent of /blogs (i.e.
  // not a blog page nested within a year/month folder)
  if (
    context.params?.path?.includes('blogs') &&
    context.params?.path.length === 3
  ) {
    // store original path within requestPath property
    context.params.requestPath = context.params.path;
    // set path to wildcard item
    context.params.path = [`blogs/,-w-,`];
  }

Answer 1

For a wildcard item, the item path will always end in .-w-., this is how XM identifies that this path is a wildcard item. It is not possible to change the item path for this item.

How you fix this for your canonical link will entirely depend on how you have implemented. I generally see 2 options:

Add a Canonical Link field to the blog page template

This will allow your editors to specify what the canonical link should be for your blog pages and you can simply use that value to set the canonical link.

Build the Canonical Link from your request path or resolved item

If you want this to be more dynamic, you can build the link off the request path, although this would not be an idea solution as 2 paths could still have the same content.

Or once you have resolved the content item, you can use that item path to create your canonical link.