Vuepress: add extra tags to <head> per page

Created on 1 Oct 2018 · 13Comments · Source: vuejs/vuepress

Help me please!
I there is a way to add custom tags into '\ In example, adding

feature request

Source

pontius-g

Most helpful comment

I made a plugin according previous discussions on this issue.

Just try

npm i vuepress-plugin-canonical -D

then modify .vuepress/config.js.

module.exports = {
  plugins: [
    [
      'vuepress-plugin-canonical',
      {
        baseURL: 'https://mina.wiki', // base url for your canonical link, optional, default: ''
        stripExtension: true // strip '.html' , optional, default: false
      }
    ]
  ]
}

IOriens on 16 Sep 2019

👍3 🚀2 🎉2 ❤1

All 13 comments

currently, there is no easy way to do that.
but I'll check if i can create a plugin for that, maybe vuepress-plugin-canonical,

but if you willing to set it manually, you can read this https://vuepress.vuejs.org/guide/custom-themes.html#site-and-page-metadata

update again:
I think, creating link tag in mounted Layout is enough

ekoeryanto on 3 Oct 2018

Thanks, i made some "dirty fix" as per page script

<script>export default {created () { this.$ssrContext.userHeadTags+=`<link rel='canonical' href='${this.$page.path}'/>`;}}</script>

But I'll be appreciate for more "elegant" solution :)

pontius-g on 4 Oct 2018

❤4

@pontius-g I'm using v0.14 where did you place that script?

santigarcor on 9 Oct 2018

@pontius-g I'm using v0.14 where did you place that script?

With a few correction, placed right to the bottom of .md file, where it’s needed

<script>export default {created () { if (typeof this.$ssrContext !== 'undefined') this.$ssrContext.userHeadTags+=`<link rel='canonical' href='https://rnd.tips${this.$page.path}'/>`;}}</script>

pontius-g on 9 Oct 2018

❤3

@pontius-g it's easier when the theme is ejected

ekoeryanto on 9 Oct 2018

I didn’t eject the theme to stay covered with further updates implicitly

pontius-g on 9 Oct 2018

it doesnt work for me ?

fatihtoprak on 4 Dec 2018

pretty brief ))
Maybe u faced "script overdose" issue (anyway it should called)
put it as a component into .vuepress/components/seo.vue
````

```Now u only need to define` tag at any part of ur .md
And even add extra options thru v-bind:

pontius-g on 5 Dec 2018

🎉1 👍1

We're closing this issue as stale as it's more than 20 days without activity, and there are many workarounds as above.

ulivz on 9 Mar 2019

I made a plugin according previous discussions on this issue.

Just try

npm i vuepress-plugin-canonical -D

then modify .vuepress/config.js.

module.exports = {
  plugins: [
    [
      'vuepress-plugin-canonical',
      {
        baseURL: 'https://mina.wiki', // base url for your canonical link, optional, default: ''
        stripExtension: true // strip '.html' , optional, default: false
      }
    ]
  ]
}

IOriens on 16 Sep 2019

👍3 🚀2 🎉2 ❤1

@IOriens @ulivz What is shown here is not a valid solution.

The canonical link gets added to the <head> of the document for the initial page load; however, the tag never gets updated on subsequent navigation throughout the VuePress SPA. Whatever the href property is set to on the first page loaded remains the value as the user navigates to other pages.

adamdehaven on 5 Aug 2020

initialy, canonical meta-tag was needed for search-engine indexing purpose which is irrelevant for SPA behavior.
that is why it was performed on server-side rendering and has no issue for further real-client page navigation

pontius-g on 6 Aug 2020

@pontius-g No argument as to the purpose of the canonical tag - but link tags are used as a web standard not only for SEO, but for rendering other JavaScript content (e.g. AMP pages). Hoping a future VuePress update will allow for injecting these tags as needed. I posted a start to a possible change that could be implemented on another issue that would allow for setting link tags in the frontmatter alongside the meta that would only require a small change to the core (I believe).

adamdehaven on 6 Aug 2020

Was this page helpful?

0 / 5 - 0 ratings