-2

I Have a vue2 project with vue-meta and i have vue-i18n to localize the project. In my browser bookmark the title of the webpage is not shown. The variable is shown instead. Same issue when looking in google analytics it seems that my variable is being shown instead of the values in the variable.

Here is a code snippet from my Home component:

   name: 'Home',
    metaInfo () {
      return {
      title: this.$t("home.meta.title"),
      meta: [{
        name: "description",
        content: this.$t("home.meta.descriptioncontent")
      }, {
        name: "keywords",
        content: this.$t("home.meta.keywordscontent")
      },
      { property: 'og:title', content: this.$t("home.meta.title")},
      { property: 'og:site_name', content: 'www.examplesite.se'},
      { property: 'og:description', content: this.$t("home.meta.descriptioncontent")},
      { property: 'og:type', content: 'Home'},
      { property: 'og:url', content: 'https://examplesite.se/'},
      { property: 'og:image', content: 'https://www.examplesite.se' + '/img/' + 'example_logo_social.png'}
      ]
      }
    },
    data() {
      return {
        fimagefolder: '../../Images/',
        bimagefolder: '../../fImages/',
      };
    },

So the this.$t("home.meta.title") variable stores a swedish and a english translation. And when inside the website it shows the correct title for both languages, but google analytics shows only "home.meta.title" instead.

From what i understood the crawlers doesnt see my variable values due to not loading any scripts?? Any ideas?

crunchwrap
  • 31
  • 9

2 Answers2

1

It would be good to see some of your code to see how you have set it up, otherwise we are a bit in the dark and it is hard to help. So, this is more of a comment than an answer, but I am sharing some code that might help and that won't fit in a comment.

I am assuming you are using vue-i18n and my guess is that you are defining vueMeta as an object. Whereas, if you define it as a function you can access other component data, including this.$t. It should work together like this:

<template>
<div>
    <p>The title of this page should be 'Translated Title'.</p>
</div>
</template>

<script>
export default {
    metaInfo () {
        return {
            title: this.$t('title')
        }
    }
}
</script>

<i18n>
{
    "en": {
        "title": "Translated Title"
    }
}
</i18n>
sifriday
  • 4,342
  • 1
  • 13
  • 24
  • Hi, i have updated the post with a code snippet from my Home component. – crunchwrap Aug 05 '21 at 18:26
  • Does this help with the new code snippet? Like i said, it shows the correct title when im inside the website, but not in bookmark and not in google analytics. Also when i load the page i can see that it takes 1 second before the variable name dissappears and the translated valeue shows instead.. – crunchwrap Aug 05 '21 at 18:47
0

i found the solution. This issue occured due to having my Meta details in both my view components And my App component. When i removed my Meta details from the App component the issue does not occur.

I Believe it's because the locale does not become active until after the app component is mounted. Therefore the meta variable is null until a few milliseconds after.

crunchwrap
  • 31
  • 9