Динамическая мета для Nuxt.js - PullRequest
Новая
       32

Динамическая мета для Nuxt.js

0 голосов
/ 14 ноября 2018

Может ли кто-нибудь помочь с ситуацией с метаинформацией с динамическими данными.

Проблема

Мы используем Nuxt и генерируем нашу статическую страницу, используя npm run generate, и выявили несколько проблем с этим подходом:

  • открытый график и метатеги Twitter не могут быть динамически обновлены, потому что сканеры не работают JS

  • страница сведений в процессе сборки генерируется только один раз и поэтому не имеет соответствующих данных, пока пользователь не перешел на эту страницу с параметрами URL (например,
    example.com/cars/details?make=Audi&model=A6&carID=133852), который затем подача AJAX GET-запроса на данные

Желаемый результат

Открытие графиков, твиттеров и других мета-тегов, уникальных для каждой страницы с информацией об автомобиле.

Вопрос

Можно ли достичь желаемого результата только сгенерированной статикой? Если нет, то как будет выглядеть процесс с мета-контентом, созданным на стороне SSR или на стороне сервера?

Наша структура папок dist в настоящее время: 

dist/
  ├ index.html
  ├ cars/
    ├ index.html
    └ details/
      ├ index.html
      └ payment/
        └ index.html

авто страница со списком авто

подробности щелчок по автомобилю позволяет перейти на страницу сведений о выбранном автомобиле

оплата страница покупки автомобиля

1 Ответ

0 голосов
/ 14 ноября 2018

Нет, невозможно предоставить динамические метатеги при обслуживании предварительно визуализированного статического HTML.

Запуск Nuxt в режиме универсальный позволяет получать данные страницы из API(с помощью fetch , asyncData или nuxtServerInit action ), генерирование HTML-содержимого страницы (включая динамические метатеги) и его предоставление пользователю.

Простой пример использования с SSR: 

export default {
  async asyncData ({ query, store }) {
    const { make, model, cardID } = query
    // Validate query params

    // fetch data from API
    try {
      const carDetails = await store.dispatch('getCardInfo', { make, model, cardID })
      return {
         cardDetails
      }
    } catch (error) {
      // Redirect to error page or 404 depending on server response
    }
  },
  head () {
    return {
      title: this.carDetails.title,
      meta: [
        { hid: 'og-title', property: 'og:title', content: this.carDetails.title },
        // other meta
      ]
    }
  }
}

Это обеспечит загрузку данных страницы до визуализации компонента и включение допустимых метатегов для потребления поисковыми системами.

Sidenote: вместо того, чтобы использовать параметры запроса, вы можете проверить динамические маршруты , которые значительно лучше для SEO, а также удобный для пользователя URL (например, example.com/cars/audi/a6/133852)

...