fix: duplicate meta tags

[haoranpb]

Summary

leave meta tags updating to updateMeta.js

fix #777 , relate to #2153

What kind of change does this PR introduce? (check at least one)

• Bugfix
• Feature
• Code style update
• Refactor
• Docs
• Build-related changes
• Other, please describe:

If changing the UI of default theme, please provide the before/after screenshot:

Does this PR introduce a breaking change? (check one)

• Yes
• No

If yes, please describe the impact and migration path for existing applications:

The PR fulfills these requirements:

• When resolving a specific issue, it's referenced in the PR's title (e.g. fix #xxx[,#xxx], where "xxx" is the issue number)

You have tested in the following browsers: (Providing a detailed version will be better.)

• Chrome
• Firefox
• Safari
• Edge
• IE

If adding a new feature, the PR's description includes:

• A convincing reason for adding this feature
• Related documents have been updated
• Related tests have been updated

To avoid wasting your time, it's best to open a feature request issue first and wait for approval before working on it.

Other information:

I'm not sure what to do when page meta is conflict with site meta, for example

// config.js
  head: [
    ['meta', { name: 'test-meta', content: 'this is a head meta' }]
  ]

---
# Markdown Front Matter
meta:
  - name: test-meta
    content: this is a page meta
---

merge them or use page meta to override site meta like description

[kefranabg]

Hi @ludanxer,

Thanks for the PR.

Here you're just removing the current page meta tags 😅

But what we would like is replacing the global meta tags with the current page meta tags if page meta tags exists. The solution would be a merge, with a priority on page meta tags.

[haoranpb]

@kefranabg Thanks for your review and sorry for the delay.

I think I'm just removing one set of page meta tags. I understand how things look like, so I'll try to explain what I'm trying to do.

Head meta tags

Head meta tags are inserted differently in dev and build.

dev

vuepress/packages/@vuepress/core/lib/node/dev/index.js

Line 169 in 606ae4a

tags: this.context.siteConfig.head || []

build

vuepress/packages/@vuepress/core/lib/client/index.ssr.html

Line 9 in 606ae4a

{{{ userHeadTags }}}

Page meta tags

Page meta tags are managed by updateMeta.js in both dev and build. However, another set of page meta tags are inserted by SSR.

dev

updateMeta.js

build

Both

vuepress/packages/@vuepress/core/lib/client/index.ssr.html

Line 10 in 606ae4a

{{{ pageMeta }}}

and updateMeta.js which is causing the duplicate.

[kefranabg]

I just made a test with your branch, and global meta tag are always taking priority on page meta tag. It should be the opposite 😄

If global meta tags and page meta tag are defined, page meta tag have priority

[haoranpb]

Need some time to fix that. Thanks!

[nuochong]

I also found this problem. These problems (#112, #565, #665, #2133) two years ago seem to be finally fixed.
There is no problem in dev mode, it will appear after packaging. When the page template is packaged, the meta tag is written. The meta here is the meta tag of ssr. Due to the characteristics of the spa, the content in the head will not be refreshed, and after manually switching pages, a new meta tag will be dynamically added to the head. Causes meta tag confusion. Affects applications such as twitter, such as:

<meta name = "twitter: image" content = "a.png">
<meta name = "twitter: image" content = "b.png">

The above example will result in two pictures for twitter sharing
Solution:

1. Overwrite when writing the meta dynamically. The meta permission of the current page is higher than the meta permission of the ssr loading page. (May increase the amount of calculation)
2. Delete meta tag write in ssr (may not be good for seo)

[haoranpb]

I made a test branch and deploy it. Hope it helps.

And I noticed

watch: {
  $page () {
     this.updateMeta()
  }
}

Keeps getting triggered when I scroll past headers in a page

[nuochong]

Thank you for your efforts

[kefranabg]

Hey, I made some tests, if I add a the meta tag keywords on a page, I can't see it in the meta tag on the generated HTML page. Note that it will be added on runtime, but not on build time.

For example:

---
meta:
  - name: description
    content: hello
  - name: keywords
    content: super duper SEO
---

• build the vuepress site
• go to dist/path/to/my-page-with-meta
• description will be generated in the html page but not keywords

Let me know if you want more context

[haoranpb]

I think it's ready now 🤔Thanks for the patience ❤️

[kefranabg]

@ludanxer Sorry for the delay, I'll do a review ASAP 😉

[kefranabg]

I just added some suggestions and ask some questions. Please check everything is still working as expected if you apply changes 👍

[kefranabg]

LGTM, one more review and we'll get that merge 👍 thanks @ludanxer

[kleisauke]

Shouldn't this be escaped? For example, this config.js:

module.exports = {
  description: 'Image cache & resize service',
}

renders as (within version 1.4.1):

    <meta name="description" content="Image cache & resize service">

which is probably not correct. fwiw, version 1.4.0 didn't had this problem.

Suggestion:

Suggested change

	res += ` ${key}="${m[key]}"`
	res += ` ${key}="${escape(m[key])}"`

and this import at the top of the file:

const escape = require('escape-html')