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

Posted 2023-02-22

【中文标题】如何支持我的 SPA NuxtJS 应用程序的社交媒体共享和预览

【英文标题】：How do I support social media sharing and previews of my SPA NuxtJS app

【发布时间】：2020-05-24 03:54:07

【问题描述】：

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

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

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

更新：我已经设法使用Nuxt SEO package 进行了简单的预览。但是，这始终会在 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 错误，以便可以从那里找到它们。

【问题讨论】：

我插入了适当的代码来设置所需的元标记，然后我尝试在 LinkedIn 上分享一个链接，但它不会提供预览，说发生了错误。 i> -- 如果您可以在edit 您的问题中包含一个证明问题的minimal reproducible example，您更有可能获得帮助。

感谢您的建议。我会尽快尝试这样做。

你解决了吗？我也有同样的问题。

很遗憾，没有。我使用 prerender.io 作为临时解决方案，并且我也一直在研究使用 AWS 进行服务器端渲染（从技术上讲是无服务器端渲染，但我的应用程序太大，无法在 lambda 中运行。如果你有兴趣，有一个名为“serverless nuxt”的git repo，它有一个示例项目。

【参考方案1】：

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

Nuxt SEO 当然能够同时支持服务器端渲染 (s-s-r) 应用和静态生成的应用。

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

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

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

<template>
  <article>
    <h1> post.title </h1>
    <img :src="post.image" : />
    <nuxt-content :document="post" />
  </article>
</template>

<script>
  export default 
    async asyncData( params, error, $content ) 
      const [post] = await $content("blog",  deep: true )
        .where( slug: params.slug )
        .fetch();
      return  post ;
    ,
    head( $seo ) 
      $seo(
        title: this.post.title,
        description: this.post.description || 'fallback description',
        keywords: keywords,
        image: this.post.image || '',
        twitter.card: 'summary_large_image'
      );
    ,
    computed: 
      keywords()
        return this.post.keywords ? this.post.keywords : this.$seo.keywords;
      
    
  
</script>

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

【讨论】：

感谢您的回复！此问题不再适用，因为应用程序的该部分不再使用。还是要感谢您的回复，希望对以后遇到类似问题的人有所帮助！