时间戳

首页 > 解决方案 > Facebook/Twitter 上的 Nuxt.js 预览不起作用：404 错误

vue.js - Facebook/Twitter 上的 Nuxt.js 预览不起作用：404 错误

问题描述

我有一个使用 Nuxt.js 实现的网站，并希望在 Facebook、Twitter 和 WhatsApp 上分享这些页面。我必须使用元标记 opengraph，所以我已经包含了它们。当我尝试将页面共享到社交网络时，我看不到元标记的内容。我也看不到图片，标题和描述。

在我的情况下，元标记 opengraph 非常适合并填充在页面中。我已经在几个资源中阅读了如何做到这一点，所以这不是问题。它们位于<head>标签中。

但问题是当您使用 Facebook 调试器工具查看页面预览时，或使用https://metatags.io/工具时。当我编写页面的 url 时，404会为这些工具返回 a。对于浏览器中的相同 url，您可以正确查看页面的内容。如果您检查页面，您可以看到元标记。我认为问题在于 Twitter 或 Facebook 正在GET调用我的 url，但在我的理解中，这个调用的结果是一个 Nuxt.js 预渲染页面，用于在浏览器中执行。在浏览器中，JS 源代码在页面加载时执行，因此它可以注入所有元标记和许多其他内容。我认为这就是 Nuxt.js SSR 的工作方式。水化过程？

所以我的观点是如何在完成后发送完整的 HTML GET，或者在 Facebook 或 Twitter 中显示我的预览页面的解决方法。

顺便说一句，我已经在 Netlify 中部署了我的网站，我不知道这是否重要。我的 nuxtjs 应用程序正在通用模式下工作。

有解决爬虫和机器人问题的想法吗？任何预渲染选项？

标签： vue.jsfacebook-opengraphserver-side-renderingshare-open-graphnuxtjs

解决方案

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

推荐阅读