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.

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

Twitter image meta tag not processed during build #19485

Closed
7 tasks done
Domain314 opened this issue Feb 21, 2025 · 2 comments
Closed
7 tasks done

Twitter image meta tag not processed during build #19485

Domain314 opened this issue Feb 21, 2025 · 2 comments

Comments

@Domain314
Copy link

Domain314 commented Feb 21, 2025

Describe the bug

Description:
When building a new Vite project that includes both twitter:image and og:image meta tags in the HTML file, only the og:image meta tag is processed correctly, while the twitter:image meta tag remains unchanged.

Reproduction

https://stackblitz.com/edit/vitejs-vite-yt4r7ewn?file=dist%2Findex.html

Steps to reproduce

  1. Create a new Vite project using the default template.
  2. In index.html, add the following lines:
    <meta property="twitter:image" content="./src/assets/react.svg">
    <meta property="og:image" content="./src/assets/react.svg">
  3. Run the build command npm run build.

Expected Behavior:
Both meta tags should have their content paths processed by Vite, resulting in the same hashed asset paths being applied to both.

Actual Behavior:
After running the build:

  • The og:image meta tag is transformed correctly:
    <meta property="og:image" content="/assets/react-CHdo91hT.svg">
  • The twitter:image meta tag remains unprocessed:
    <meta property="twitter:image" content="./src/assets/react.svg">

Environment:

  • Vite version: 6.1.0
  • Node version: 20.18.1
  • Operating System: Kubuntu LTS

System Info

System:
    OS: Linux 6.8 Ubuntu 24.04.1 LTS 24.04.1 LTS (Noble Numbat)
    CPU: (12) x64 AMD Ryzen 5 3600 6-Core Processor
    Memory: 19.98 GB / 31.29 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 20.18.1 - ~/.nvm/versions/node/v20.18.1/bin/node
    npm: 10.8.2 - ~/.nvm/versions/node/v20.18.1/bin/npm
    pnpm: 10.2.0 - ~/.local/share/pnpm/pnpm
  Browsers:
    Chromium: 133.0.6943.53
  npmPackages:
    @vitejs/plugin-react-swc: ^3.5.0 => 3.8.0 
    vite: ^6.1.0 => 6.1.1

Used Package Manager

npm

Logs

No response

Validations

@bluwy
Copy link
Member

bluwy commented Feb 21, 2025

twitter:* metadata uses the name attribute, not the property attribute.

@Domain314
Copy link
Author

twitter:* metadata uses the name attribute, not the property attribute.

Damn. I missed that. I copied the meta tags from metatags.io .
Their template seems to be wrong.

Thank you very much! It works now :)

Sorry for filling out a bug report. I haven't thought about it this way and searched in the wrong direction.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants