add extra tags to <head> per page #894

pontius-g · 2018-10-01T21:23:05Z

Hi

Help me please!
I there is a way to add custom tags into '<head>' section per page basis?
In example, adding <link rel='canonical' ...> ?

ekoeryanto · 2018-10-03T01:10:15Z

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

pontius-g · 2018-10-03T22:56:30Z

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 :)

santigarcor · 2018-10-09T12:45:39Z

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

pontius-g · 2018-10-09T12:58:38Z

@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>

ekoeryanto · 2018-10-09T13:06:20Z

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

pontius-g · 2018-10-09T13:29:09Z

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

fatihtoprak · 2018-12-04T07:49:11Z

it doesnt work for me ?

pontius-g · 2018-12-05T17:27:15Z

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

<script>
  export default {
    created () {
      if (typeof this.$ssrContext !== 'undefined') {
        this.$ssrContext.userHeadTags+=`<link rel='canonical' href='${this.$page.path}'/>`;
        if (/^\/ru/.test(this.$page.path)) this.$ssrContext.userHeadTags+=`<link rel='manifest' href='/manifest.ru.json'/>`;
        else this.$ssrContext.userHeadTags+=`<link rel='manifest' href='/manifest.json'/>`;
      }
    }
  }
</script>

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

ulivz · 2019-03-09T09:55:48Z

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

IOriens · 2019-09-16T07:27:15Z

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
      }
    ]
  ]
}

adamdehaven · 2020-08-05T21:58:59Z

@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.

pontius-g · 2020-08-06T12:39:19Z

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

adamdehaven · 2020-08-06T12:48:22Z

@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).

2color · 2022-08-22T17:44:26Z

I'm not an expert on Vuepress or Vue, but I stumbled upon this while trying to add default canonical tag.

I ended up writing a small custom plugin that automatically adds the canonical tag if it's not defined in the frontmatter. It relies on the https://vuepress.vuejs.org/guide/frontmatter.html#canonicalurl config which is available from 1.7.1

module.exports = (options, context) => ({
  name: 'vuepress-default-canonical',
  extendPageData($page) {
    const { frontmatter } = $page
    // If no canonicalUrl is explictly defined in the Frontmatter, add it based on the permaLink
    if (!frontmatter.canonicalUrl && frontmatter.permalink) {
      frontmatter.canonicalUrl = `${$page?._context?.themeConfig?.domain}${frontmatter.permalink}`
      return
    }

    if (!frontmatter.permalink && $page._permalink) {
      // Set the canonical URL to theme pages (which don't have a frontmatter permalink)
      frontmatter.canonicalUrl = `${$page?._context?.themeConfig?.domain}`
    }
  },
})

Note this relies on themeConfig.domain but you can inject the domain anyway you like.

ulivz added the type: feature request Request to add a new feature label Oct 5, 2018

ulivz closed this as completed Mar 9, 2019

lidel mentioned this issue Dec 22, 2019

fix: add canonical link ipfs/ipfs-docs#50

Merged

davestewart mentioned this issue Mar 25, 2021

Asset handling via Frontmatter #79

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

add extra tags to <head> per page #894

add extra tags to <head> per page #894

pontius-g commented Oct 1, 2018 •

edited

Loading

ekoeryanto commented Oct 3, 2018 •

edited

Loading

Uh oh!

pontius-g commented Oct 3, 2018

Uh oh!

santigarcor commented Oct 9, 2018

Uh oh!

pontius-g commented Oct 9, 2018

Uh oh!

ekoeryanto commented Oct 9, 2018

Uh oh!

pontius-g commented Oct 9, 2018

Uh oh!

fatihtoprak commented Dec 4, 2018

Uh oh!

pontius-g commented Dec 5, 2018

Uh oh!

ulivz commented Mar 9, 2019

Uh oh!

IOriens commented Sep 16, 2019

Uh oh!

adamdehaven commented Aug 5, 2020

Uh oh!

pontius-g commented Aug 6, 2020

Uh oh!

adamdehaven commented Aug 6, 2020 •

edited

Loading

Uh oh!

2color commented Aug 22, 2022 •

edited

Loading

Uh oh!

add extra tags to <head> per page #894

add extra tags to <head> per page #894

Comments

pontius-g commented Oct 1, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

ekoeryanto commented Oct 3, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pontius-g commented Oct 3, 2018

Uh oh!

santigarcor commented Oct 9, 2018

Uh oh!

pontius-g commented Oct 9, 2018

Uh oh!

ekoeryanto commented Oct 9, 2018

Uh oh!

pontius-g commented Oct 9, 2018

Uh oh!

fatihtoprak commented Dec 4, 2018

Uh oh!

pontius-g commented Dec 5, 2018

Uh oh!

ulivz commented Mar 9, 2019

Uh oh!

IOriens commented Sep 16, 2019

Uh oh!

adamdehaven commented Aug 5, 2020

Uh oh!

pontius-g commented Aug 6, 2020

Uh oh!

adamdehaven commented Aug 6, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

2color commented Aug 22, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pontius-g commented Oct 1, 2018 •

edited

Loading

ekoeryanto commented Oct 3, 2018 •

edited

Loading

adamdehaven commented Aug 6, 2020 •

edited

Loading

2color commented Aug 22, 2022 •

edited

Loading