seo Question posted in
Some basic information to get you started with this can be found here.

Vue meta i18n variable name showing instead of value – SEO

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search