Canonical Path for SEO tagging?

[chrisspiegl]

I have been looking for a solution to create a canonical url path for SEO purpose.

Is this something that the vue-router could implement? Specifically when using alias routes next to one defined standard route?

Right now, I only found a mention of the word canonical in the website where it points to google and best practices for adding a canonical link. Which is helpful but it leaves me wanting the ability to just get the canonical path form the vue-router so that no matter which alias is used, I can provide one definite canonical url in the og:url and canonical meta tag.

Warm regards,
Chris

[posva]

Hi, thanks for your interest but Github issues are for bug reports and feature requests only. You can ask questions on the forum, the Discord server or StackOverflow.

[chrisspiegl]

Dear @posva, I actually consider this a Feature request if not present at this time.

Having the a canonical url path (as there is a default path anyways) could be very helpful for this specific purpose.

If that is not something planned for Vue-Router, I am going to leave this be.

[posva]

Having out-of-the-box canonical paths is not planned because it goes beyond the scope of Vue Router (even if that might sound weird). I think you should use https://github.com/vueuse/head to add the head tags based on the current location. You can use the meta fields to define extra properties or use router.resolve() with the name and params of a route to always get the default path version 😉 (this implies you name all your routes that have aliases)

[chrisspiegl]

Thank you for your response, @posva. This is understandable and I see the reasoning. I will look into alternative solutions with vueuse/head 👍.

[chrisspiegl]

For anyone stumbling upon this issue in the future. I was able to implement this via this snippet inside my app.vue which also sets the header.

It resolves the path based on the current route name if it has one and falls back to just rendering the path of the route that was loaded if there is no name given.

const router = useRouter()
const route = useRoute()
const runtimeConfig = useRuntimeConfig()
const canonical = `${runtimeConfig.public.siteUrl}${router.resolve(route.name ? { name: route.name } : route).path}`
useServerHead({
    link: [
      { rel: 'canonical', href: canonical },
    ],
  })

[posva]

BTW I think you can pass a getter to useHead() so it automatically updates:

const router = useRouter()
const route = useRoute()
const runtimeConfig = useRuntimeConfig()
useHead({
  link: () => [
    {
      rel: 'canonical',
      href: `${runtimeConfig.public.siteUrl}${router.resolve(route.name ? { name: route.name } : route).path}`,
    },
  ],
})

Although this might not be really useful in client side. Which makes me think using useHeadServer() is probably enough

[chrisspiegl]

Thank you @posva for the added ideas. I have revised my code snippet above to use useServerHead() (useHeadServer() was vueuse/head but it is being sunset in favor of unhead) since you are correct with the assumption that the Canonical is only really relevant on the first call by a search engine.

For anyone trying to find a solution, this is the code snippet I have implemented:

#3869 (comment)