我一直在研究,最后我意识到我真正的问题是什么。主要问题是我将 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。元标记运行良好。