override head tags on indivisual page

[sapphi-red]

Is your feature request related to a problem? Please describe.

Vite sets OGP tags globally by .vitepress/config.ts.

But we want to override OGP tags for some indivisual pages (for example, Vite 3 release post).
Now we set those by frontmatter and actually seems to work.
Though the tags are duplicated like this:

  <meta property="og:type" content="website">
  <meta property="og:title" content="Vite">
  <meta property="og:image" content="https://vitejs.dev/og-image.png">
  <meta property="og:url" content="https://vitejs.dev">
  <meta property="twitter:description" content="Next Generation Frontend Tooling">
  <meta property="twitter:title" content="Vite">
  <meta property="twitter:card" content="summary_large_image">
  <meta property="twitter:image" content="https://vitejs.dev/og-image.png">
  <meta property="twitter:url" content="https://vitejs.dev">
  <script>(()=>{const e=localStorage.getItem("vitepress-theme-appearance"),a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
  <meta name="og:type" content="website">
  <meta name="og:title" content="Announcing Vite 3">
  <meta name="og:image" content="https://vitejs.dev/og-image-announcing-vite3.png">
  <meta name="og:url" content="https://vitejs.dev/blog/announcing-vite3">
  <meta name="twitter:description" content="Vite 3 Release Announcement">
  <meta name="twitter:title" content="Announcing Vite 3">
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:image" content="https://vitejs.dev/og-image-announcing-vite3.png">
  <meta name="twitter:url" content="https://vitejs.dev/blog/announcing-vite3">

The OGP spec does not mention anything when a multiple tags existed. So I think this behavior is implementation dependent.

Describe the solution you'd like

Give a way to declare that a head tag should only exist once on config.

But we need to consider what tags should be treated as same. For example, <meta property="og:title" content="foo" > and <meta property="og:title" content="bar" > are same, when tag name and the value of property attribute is same.

Describe alternatives you've considered

Give a way to declare that a head tag should override it on frontmatter.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

Added a de-duplication strategy in #976.

But we need to consider what tags should be treated as same.

Took this from 0.x code. We had a hasTag function there (removed during cleanup - #725). It basically checks your first attribute.

As for the feature request part, we are tracking it at #551. (#588 is a possible implementation, it needs rewrite though.)

[sapphi-red]

@brc-dd Thank you for the quick fix!
But I'm afraid it will cause bugs IIUC. For example, if someone uses <script type='module'>, it will be deduped.
To be safe, IMO it is better to limit this behavior to <meta> tag.

[brc-dd]

Limited it to meta for now. But we could make it run for all tags. People just will have to add an id attribute (similar to how Next.js needs id for script optimization). It would enable overrides like if someone wants to override scripts/styles for certain pages. For now lets leave this. Might consider it later. Although supporting a transform function for head in themeConfig would eliminate need for such stuff.

[sapphi-red]

Sounds good to me 👍 Thank you again.