vue.js - Vue meta i18n 变量名显示而不是值

标签 vue.js seo vue-i18n vue-meta

我有一个带有 vue-meta 的 vue2 项目,我有 vue-i18n 来本地化该项目。
在我的浏览器书签中,没有显示网页的标题。而是显示变量。在 Google Analytics 中查看时出现同样的问题,似乎显示的是我的变量而不是变量中的值。
这是我的 Home 组件的代码片段:

   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/',
      };
    },
所以 this.$t("home.meta.title") 变量存储瑞典语和英语翻译。当在网站内时,它会显示两种语言的正确标题,但谷歌分析只显示“home.meta.title”。
据我了解,由于未加载任何脚本,爬虫程序看不到我的变量值?有任何想法吗?

最佳答案

最好能看到你的一些代码,看看你是如何设置的,否则我们会一头雾水,很难提供帮助。因此,这与其说是答案,不如说是评论,但我正在分享一些可能有帮助但不适合评论的代码。
我假设您正在使用 vue-i18n 并且我的猜测是您将 vueMeta 定义为一个对象。而如果将其定义为函数,则可以访问其他组件数据,包括 this.$t .它应该像这样一起工作:

<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>

关于vue.js - Vue meta i18n 变量名显示而不是值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68667197/

相关文章:

javascript - v-for 将我的列表渲染为一行多列,而不是一列多行

javascript - 使用 Vue Js 根据输入使文本可编辑/只读

javascript - Vue-router 翻译 url

php - 基于类别名称的 SEO URL 在 URL 中没有类别 ID

c# - 使动态创建的 ASP.net 页面 SEO 友好

javascript - 如何使用 vue-i18n 翻译渲染项目列表?

json - 使用 vue-i18n 和 nuxtjs 为每种语言提供多个翻译文件

node.js - nuxt.js。生产中非根路径的模式 : spa. 问题

vue.js - Vuex 访问来自 store 的模块状态

html - 如何在 Pagedown 编辑器中使 Markdown 到 HTML 的转换对 SEO 更友好