Duplicate meta tags in Head when using vike-react-query with HTML Streaming

[lgklsv]

Description

I want to set page specific meta tags (title, description, keywords, etc.) on a page that uses html streaming with vike-react-query integration. I use component to set meta tags. I followed this example from vike-react-query docs.

After google indexing the pages I saw that description is somewhat autogenerated by google and not my code. I tried to investigate on that.

In dev mode and in prod I can see only page title being changed in dev tools html structrure and none in view-source: page content. Probably it is how it should work if non-bot user accesses the page.

Here is the real issue. I tested my page with googles rich results test and saw that all meta tags that were set in Head exist on this page, but duplicated.

I set meta tags like this.

config({
    title,
    Head: (
      <>
        <meta name="description" content={description} />
        <meta name="keywords" content={keywords} />
      </>
    ),
  });

And here https://search.google.com/test/rich-results/result?id=M4CsddU7wJDBtVn4gJYf5A if you click on view tested page and then on edit code you can see them being duplicated on line 47 and 48.

Why it is important, it looks like that google ignores meta tags if they are duplicated and it is not valid html structrue.

I tried to create reproduction example, here is the code https://github.com/lgklsv/vike-streaming-meta-demo, but could not figure out how to deploy it on vercel (without deployment we can not see if meta tags are set properly and test it on how bots see the page). I used vite-plugin-vercel, which is like zero config, so I didnot change vercel output, but it shows Serverless function has crashed, then I tried Modify Build and Output Settings > OUTPUT DIRECTORY from dist to dist/client. and it still failed with the same message.

Environment

• vike: 0.4.224
• vike-react: 0.5.13
• vike-react-query: 0.1.3
• Node.js version: v20.12.2

[lgklsv]

Did not see it in the first place, they are even tripled in this example. The third one (which comes first on line 12) is my fault, forgot that tags from +Head.tsx can not be overridden.

[lgklsv]

I moved default title and description from +Head.tsx to +title.ts and +description.ts and it still shows all three of them on crawled page. Duplicted meta tags from useConfig Head and next third default description from +description.ts

Is the only way to set default meta tags +config.js ? (I have not tested it yet, because I also need my meta tags to be localized)