Как через prerender-spa-plugin для VUE сделать разные СЕО мета-теги для разных страниц?

Question

[Илья Молчанов]

Сделано SPA приложение на VUE, потом столкнулся с необходимостью СЕО продвижения.
Установил плаги prerender-spa-plugin и настроил webpack что страницы теперь отлично пререндерятся, НО
точка входа одна и мета-теги типа title и description на каждой странице остаются одни и теже.
Настройка вебпака с плагинами


Страниц получается 4 - routes: ['/', '/sale', '/delivery', '/contacts']
Есть ли возможность задать им разные title и мета-теги для СЕО?

Answer 1

[Илья Молчанов]

Сам напишу ответ, может кому пригодится тоже:
на GitHub разделе Advanced Usage пример с postProcess.
Там можно html разметку исправить динамически. Пример с тегом title есть в разделе v2.x Compability (return context.html.replace(
/)

postProcessHtml: function (context) {
          var titles = {
            '/': 'Home',
            '/about': 'Our Story',
            '/contact': 'Contact Us'
          }
          return context.html.replace(
            /<title>[^<]*<\/title>/i,
            '<title>' + titles[context.route] + '</title>'
          )
        }

Answer 2

[Алексей]

Попробуйте на каждой странице в хуке жизненного цикла mounted() сделать так document.head.querySelector('...') вместо ... селектор мета тега по какому либо атрибуту и далее меняем значения у атрибутов нужного тега

Answer 3

[Андрей Хохлов]

https://github.com/nuxt/vue-meta