Nuxt - Можете ли вы предварительно визуализировать метаданные?

Настройка

Я использую GitHub Pages для статического размещения своего сайта. Для генерации данных SEO я использую собственный метод head(), поддерживаемый фреймворком Nuxt. Вот образец моей установки.

export default {
  head() {
    return meta({
      title: 'Page title here',
      description: "Page description here",
      image: this.image, // programmatic image
    })
  }
}

Проблема

Как и ожидалось для одностраничного приложения, метаданные отображаются в DOM по мере загрузки страницы. Исходные данные в HTML берутся из nuxt.config.js, информации, предназначенной для моей домашней страницы. Это вызывает проблему, заключающуюся в том, что при очистке любой страницы все они имеют одни и те же метаданные.

Цель

Можно ли отображать метаданные каждой страницы в соответствующих файлах HTML при запуске nuxt generate? Таким образом, соответствующие метаданные будут доступны, когда Google, Facebook, Instagram и другие платформы очищают метаданные.


person dvoutt    schedule 09.07.2021    source источник
comment
У вас должна получиться точно такая же настройка для каждого файла. Если ваши данные асинхронны, вы можете получить их таким образом, IMO: stackoverflow.com/a/67633638/8816585   -  person kissu    schedule 10.07.2021
comment
Спасибо, что поделились AsyncData, хорошее обучение. Но я не уверен, как это можно преобразовать в HTML с помощью команды generate. Разве это не будет доступно после загрузки страницы?   -  person dvoutt    schedule 11.07.2021
comment
Это будет создано заранее. Попробуйте yarn generate и yarn start и проверьте исходный код.   -  person kissu    schedule 11.07.2021
comment
Просто пытаюсь понять, как это написать, поскольку я на самом деле не делаю никаких внешних вызовов для получения данных, поскольку они почти все статичны.   -  person dvoutt    schedule 12.07.2021
comment
Если он статический, запишите его.   -  person kissu    schedule 12.07.2021
comment
Я в приведенном выше примере это именно то, что я сделал, у меня просто есть метод, который его форматирует. Но yarn generate не отображает его в файле HTML во время сборки.   -  person dvoutt    schedule 12.07.2021
comment
Это должно работать нормально. У вас есть минимальный воспроизводимый пример?   -  person kissu    schedule 12.07.2021
comment
У меня нет готового минимального примера. И я подумал, что именно так с этим справится Nuxt, но он рендерит head() данные после загрузки DOM, поэтому они всегда пропускаются при извлечении из исходного HTML-кода до загрузки JS.   -  person dvoutt    schedule 12.07.2021
comment
Я создал новый проект, следуя инструкциям на этой странице: nuxtjs. org / docs / 2.x / components-glossary / pages-head И получил успешный статический результат через View page source. В вашем nuxt.config.js файле есть target: static и ssr: true, верно?   -  person kissu    schedule 12.07.2021
comment
Не использовать ssr: true, который имел бы смысл в моей проблеме. Пытаюсь переключить его, и у меня проблема с модулем npm, и мне нужно будет попытаться найти обходной путь. Я отчитаюсь после того, как полагаю, что это будет.   -  person dvoutt    schedule 12.07.2021
comment
Если вы не установите ssr: true, это действительно останется только как SPA, следовательно, статический контент без JS не будет. Вероятно, ваш модуль несовместим с SSR, установите для него mode: client, как показано здесь: nuxtjs.org/docs/2.x/directory-structure/plugins#object-syntax   -  person kissu    schedule 12.07.2021
comment
Спасибо, его определенно нужно было поместить в ssr: true, и да, модуль был несовместим, но не был плагином или чем-то еще на основе Vue. Мне просто нужно было написать условие для переменной, чтобы проверить, является ли process.client истинным или нет, чтобы вызвать проблему сборки.   -  person dvoutt    schedule 12.07.2021
comment
Привет, мой ответ как-то помог?   -  person kissu    schedule 16.07.2021


Ответы (2)


С некоторой помощью @kissu проблема была вызвана тем, что в моем nuxt.config.js рендеринг на стороне сервера был отключен со следующим свойством st ssr: false, хотя должно было быть ssr: true. Были и последующие проблемы с Node JS, которые необходимо было решить в процессе.

person dvoutt    schedule 12.07.2021
comment
Привет, мой ответ как-то помог? - person kissu; 16.07.2021

Вам нужно использовать ssr: true, если вам нужно немного SEO, иначе он останется только как SPA.

target может иметь значение server (по умолчанию) или static.

person kissu    schedule 12.07.2021