vueuse / head

Document head management for Vue. Powered by Unhead. - 🌇 Sunset

Home Page:https://unhead.unjs.io/setup/vue/installation

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Multiple <meta> tags are merged into a single tag

mzenz opened this issue · comments

Bug description

When multiple meta tags with the same property value are added via useHead() they are merged into a single tag.

import { useHead } from '@vueuse/head'

// this should produce duplicated <meta> tags with different content values
useHead({
  title: 'Hello Vite', meta: [
    { property: 'article:tag', content: 'tag1' },
    { property: 'article:tag', content: 'tag2' },
  ]
})

Observed behavior

Duplicated <meta> tags are merged into one.

Expected behavior

useHead() should create separate <meta> tags with different content values as per OpenGraph specification.

Bug reproduction

https://github.com/mzenz/vueuse-head-meta-bug

Steps to reproduce

  • Clone repo: git clone https://github.com/mzenz/vueuse-head-meta-bug
  • yarn && yarn dev

Hey @mzenz

There is a fix for this in a big refactor I'm working on.

In the meantime you can avoid the deduping logic from picking these up by using separate keys for each entry

useHead({
  title: 'Hello Vite', meta: [
    { key: 'article-tag-1', property: 'article:tag', content: 'tag1' },
    { key: 'article-tag-2', property: 'article:tag', content: 'tag2' },
  ]
})

@harlan-zw that workaround works great. Looking forward to that PR, thanks!

You can try this out now in v1 https://github.com/vueuse/head/tree/v1

You can also provide array values for less boilerplate, they will be resolved to the same tags

useHead({
  title: 'Hello Vite', 
  meta: [
    { property: 'article:tag', content: ['tag1', 'tag2'] },
  ]
})

Further documentation is here: https://unhead.harlanzw.com/guide/guides/handling-duplicates

Going to close off this issue now