Vue-meta: My conditional meta are well defined in head but not read by socialmedia
Hello everyone !
I'm using vue-meta in a child component with dynamic variables as below (1).
If I inspect the <head>, all my metadatas are in the right place with the right content - see below (2) ! But.... when I try to share my link on social media or even to test it with this kind of debugger https://metatags.io/, nothing is showing up.... The only metadata that is read by social media is the title of my entire website which is define in my index.html, as below (3).
(1) My child component :
metaInfo() {
let translations = this.$i18n.messages[this.$i18n.locale].experience.share;
return {
title: translations.og_title,
meta: [
// Primary Meta Tags
{ name: 'title', content: translations.og_title },
{ name: 'description', content: this.experience.description },
// Open Graph / Facebook
{ property: 'og:type', content: translations.og_type },
{ property: 'og:url', content: this.baseUrl + this.experience.public_token },
{ property: 'og:title', content: translations.og_title },
{ property: 'og:description', content: this.experience.description },
{ property: 'og:image', content: this.experience.picture_url },
// Twitter
{ property: 'twitter:card', content: 'summary_large_image' },
{ property: 'twitter:url', content: this.baseUrl + this.experience.public_token },
{ property: 'twitter:title', content: translations.og_title },
{ property: 'twitter:description', content: this.experience.description },
{ property: 'twitter:image', content: this.experience.picture_url },
]
};
},
(2) The resulting head balise
Start
End
(3) This is where the title "[STAGING] Highday" comes from => see public/index.html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0, viewport-fit=cover, user-scalable=no">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<html>
Thanks a lot for your help !
Emilie-thp
All 8 comments
Are you using SPA mode?
aldarund
on 23 Jul 2020
Single Page Application you mean ? No it's a Progressive Web App (PWA)
Emilie-thp
on 23 Jul 2020
https://nuxtjs.org/api/configuration-mode/ - what mode?
aldarund
on 23 Jul 2020
It's the default mode, universal
Emilie-thp
on 23 Jul 2020
Than it should work. Do u have a link to website where it happens?
aldarund
on 23 Jul 2020
I'm not 100% sure if I can publicly share this website which is not mine
But I followed the instruction of this article to write my metaInfo() and I feel like that the link he gave as an example at the end of the article is dealing with exactly the same issue... => https://www.epiloge.com/@axel-wittmann
This is what his metadata looks like in head balise
And this is what social media can effectively read
Emilie-thp
on 23 Jul 2020
I actually missed that its vue meta repo.
That example that you linked is SPA app. It don't have tags rendered into HTML, so they wont be visible like you want them too. The only way is too do SSR or prerendering. Otherwise it wont work for social tools, because they just grab your HTML and look at tags, they don't do any js
aldarund
on 23 Jul 2020
ok, thank you very much for this conversation that made me realize that indeed my app is probably a SPA... I was trapped in the idea that the SPA is only one page but found this https://forum.vuejs.org/t/universal-vs-single-page-app/41176/3 and now I understand the difference better ! Thankssss
Emilie-thp
on 23 Jul 2020
Related issues
hurradieweltgehtunter
路
4Comments
derz
路
3Comments
achen224
路
9Comments
DRoet
路
9Comments
vishr
路
5Comments
Most helpful comment
I actually missed that its vue meta repo.
That example that you linked is SPA app. It don't have tags rendered into HTML, so they wont be visible like you want them too. The only way is too do SSR or prerendering. Otherwise it wont work for social tools, because they just grab your HTML and look at tags, they don't do any js