1

Я использую плагин i18n для смены языка и так же плагин для мета тегов на странице vue-meta. Плагин i18n отлично работает для смены языка сайта. А вот сделать чтоб мету страницы менял нету идей как это все соединить.

App.vue выглядит вот так. metaInfo чудестно грузит информацию если только в нее написать текст. Пока работает статично, как сделать чтоб динамично менялась информация в полях при смене языка сайта ?

export default {
        name: 'name',
        metaInfo: {
            title: 'название страницы', // set a title
            titleTemplate: '%s - продолжение название страницы', // %s  required
            htmlAttrs: {
                lang: 'ru',
                amp: undefined // "amp" has no value
            },
            meta: [
                {   'name':'og:title',
                    'content': 'название',
                },
                {   'name':'metatitle',
                    'content': 'название',
                },
                {   'name':'og:description',
                    'content': 'описание',
                },
                {   'name':'description',
                    'content': 'описание',
                }

            ]

        },
        data(){return{}}

2 ответа 2

1

Ответ который был отмеченный как правильный - считаю не совсем правильным. Так как на своем опыте знаю, что Open Graph мета при таком подходе работать не будет. Потому что данные для мета сформируются только после того как vuejs(не важно даже какой фраимворк) смонтирует экземпляр, настроит свои внутренние штуки и только потоооооом добавит текста в указанные поля. Пока это все настроится, SEO боты уже обработают страницу и не ничего на ней не увидят. Можно проверить тут https://developers.facebook.com/tools/debug

Чтобы решить эту проблему, нужно генерировать статичный html, с уже подготовленными данными. В этом может помочь Server Side Rendering, предлагаю почитать вот это https://ssr.vuejs.org/ru

Так же можно воспользоваться ssr заготовкой для этих дел https://ru.nuxtjs.org/, но а что если проект уже написан, имеет кучу кода, в общем крутится-вертится? аааа? Я короче решил эту проблему добавив плагин для webpack https://github.com/chrisvfritz/prerender-spa-plugin. Там довольно легко все настраивается.

В моем случае в папке build, в файле webpack.prod.conf.js добавил следующее(точки - это какой-то код)

...
const PrerenderSpaPlugin = require('prerender-spa-plugin')
...
const webpackConfig = merge(baseWebpackConfig, {
...
   plugins: [
   ...
      new PrerenderSpaPlugin(
         path.resolve(__dirname, '../dist'),
         ['/en', '/ru', '/en/jobs', '/ru/jobs'],
         {}
      ),
   ...
   ]
})
...

После выполнения команды npm run build, в папке dist сгенерируются дополнительные папочки со статичными html файлами, то есть со всеми страницами.

введите сюда описание изображения

Вот хороший туториал https://www.youtube.com/watch?v=pwHdFPEX4NA

0
0

Просто читать внимательно надо документацию :)

 import {Meta} from '../meta.js'

export default {
        name: 'pagecalc',
        metaInfo() {
            return {
                title: this.MetaData[0]['title'], // set a title
                titleTemplate: this.MetaData[0]['titleTemplate'], // %s  required
                htmlAttrs: this.MetaData[0]['htmlAttrs'],
                meta: this.MetaData[0]['meta']
            }
        }

       computed: {
        language() {
            return this.$store.getters.languages
        },
        MetaData(){
            return Meta[this.$store.getters.languages]['Homepage']
        }

    },

}

meta.js

export const Meta = {
ru:{
        Homepage: {
        title: 'навание', // set a title
        titleTemplate: '%s - название', // %s  required
        htmlAttrs: {
            lang: "ru",
            amp: undefined // "amp" has no value
        },
        meta: [
            {
                'name': 'og:title',
                'content': 'Описание',
            },
            {
                'name': 'metatitle',
                'content': 'Описание',
            },
            {
                'name': 'og:description',
                'content': 'Описание',
            },
            {
                'name': 'description',
                'content': 'Описание',
            }

        ]
    }


    },
en: {
    Homepage: {
        title: 'навание', // set a title
        titleTemplate: '%s - название', // %s  required
        htmlAttrs: {
            lang: "ru",
            amp: undefined // "amp" has no value
        },
        meta: [
            {
                'name': 'og:title',
                'content': 'Описание',
            },
            {
                'name': 'metatitle',
                'content': 'Описание',
            },
            {
                'name': 'og:description',
                'content': 'Описание',
            },
            {
                'name': 'description',
                'content': 'Описание',
            }

        ]
    }


},

}

1
  • А вы уверены что мета Open Graph будет работать? Чтение мета данных ботами происходит до того как эти мета сформируются
    – Denisoed
    28 дек 2018 в 3:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.