我一直在研究，最后我意识到我真正的问题是什么。
主要问题是我将 Nuxt 应用程序部署到 netlify 中。此平台仅允许您将 Nuxt 应用部署为静态资源（静态生成部署，预渲染）。我的意思是，部署 Nuxt 应用程序有三种方法：通用、spa 和通用作为静态模式（静态生成部署，预渲染）。第三种情况是一种特殊情况，在这种情况下，您必须在部署时将所有静态资源创建为 html 页面。为此，您必须使用“npm run generate”命令。就我而言，我有一些动态路线，我必须做一些休息查询才能在每种情况下获得数据。我没有在构建时生成所有 html 页面的所有 db 行。对我来说真的很贵。所以最后的 Nuxt，对于动态路由的情况，它只生成一个 html 页面，但包括作为数据客户端的 js 部分。因此，当 Facebook 或 google 调用 url 时，他们会获取带有 js 的 html，但没有任何数据，因为 js 仅在浏览器中执行，并且当页面通过 rest 获取数据时，它就在那里。因此，Facebook、WhatsApp 的 Twitter 无法获取缺失内容的元数据。此外，这些服务在调用我的网址时会收到 404 http 错误代码，而不是 200 http 代码。因此，不可能将 url 分享到这些社交服务中。 解决方案：或者在构建时为每个资源生成所有 html 页面（案例 3），或者移动到另一个提供商作为 firebase，以便使用快速服务器部署为通用应用程序（案例 1）。 我想我会将其移至 firebase 以实现良好的 SEO 和社交媒体功能。
另一方面，我改变了我的 head 方法来完成开放图元数据：
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}`
}
]
}
}
您可以将元数据测试到下一页：
更新：
nuxt 可以在部署时使用 npm run generate 生成您的静态资源，这些资源是 SEO-ables。元标记运行良好。