如何支持 SPA NuxtJS 应用程序的社交媒体共享和预览

Question

我一直在制作 SPA NuxtJS 应用程序。我插入了适当的代码来设置所需的元标记，然后尝试在 LinkedIn 上共享链接，但它不会提供预览，并表示发生了错误。

我尝试通过LinkedIn的工具检查预览，但它返回404错误。如果我在浏览器中输入相同的 URL，页面就会正常打开。

是否可以为静态服务的 NuxtJS SPA 启用社交媒体预览，是否也可以为动态路由启用社交媒体预览？如果是，怎么办？

更新：我已经成功使用Nuxt SEO 包获得了一个简单的预览。但是，这始终在 LinkedIn 预览中显示默认图像和标题。

nuxt.config.js

modules: [
    ...,
    'nuxt-seo',
    ...
],
seo: {
    title: 'Default title',
    og: {
      image: <default image>
    }
},

组件中的异步数据：

asyncData: (ctx) => {
    ctx.seo({
      title: 'Custom title in component',
      og: {
        image: <link to alternate image>,
      },
    })
},

对于动态页面，我通过将请求指向index.html 来设法避免 404 错误，以便可以从那里找到它们。

Answer 1

我是nuxt seo 包的新维护者。有一个完整的示例，说明如何为博客设置和使用 nuxt seo，包括社交共享图像。这将解释更多我在这里重复的内容：

\n

Nuxt SEO 当然能够支持服务器端渲染（SSR）应用程序和静态生成的应用程序。

\n

我会在您的文件中添加您的“全局默认”设置nuxt.config.js。包括默认的社交媒体图像和社交媒体句柄。

\n

export default {\n  seo: {\n    baseUrl: \'https://frostbutter.com\',\n    name: \'Site Name\',\n    templateTitle: \'%name% \xe2\x80\x94 %title%\',\n    description: "Hi! I\'m Nick, an indie developer.",\n    keywords: \'indie, developer, nuxt\',\n    canonical: \'auto\',\n    isForcedTrailingSlash: false,\n    author: \'Nick Frostbutter\',\n    openGraph.image: {\n      url: \'https://frostbutter.com/img/nick.jpg\',\n    },\n    twitter: { \n      site: \'@nickfrosty\', \n      creator: \'@nickfrosty\',\n      card: \'summary\',\n    },\n  }\n}\n

\n

然后，对于您想要在其上自定义社交共享图像的每个页面（例如您尝试在 linkedin 上共享的文章），覆盖静态head()设置值中的全局默认值，或用于asyncData必须从 api 获取的数据或其他来源，例如 nuxt 内容。

\n

<template>\n  <article>\n    <h1>{{ post.title }}</h1>\n    <img :src="post.image" :alt="post.title" />\n    <nuxt-content :document="post" />\n  </article>\n</template>\n\n<script>\n  export default {\n    async asyncData({ params, error, $content }) {\n      const [post] = await $content("blog", { deep: true })\n        .where({ slug: params.slug })\n        .fetch();\n      return { post };\n    },\n    head({ $seo }) {\n      $seo({\n        title: this.post.title,\n        description: this.post.description || \'fallback description\',\n        keywords: keywords,\n        image: this.post.image || \'\',\n        twitter.card: \'summary_large_image\'\n      });\n    },\n    computed: {\n      keywords(){\n        return this.post.keywords ? this.post.keywords : this.$seo.keywords;\n      }\n    }\n  }\n</script>\n

\n

PS：我为 nuxt seo 项目创建了一个更全面的文档网站。我将更多地研究 linkedin 社交媒体共享规则，并尝试为其网站添加一些文档。\n如果您找到任何好的资源，请告诉我。

\n