用于社交分享的 Vue 应用程序元标记答案

【问题标题】：Vue application meta tags for social sharing用于社交分享的 Vue 应用程序元标记
【发布时间】：2020-08-17 01:43:13
【问题描述】：

我开发了一个 Vue 应用程序，每个页面都有导航和内容。我需要为 Twitter 和 Facebook 卡的每个不同页面设置元标记。为此，我使用了 vue-meta 库，并提出了以下代码：

metaInfo() {
  return {
    meta: [
      {
        property: 'og:title',
        content: `Card #${this.card_no ? this.card_no : ''}`,
        vmid: 'og:title'
      },
      {
        property: 'og:image',
        content: `${this.card ? this.card.participantA.image : ''}`,
        vmid: 'og:image'
      },
      {
        property: 'og:description',
        content: `${this.card ? this.card.description : ''}`,
        vmid: 'og:description'
      },
      {
        property: 'twitter:title',
        content: `Card #${this.card_no ? this.card_no : ''}`,
        vmid: 'twitter:title'
      },
      {
        property: 'twitter:image',
        content: `${this.card ? this.card.participantA.image : ''}`,
        vmid: 'twitter:image'
      },
      {
        property: 'twitter:description',
        content: `${this.card ? this.card.description : ''}`,
        vmid: 'twitter:description'
      },
      {
        name: 'twitter:card',
        content: `summary_large_image`,
        vmid: 'twitter:card'
      }
    ]
  }
}

属性是从mounted() 钩子的API 中获取的，我可以看到它们已正确添加。但是共享还没有起作用，我认为它们需要添加到主 index.html 中吗？但在我的情况下这是不可能的，因为它们是动态的，并不总是固定的。有没有解决的办法？我知道 SSR 可以解决这个问题，但目前这不是一个选项，因为此时使用 Nuxt 重写大部分应用程序是不可接受的。

【问题讨论】：

标签： javascript vue.js twitter vue-meta

【解决方案1】：

您可以在任何 vue 应用中实现没有 nuxt 的 SSR。不幸的是，我自己没有这样做。但是，你可以看看这个包：

https://github.com/vuejs/vue/tree/dev/packages/vue-server-renderer#readme

【讨论】：

我会检查一下，虽然我看到有很多未解决的错误，并且上次更新了将近半年，谢谢！

【解决方案2】：

我遇到了类似的问题，并花了很多时间来提出正确的解决方案，该解决方案在已经测试的生产就绪代码中涉及最少的代码更改。

你可以在这里看到我的问题 - Keeping asset and public path different in vue app for CDN

我终于在Rendertron 上圈了出来，它就像一个魅力。如果您在设置中遇到任何问题，我可以进一步帮助您。您可以在这个沙盒应用程序中看到 rendertron 如何呈现特定页面 - https://render-tron.appspot.com/

【讨论】：

这看起来很有希望，我目前正在浏览文档，我正在使用 Express 后端并且该应用程序托管在 Heroku 上。需要找到如何使用 Express 正确执行此操作的指南。
用 express，我认为这就像在你现有的应用程序中添加一个中间件一样简单-github.com/GoogleChrome/rendertron/tree/master/middleware

【解决方案3】：

爬虫不执行 JS，所以任何使用 JS 的解决方案都行不通。您会看到元数据正在呈现，因为您的浏览器会执行它。

我遇到了类似的问题，我最终使用了以下解决方案。

我正在使用 AWS CloudFront 为 APP 提供服务，并且我有一个 REST API，数据来自该 API
我创建了一个Lambda@Edge 来检查引荐来源网址，然后我
开始进行 REST API 调用，然后只呈现一个带有元数据的空白页面。

如果您已经使用 AWS 作为主机，则此解决方案很容易实施。

注意：Google 及其合作伙伴不认为这是伪装，至少目前是这样。

【讨论】：

我目前在 Heroku，不确定是否可以使用 Express，如果请求来自机器人，基本上你会提供不同的页面？

【解决方案4】：

为了简单地解释我所做的是从上面的所有评论中获取一些建议并在两者之间使用了一个解决方案，不久我在我的 Express 后端添加了另一个中间件，它将拦截社交机器人：

//Social bots intercept
app.use('/info/:id', function (req, res, next) {
  let userAgent = req.headers['user-agent'];
  if (userAgent.startsWith('facebookexternalhit/1.1') ||
      userAgent === 'Facebot' ||
      userAgent.startsWith('Twitterbot')) {
...

因此，如果请求来自机器人，我只需使用 mustache 渲染视图

    res.render('index', injectData)

如果请求不是来自机器人，我只是调用

next()

下面是我正在使用的 index.mustache 文件的代码：

<!DOCTYPE html>
<html class="no-js" xmlns:fb="http://ogp.me/ns/fb#">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# business: http://ogp.me/ns/business#">

    <!-- Facebook metadata -->
    <meta property="og:title" content="{{title}}">
    <meta property="og:description" content="{{description}}">
    <meta property="og:image" content="{{image}}">
    <meta property="og:url" content="{{url}}">
    <meta name="twitter:card" content="summary_large_image">


    <meta property="og:site_name" content="{{site_name}}">
    <meta name="twitter:image:alt" content="{{alt_image}}">
</head>
<body>
<div id="fb-root"></div>

<div id="app"></div>
</body>
</html>

【讨论】：