Open Graph 标签和 Nuxt.js（产品？）

Question

我按照 https://nuxtjs.org/examples/seo-twitter-og

的 SEO 文档中的说明将 OpenGraph 标签集成到我的 Nuxt.js 应用程序中

我正在使用 SocialHead 组件从子组件设置标签。该组件的内容是：

<template>
  <span v-if="false" />
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '',
    },
    description: {
      type: String,
      default: '',
    },
    url: {
      type: String,
      default: '',
    },
    image: {
      type: String,
      default: '/images/hero/brain-og.png',
    },
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'og:title',
          name: 'og:title',
          content: this.title.replace(' - M.academy', ''),
        },
        {
          hid: 'description',
          name: 'description',
          content: this.description,
        },
        {
          hid: 'og:description',
          property: 'og:description',
          content: this.description,
        },
        {
          hid: 'og:url',
          property: 'og:url',
          content: process.env.baseUrl + this.url,
        },
        {
          hid: 'og:type',
          property: 'og:type',
          content: 'website',
        },
        {
          hid: 'og:image',
          property: 'og:image',
          content: process.env.baseUrl + this.image,
        },
        {
          hid: 'og:image:secure_url',
          property: 'og:image:secure_url',
          content: process.env.baseUrl + this.image,
        },
        {
          hid: 'og:image:alt',
          property: 'og:image:alt',
          content: this.description,
        },
        {
          hid: 'twitter:title',
          name: 'twitter:title',
          content: this.title.replace(' - M.academy', ''),
        },
        {
          hid: 'twitter:card',
          name: 'twitter:card',
          content: 'summary_large_image',
        },
        {
          hid: 'twitter:image',
          name: 'twitter:image',
          content: process.env.baseUrl + this.image,
        },
        {
          hid: 'twitter:description',
          name: 'twitter:description',
          content: this.description,
        },
        {
          hid: 'twitter:site',
          name: 'twitter:site',
          content: '@mdotacademy',
        },
        {
          hid: 'twitter:creator',
          name: 'twitter:creator',
          content: '@markshust',
        },
      ],
    }
  },
}
</script>

我正在使用 Google Chrome 的“Open Graph Preview”扩展，在本地，它们似乎都可以正常工作和预览：

但是，当我将这些更新部署到生产环境并再次检查时，我使用的所有 Open Graph 预览工具似乎都找不到标签：

我还在以下位置测试了 LinkedIn 和 Twitter 的开放图预览工具：

我有点卡住了，因为标签在查看页面源代码时出现，并且还使用了 https://www.opengraph.xyz/ 之类的工具——但没有使用实际的 LinkedIn 和 Twitter 验证工具。

我测试出来的页面是https://m.academy/courses/build-12-factor-nodejs-app-docker/

Answer 1

最后，删除 prerender.io 足以解决 SEO 问题，因为配置已正确完成。

Open Graph 标签和 Nuxt.js（产品？）

Issue with Open Graph tags and Nuxt.js (prod?)

javascript

seo

vue.js

share-open-graph

nuxt.js