Я исследовал и, наконец, понял, в чем была моя настоящая проблема. Основная проблема в том, что я развертываю приложение Nuxt в netlify . Эта платформа позволяет развертывать приложение Nuxt только в качестве ресурсов stati c ( Stati c Generated Deployment, Pre-Rendered ). Я имею в виду, что есть три способа развернуть приложение Nuxt: универсальный, спа и универсальный в режиме stati c (Stati c Generated Deployment, Pre-rendered). Третий случай - это особый случай, в котором вам нужно создать все ресурсы stati c как html страниц во время развертывания. Для этого вы должны использовать команду «npm run generate». В моем случае у меня есть несколько маршрутов Dynami c, и мне нужно выполнить несколько запросов на отдых, чтобы получить данные в каждом случае. У меня нет всех строк db для создания всех страниц html во время сборки. Для меня это очень дорого. Итак, Nuxt в конце, для случая динамических c маршрутов, он генерирует только страницу html, но включает часть js, которая является клиентом данных. Поэтому, когда Facebook или Google обращается к URL-адресу, они получают html с js, но ничего из данных, потому что js выполняется только в браузере, и он там, когда страница получает данные через отдых. Итак, Facebook, Twitter или WhatsApp не могут получить метаданные чего-то, чего не хватает. Кроме того, эти службы получают код ошибки 404 http, когда они обращаются к моим URL-адресам, вместо кода 200 http. Таким образом, невозможно передать URL-адрес в эти социальные службы. Решение: либо сгенерировать все html страницы для каждого ресурса во время сборки (случай 3), либо перейти к другому провайдеру как firebase, чтобы развернуть как универсальное приложение (случай 1) с express server. Думаю, я перенесу его на firebase, чтобы добиться хороших возможностей SEO и социальных сетей.
с другой стороны, я изменил свой метод head на sh с метаданными открытого графика:
head() {
return {
title: `${MyStringHandler.truncate(defaultTitle, 65)}`,
description: defaultDescription,
link: [
{
rel: 'canonical',
href: `${routePath}`
}
],
htmlAttrs: {
lang: `${language}`
},
meta: [
{
charset: 'utf-8'
},
{
hid: 'title',
name: 'title',
content: `${MyStringHandler.truncate(defaultTitle, 65)}`
},
{
hid: 'description',
name: 'description',
content: `${MyStringHandler.truncate(overviewDefault, 155)}`
},
{
hid: 'og:type',
property: 'og:type',
content: 'website'
},
{
hid: 'og:title',
property: 'og:title',
content: `${MyStringHandler.truncate(defaultTitle, 35)}`
},
{
hid: 'og:description',
property: 'og:description',
content: `${MyStringHandler.truncate(overviewDefault, 65)}`
},
{
hid: 'og:image',
property: 'og:image',
content: URLHelper.get2XURL(path) // the size has to be more 200px at least
},
{
hid: 'og:url',
property: 'og:url',
content: `www.mydomain.com${routePath}`
},
{
hid: 'og:site_name',
property: 'og:site_name',
content: `mydomain.com`
},
{
hid: 'og:locale',
property: 'og:locale',
content: `es`
},
{
hid: 'og:image:type',
property: 'og:image:type',
content: 'image/jpeg'
},
{
hid: 'twitter:card',
property: 'twitter:card',
content: `${MyStringHandler.truncate(overviewDefault, 65)}`
},
{
hid: 'twitter:site',
property: 'twitter:site',
content: 'mydomain'
},
{
hid: 'twitter:title',
name: 'twitter:title',
content: `${MyStringHandler.truncate(defaultTitle, 35)}`
},
{
hid: 'twitter:description',
name: 'twitter:description',
content: `${MyStringHandler.truncate(overviewDefault, 65)}`
},
{
hid: 'twitter:creator',
property: 'twitter:creator',
content: 'mydomain'
},
{
hid: 'twitter:image:src',
property: 'twitter:image:src',
content: URLHelper.getImageURL(path)
},
{
hid: 'twitter:domain',
property: 'twitter:domain',
content: 'mydomain.com'
},
{
hid: 'twitter:image',
name: 'twitter:image',
content: URLHelper.getImageURL(path)
},
{
hid: 'twitter:url',
name: 'twitter:url',
content: `www.mydomain.com${routePath}`
}
]
}
}
Вы можете протестировать метаданные на следующих страницах: