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.

Sign up for GitHub

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

Jump to bottom

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

Open
lgklsv opened this issue Mar 9, 2025 · 4 comments
Open

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

lgklsv opened this issue Mar 9, 2025 · 4 comments
Labels
bug 💥

Comments

@lgklsv
Copy link

lgklsv commented Mar 9, 2025 •
edited
Loading

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 lgklsv added the bug 💥 label Mar 9, 2025
@lgklsv
Copy link
Author

lgklsv commented Mar 9, 2025

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

lgklsv commented Mar 9, 2025 •
edited
Loading

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

Image

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)

@brillout
Copy link
Member

brillout commented Mar 10, 2025 •
edited
Loading

If the component that uses config({ Head })/<Head> is used multiple times on a page, then it's kinda expected to get duplicated <Head> tags (in some use cases it's actually a goal).

If the component is used only once, then it's probably due to some suspense boundary. It can be fixed on vike-react's side by having vike-react use React's useId() for deduping.

The best would be a reproduction. Alternatively, vike-react PR welcome that adds useId() to https://github.com/vikejs/vike-react/blob/main/packages/vike-react/src/hooks/useConfig/useConfig-server.ts (it's only needed on the server-side).

https://github.com/lgklsv/vike-streaming-meta-demo

I couldn't reproduce.

Keep me updated, also if you can't manage to reproduce nor create a PR — let's then re-evaluate how we can proceed.

@brillout
Copy link
Member

Btw. make sure to read https://vike.dev/Head#only-html as it answers your other questions.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 💥
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@brillout @lgklsv