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
Closed

Duplicate description meta at runtime. #665

jordonbaade opened this issue Jul 23, 2018 · 5 comments

Comments

@jordonbaade
Copy link
Contributor

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

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

@jordonbaade
Copy link
Contributor Author

jordonbaade 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 as completed in b207a5f Jul 27, 2018
@ulivz
Copy link
Member

ulivz 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

@codeofsumit
Copy link

codeofsumit 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
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants