I have a Vue project that consists of a single page all of which content comes from the public/index.html file. In particular, its metadata tags. However those tags are not parsed by social media (Discord) and by an online parser: https://jsonlink.io/.
Meanwhile a page.html file with the very same tags gets parsed (and embedded on Discord) alright.
The simple page.html (URL: http://lionchortle.lol/page):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="theme-color" content="#C41721"/>
<meta property="og:url" content="http://lionchortle.lol">
<meta property="og:title" content="Lion Chortle">
<meta property="og:description"
content="Lion stuff">
<meta property="og:image" content="https://i.imgur.com/JvVi7Rr.jpeg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="http://lionchortle.lol">
<meta name="twitter:title" content="Twitter title">
<meta name="twitter:description"
content="Twitter description">
<meta name="twitter:image" content="https://i.imgur.com/JvVi7Rr.jpeg">
</head>
<body>
<h1>Hello</h1>
</body>
</html>
Output from Discord:
Output from JsonLink parser:
Vue project (URL: http://lionchortle.lol/vue):
root
public
index.html
src
App.vue
index.html
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="theme-color" content="#C41721"/>
<meta property="og:url" content="http://lionchortle.lol">
<meta property="og:title" content="Lion Chortle">
<meta property="og:description"
content="Lion stuff">
<meta property="og:image" content="https://i.imgur.com/JvVi7Rr.jpeg">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="http://lionchortle.lol">
<meta name="twitter:title" content="Twitter title">
<meta name="twitter:description"
content="Twitter description">
<meta name="twitter:image" content="https://i.imgur.com/JvVi7Rr.jpeg">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<h1>Vue Page</h1>
</body>
</html>
Output from Discord (no embeds):
Output from JsonLink parser:
The meta tags are visible on View Source Code page for the Vue project, and are not loaded dynamically, so it shouldn’t be a matter of SPA vs SSR.
However, I’m lost as to what is the issue here.