Реактивная метаинформация Open Graph
Моя метаинформация OG для определенной ссылки (например, ссылка на сообщение в блоге) поступает из базы данных (например, для загрузки сообщения в блоге требуется время).
Я использую Vue + Nuxt с SSR и Axios для загрузки сообщения в блоге.
Поскольку axios является асинхронным, элементы моей страницы загружаются до того, как приходит сообщение. Тем временем facebook уже считывает «фиктивные» метаданные.
Мне не нужен предварительный рендеринг, и я хочу, чтобы мои данные были как можно более динамичными. Есть ли обходной путь для этого?
Ответы 1
Чтобы сканеры могли читать правильные метаданные, они должны присутствовать в 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.