[🐞] Link component messes up meta tags

[rober-m]

Which component is affected?

Qwik City (routing)

Describe the bug

When I navigate from the main website page (in which I set meta tags using DocumentHead) to a blog post (in which I also set meta tags using DocumentHead):

• If I use the <a> element to navigate, it works fine (meta tags get replaced correctly).
• If I use the <Link> component from qwik-city, many tags change their content with other tags. Specifically, it seems that Twitter/X tags "absorb" other tags randomly. My best guess is that because Twitter/X uses name instead of property, that breaks SPA routing somehow.

Example

This is the metadata before navigating (removed clutter):

<title q:head="">Main - title</title>
<meta property="robots" content="index, follow" q:head="">
<meta property="author" content="Main - author" q:head="">
<meta property="og:locale" content="es" q:head="">
<meta property="og:type" content="Main - article" q:head="">
<meta property="og:image:width" content="1920" q:head="">
<meta property="og:image:height" content="990" q:head="">
<meta property="og:image:type" content="image/png" q:head="">
<meta property="og:url" content="Main - url" q:head="">
<meta property="og:site_name" content="Main - site_name" q:head="">
<meta property="article:publisher" content="Main - publisher" q:head="">
<meta name="twitter:card" content="summary_large_image" q:head="">
<meta name="twitter:site" content="Main - twitter:site" q:head="">
<meta name="twitter:title" content="Main - twitter:title" q:head="">
<meta name="twitter:creator" content="Main - twitter:creator" q:head="">

This is the metadata after navigating using <a> (expected result):

<title q:head="">Blog - title</title>
<meta name="description" content="POST - DESCRIPTION" q:head="">
<meta property="og:title" content="POST - TITLE" q:head="">
<meta property="og:description" content="POST - OG DESCRIPTION" q:head="">
<meta property="og:image" content="/images/og-image.jpg" q:head="">
<meta property="og:image:alt" content="POST - OG IMAGE ALT" q:head="">
<meta property="description" content="Blog - description" q:head="">
<meta property="robots" content="index, follow" q:head="">
<meta property="author" content="Blog - author" q:head="">
<meta property="og:locale" content="es" q:head="">
<meta property="og:type" content="Blog - article" q:head="">
<meta property="og:image:width" content="1920" q:head="">
<meta property="og:image:height" content="990" q:head="">
<meta property="og:image:type" content="image/png" q:head="">
<meta property="og:url" content="Blog - url" q:head="">
<meta property="og:site_name" content="Blog - site_name" q:head="">
<meta property="article:publisher" content="Blog - publisher" q:head="">
<meta name="twitter:card" content="summary_large_image" q:head="">
<meta name="twitter:site" content="Blog - twitter:site" q:head="">
<meta name="twitter:title" content="Blog - twitter:title" q:head="">
<meta name="twitter:creator" content="Blog - twitter:creator" q:head="">

This is the metadata after navigating using <Link> (unexpected result):

<title q:head="">Blog - title</title>
<meta property="description" content="POST - DESCRIPTION" q:head="" name="description">
<meta property="og:title" content="POST - TITLE" q:head="">
<meta property="og:description" content="POST - OG DESCRIPTION" q:head="">
<meta property="og:image" content="/images/og-image.jpg" q:head="">
<meta property="og:image:alt" content="POST - OG IMAGE ALT" q:head="">
<meta property="description" content="Blog - description" q:head="">
<meta property="robots" content="index, follow" q:head="">
<meta property="author" content="Blog - author" q:head="">
<meta property="og:locale" content="es" q:head="">
<meta property="og:type" content="Blog - article" q:head="">
<meta property="og:image:width" content="1920" q:head="">
<meta name="twitter:card" content="990" q:head="" property="og:image:height">
<meta name="twitter:site" content="image/png" q:head="" property="og:image:type">
<meta name="twitter:title" content="Blog - url" q:head="" property="og:URL">
<meta name="twitter:creator" content="Blog - site_name" q:head="" property="og:site_name">
<meta data-qwik-inspector="components/router-head/router-head.tsx:21:9" property="article:publisher" content="Blog - publisher">
<meta data-qwik-inspector="components/router-head/router-head.tsx:21:9" name="twitter:card" content="summary_large_image">
<meta data-qwik-inspector="components/router-head/router-head.tsx:21:9" name="twitter:site" content="Blog - twitter:site">
<meta data-qwik-inspector="components/router-head/router-head.tsx:21:9" name="twitter:title" content="Blog - twitter:title">
<meta data-qwik-inspector="components/router-head/router-head.tsx:21:9" name="twitter:creator" content="Blog - twitter:creator">

Notice that Twitter/X tags "absorbed" other tags by taking their property value and replacing the original Twitter/X-related content with the content of the "absorbed" property.

Reproduction

Minimal: https://github.com/rober-m/qwik-meta-routing Closer to the real use case: https://github.com/rober-m/qwik-meta-routing/tree/closer-to-real-world

Steps to reproduce

1. npm i
2. npm run dev
3. Open the "Elements" tab and look at all the <meta> tags
4. Click on the "Navigate to Blog Post using Link-tag"
5. Look at all the <meta> tags again

System Info

System:
    OS: macOS 13.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 1.81 GB / 32.00 GB
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.18.0 - /etc/profiles/per-user/roberm/bin/node
    npm: 8.19.3 - /opt/homebrew/bin/npm
  Browsers:
    Brave Browser: 119.1.60.114
    Chrome: 118.0.5993.96
    Safari: 16.1
  npmPackages:
    @builder.io/qwik: ^1.2.19 => 1.2.19 
    @builder.io/qwik-city: ^1.2.19 => 1.2.19 
    undici: ^5.26.0 => 5.28.2 
    vite: ^4.4.11 => 4.5.0

Additional Information

No response

[gioboa]

Thanks for your feedback. i tested your repo and these meta tags in the index.mdx are messing up things

og:
  - title: true
  - description: "POST - OG DESCRIPTION"
  - image: /images/og-image.jpg
  - image:alt: "POST - OG IMAGE ALT"
slug: "slug-of-the-post"
twitter:
  title: "POST - TWITTER TITLE"
featured: true
tags:
    - tag-1
    - tag-2
    - tag-3

Without them is working correctly.

[rober-m]

Thank you, @gioboa for taking a look. Removing those tags doesn't solve the problem because I still get the following:

<meta name="twitter:card" content="Blog - publisher" q:head="" property="article:publisher">
<meta name="twitter:card" content="summary_large_image" q:head="">

Still, the example was the minimum way to reproduce the bug, but I need to set the metadata from the index.mdx file in production because each blog post has its own.

To help with what I mean, I made small changes to the example (in a separate branch) that shows how I use the metadata in my app. Please, take a look at utils/metatada-builder.ts and routes/(blog)/layout.tsx