Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add extra tags to <head> per page #894

Closed
pontius-g opened this issue Oct 1, 2018 · 14 comments
Closed

add extra tags to <head> per page #894

pontius-g opened this issue Oct 1, 2018 · 14 comments
Labels
type: feature request Request to add a new feature

Comments

@pontius-g
Copy link

pontius-g commented Oct 1, 2018 •
edited
Loading

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
Copy link
Contributor

ekoeryanto commented Oct 3, 2018 •
edited
Loading

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
Copy link
Author

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

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

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

@pontius-g
Copy link
Author

@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
Copy link
Contributor

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

@pontius-g
Copy link
Author

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

@fatihtoprak
Copy link

it doesnt work for me ?

@pontius-g
Copy link
Author

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
Copy link
Member

ulivz commented Mar 9, 2019

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

@ulivz ulivz closed this as completed Mar 9, 2019
@IOriens
Copy link

IOriens commented Sep 16, 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
      }
    ]
  ]
}

@lidel lidel mentioned this issue Dec 22, 2019
Merged
@adamdehaven
Copy link
Contributor

@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
Copy link
Author

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
Copy link
Contributor

adamdehaven commented Aug 6, 2020 •
edited
Loading

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

@davestewart davestewart mentioned this issue Mar 25, 2021
Open
@2color
Copy link

2color commented Aug 22, 2022 •
edited
Loading

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
type: feature request Request to add a new feature
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
8 participants
@2color @adamdehaven @fatihtoprak @santigarcor @IOriens @pontius-g @ulivz @ekoeryanto