Open Graph реактивная метаинформация - PullRequest
Новая
       38

Open Graph реактивная метаинформация

0 голосов
/ 18 октября 2018

Моя метаинформация OG для определенной ссылки (например, ссылка на запись в блоге) поступает из базы данных (например, для загрузки сообщения в блоге требуется некоторое время).

Я использую Vue + Nuxt с SSR и Axios для загрузки сообщения в блоге.

Поскольку axios является асинхронным, элементы моей страницы загружаются до того, как поступит сообщение. Тем временем Facebook уже читает «фиктивные» метаданные.

Я не хочу делать рендеринг, и я хочу, чтобы мои данные были как можно более динамичными.Есть ли обходной путь для этого?

1 Ответ

0 голосов
/ 18 октября 2018

Чтобы сканеры считывали правильные метаданные, они должны присутствовать в ответе html с сервера.Это основная причина реализации SSR.

Другими словами, данные постов в блоге должны быть доступны в приложении к моменту рендеринга html на сервере.Он не специфичен для Nuxt, а в настоящее время сканеры анализируют содержимое страницы.

Если вы используете Nuxt в универсальном или сгенерированном режиме, он обеспечивает asyncData и fetch хуки в компонентах страницы для таких случаев.

Простой пример решения для компонента страницы: 

export default {
  async asyncData ({ app, params }) {
    try {
      const { data: { post } } = await app.$axios.get(`/api/post/${params.postSlug}`) // or any app specific url format
      return {
        post
      }
    } catch (error) {
      // handle case when no blog post is found, etc
    }
  },
  head () {
    return {
       title: this.post.title,
       meta: [
         { hid: 'og-title', property: 'og:title', content: this.post.title },
       ]
    }
  },
  // Other component's options: data, methods, etc.
}

После этого данные публикации будут доступны через this.post

Это обеспечит соответствие контента, используемого сканером,страницы.

Не существует надежного и универсального способа заставить сканеры ждать, пока будет сгенерировано содержимое страницы, перед ее анализом.Опять же, это главная цель, которую пытаются достичь Nuxt.js и другие платформы SSR.

...