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.

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

Duplicate description meta at runtime. #665

Closed
jordonbaade opened this issue Jul 23, 2018 · 5 comments

Comments

@jordonbaade
Copy link
Contributor

commented Jul 23, 2018

Bug report

Version

VuePress 0.12.0

Steps to reproduce

  1. Install VuePress
  2. Create a page and add extra meta data as per:

https://vuepress.vuejs.org/guide/markdown.html#front-matter

---
meta:
  - name: description
    content: hello
  - name: keywords
    content: super duper SEO
---
  1. Run vuepress dev or vuepress build
  2. Check the page's meta tags

Was able to reproduce in fresh repo:

https://github.com/jordonbaade/vuepress-0.12.0-meta-description-bug

What is expected?

A single:

<meta name="description" content="description here">

What is actually happening?

Two description meta elements:

image

Other relevant information

If you check the build files directly the meta description element is only output once; seems the extra is injected on page view, and not just when using dynamic navigation.

  • Your OS: macOS High Sierra v10.13.6
  • Node.js version: v9.1.0
  • Browser version: v67.0.3396.99
  • Is this a global or local install? Global
  • Which package manager did you use for the install? Yarn
@jordonbaade

This comment has been minimized.

Copy link
Contributor Author

commented Jul 23, 2018

I just noticed some closed repos with the same/similar issue (#565 #112 ), but it wasn't clear to me if this was expected behavior after reading everything over. I will leave this up so someone more familiar can look it over and close it if it's expected.

@ulivz ulivz added the need repro label Jul 26, 2018

@jordonbaade

This comment has been minimized.

Copy link
Contributor Author

commented Jul 26, 2018

For me the output files only contain a single element just like your examples there, so that's not a surprise, the extra is injected on page view (first page load, not just vue-router navigation).

image

Was able to reproduce with your repo:

image

@ulivz ulivz changed the title Bug: Meta description appears twice when using extra meta tags method Duplicate description meta at runtime. Jul 27, 2018

@ulivz ulivz closed this in b207a5f Jul 27, 2018

@ulivz

This comment has been minimized.

Copy link
Member

commented Jul 27, 2018

Thanks for the clarification, there are truly two different issues.

#565 is for duplicate description meta at SSR, and what you said is in runtime.

Fixed it at b207a5f

LinFeng1997 added a commit to docschina/vuepress that referenced this issue Aug 4, 2018

翻译service worker 部分 (#20)
* chore: remove override.styl

* refactor: changelog

* feat: transform Badge into async component

* fix: set babelrc: false in babel-loader options (vuejs#644)

Prevents picking up local `.babelrc` file in projects.

* docs($cn): update for new file-level API: style.styl.

* feat($pwa): add themeConfig.serviceWorker.updatePopup option (close: vuejs#453) (vuejs#533)

* docs: tweaks

* docs: enable serviceWorker.updatePopup

* chore: update register-service-worker to latest

* docs($cn): tweaks (vuejs#652)

* refactor($release): let [enter] pass next step (vuejs#650)

* chore: fix code snippet typo (missing semi-colon) (vuejs#658)

* docs: tweaks lastUpdated (vuejs#663)

* fix: scoped styles of badge component (close: vuejs#653) (vuejs#657)

* fix($build): markdown config should be included in cache identifier

It's reported by vuejs#664, but vuejs#664 cannot be fixed fully since watching webpack config changes shouldn't be handled in VuePresss

VuePress can only ensure that when user changes the markdown config, the cache identifier will be updated, so user needn't to clean the ./node_modules/.cache manually.

See: webpack/webpack#3153, webpack/webpack-cli#15

* workflow: update issue template - add more guidelines

* feat($cli): debug flag at dev mode

reason for this feature: webpack-bar will wipe out the debug log at dev mode.

* fix($seo): Avoid duplicate description meta at runtime. (close: vuejs#665)

* refactor: code style

Follow the official code style guide, refs:

1. https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended
2. https://vuejs.org/v2/style-guide/#Empty-lines-in-component-instance-options-recommend
3. https://github.com/vuejs/ui

* fix($markdown): cannot highlight external python file (.py) correctly (close: vuejs#660)

* fix: missing space between italics and bold (close: vuejs#661)

"markdown-it" will intendedly reserve this space, and this issue was caused by "preserveWhitespace: true" (See: https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options),

Impact on performance (Size of whole assets): Before (1952K), After (1960K), which is an acceptable change.

* chore: add alt attribute to logo image (vuejs#672)

* fix($build): exclude dest folder from pageFiles (close: vuejs#654) (vuejs#655)

* refactor: naming and comments (vuejs#655)

* chore: update deps

* test: fix SecurityError: localStorage is not available for opaque origins

ref: facebook/jest#6769

* 0.13.0

* chore: changelog

* chore: enhance changelog

* docs: i18n for serviceWorker.updatePopup

* docs($cn): document for themeConfig.serviceWorker.updatePopup

* chore: changelog

* docs: update reamde - add SW-update popup

* docs: document i18n example for SW-update popup

* docs: document beta status for SW-update popup

ref: vuejs#677

* fix: py lang label doesn't display in code block (vuejs#690)

* fix: normalize override file path in windows (vuejs#692) (close: vuejs#642)

* 0.13.1

* chore: changelog

* 提交first翻译

LinFeng1997 added a commit to docschina/vuepress that referenced this issue Aug 12, 2018

Translate to v0.14.1 (#22)
* feat: control BundleRenderer shouldPrefetch option (vuejs#463)

* chore: remove override.styl

* refactor: changelog

* feat: transform Badge into async component

* fix: set babelrc: false in babel-loader options (vuejs#644)

Prevents picking up local `.babelrc` file in projects.

* docs($cn): update for new file-level API: style.styl.

* Translate to v0.12.0

* feat($pwa): add themeConfig.serviceWorker.updatePopup option (close: vuejs#453) (vuejs#533)

* docs: tweaks

* docs: enable serviceWorker.updatePopup

* chore: update register-service-worker to latest

* docs($cn): tweaks (vuejs#652)

* refactor($release): let [enter] pass next step (vuejs#650)

* chore: fix code snippet typo (missing semi-colon) (vuejs#658)

* docs: tweaks lastUpdated (vuejs#663)

* fix: scoped styles of badge component (close: vuejs#653) (vuejs#657)

* fix($build): markdown config should be included in cache identifier

It's reported by vuejs#664, but vuejs#664 cannot be fixed fully since watching webpack config changes shouldn't be handled in VuePresss

VuePress can only ensure that when user changes the markdown config, the cache identifier will be updated, so user needn't to clean the ./node_modules/.cache manually.

See: webpack/webpack#3153, webpack/webpack-cli#15

* workflow: update issue template - add more guidelines

* feat($cli): debug flag at dev mode

reason for this feature: webpack-bar will wipe out the debug log at dev mode.

* fix($seo): Avoid duplicate description meta at runtime. (close: vuejs#665)

* refactor: code style

Follow the official code style guide, refs:

1. https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended
2. https://vuejs.org/v2/style-guide/#Empty-lines-in-component-instance-options-recommend
3. https://github.com/vuejs/ui

* fix($markdown): cannot highlight external python file (.py) correctly (close: vuejs#660)

* fix: missing space between italics and bold (close: vuejs#661)

"markdown-it" will intendedly reserve this space, and this issue was caused by "preserveWhitespace: true" (See: https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options),

Impact on performance (Size of whole assets): Before (1952K), After (1960K), which is an acceptable change.

* chore: add alt attribute to logo image (vuejs#672)

* fix($build): exclude dest folder from pageFiles (close: vuejs#654) (vuejs#655)

* refactor: naming and comments (vuejs#655)

* chore: update deps

* test: fix SecurityError: localStorage is not available for opaque origins

ref: facebook/jest#6769

* 0.13.0

* chore: changelog

* chore: enhance changelog

* docs: i18n for serviceWorker.updatePopup

* docs($cn): document for themeConfig.serviceWorker.updatePopup

* chore: changelog

* docs: update reamde - add SW-update popup

* docs: document i18n example for SW-update popup

* docs: document beta status for SW-update popup

ref: vuejs#677

* fix: py lang label doesn't display in code block (vuejs#690)

* fix: normalize override file path in windows (vuejs#692) (close: vuejs#642)

* 0.13.1

* chore: changelog

* fix: set alias "collapsible" to "collapsable" (close: vuejs#705) (vuejs#706)

* docs: enhance docSearch integration with language (vuejs#697)

* Revert "docs: enhance docSearch integration with language (vuejs#697)"

This reverts commit 0d581c4.

* fix: algolia search doesn't work well at i18n mode

Add lang facetFilters presets by following VuePress's i18n design logic

* docs: enable algolia docsearch for vuepress

* chore: update sponsor image

* chore: generalized support for code highlighting (vuejs#696)

* feat: support writing HTML(Vue) anywhere in the header. (vuejs#711)

1. You can write HTML(Vue) anywhere in the header as long as it is not wrapped by code(`).
2. The HTML wrapped by code will be shown as it is.
3. A good practice when using HTML in a header is to leave a space between plain text and HTML.

* chore: bump theme

* docs: fix typo

* docs: update docs

* docs: docuement using components in headers

* feat($webpack): display host url at dev HMR log

* fix: skip format data.head if not exist while loading toml config (vuejs#707)

* fix: navbar's messy layout at narrow screen (vuejs#714)

* docs: tweaks

* 0.14.0

* chore: changelog

* refactor: changelog

* fix: default search box line wrap

* fix: navbar's regression - siteName null check

* ci: add npm whoami

* 0.14.1

* chore: changelog

* trans:v0.14.1
@codeofsumit

This comment has been minimized.

Copy link

commented Aug 15, 2018

@ulivz while fixed for the description tag - the issue seems to persist for other meta tags:

// config.js
  head: [
    ['meta', { name: 'twitter:card', content: 'summary_large_image' }],
    ['meta', { name: 'twitter:site', content: '@TweetsOfSumit' }],
    ['meta', { name: 'twitter:creator', content: '@TweetsOfSumit' }],
    ['meta', { property: 'og:type', content: 'article' }],
    ['meta', { property: 'og:title', content: 'Raum.sh' }],
    ['meta', { property: 'og:site_name', content: 'Raum.sh' }],
    ['meta', { property: 'og:url', content: 'https://raum.sh' }],
    [
      'meta',
      {
        property: 'og:image',
        content: 'https://raumsh-idpjzzfqhw.now.sh/images/speaking.jpg',
      },
    ],
  ],
---
# Markdown Front Matter
layout: Post
published: 2018-08-07
title: Blog is online 🙋‍♂️
meta:
  - property: og:title
    content: Blog is online 🙋‍♂️
  - name: description
    content: I finally decided to use VuePress as a blog engine.
  - name: keywords
    content: Web Developer Developer Relations Development Blog
---

(yup, social meta tags are a bit of a chaos but that's a different issue)

Output:

  <title>Blog is online 🙋‍♂️ | Raum.sh</title>
  <meta name="description" content="I finally decided to use VuePress as a blog engine.">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:site" content="@TweetsOfSumit">
  <meta name="twitter:creator" content="@TweetsOfSumit">
  <meta property="og:type" content="article">
  <meta property="og:title" content="Raum.sh">
  <meta property="og:site_name" content="Raum.sh">
  <meta property="og:url" content="https://raum.sh">
  <meta property="og:image" content="https://raumsh-idpjzzfqhw.now.sh/images/speaking.jpg">
  <meta name="title" content="Blog is online 🙋‍♂️">
  <meta property="og:title" content="Blog is online 🙋‍♂️">
  <meta name="keywords" content="Web Developer Developer Relations Development Blog">

Search for og:title - it's doubled.

Demo:
https://raumsh-vsumtazmko.now.sh/blog/BlogLaunch.html

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.