4

我开发了一个 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'
      }
    ]
  }
}

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

4

4 回答 4

1

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

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

于 2020-05-02T15:25:10.193 回答
0

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

你可以在这里看到我的问题 -在 vue app for CDN 中保持资产和公共路径不同

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

于 2020-05-02T15:28:16.060 回答
0

为了简单地解释我所做的事情，我从上面的所有评论中得到了一些建议，并在两者之间使用了一个解决方案，不久我在我的 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>
于 2020-05-04T08:46:57.750 回答
0

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

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

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

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

注意：至少目前，Google 和 co 不认为这是伪装。

于 2020-05-02T17:22:49.697 回答