Question

情况：

我正在开发一个具有中等复杂性路由结构的vuejs应用程序，该系统上有一个视图（我将在稍后讨论这个问题），该视图使用来自wordpress后端的数据来渲染新闻报道。问题是，当我将该文章的网址粘贴到Facebook上时，它没有显示该文章的图像，标题或描述，什么也没显示。

保护结构以及我到目前为止已经尝试过的内容

保护路线的结构如下：

首页文章

<Root>
  <App>
    <Article>  router-view /article/:id

我还有一个文章视图，它是名为League的组件的嵌套路线

<Root>
  <App>
    <League> router-view /league
      <Article>  router-view /league/article/:id

在两个文章视图上呈现的组件都是相同的，它使用axios发出get http请求，该请求将使我呈现在该组件上的信息（例如标题，描述，文章正文和图像）进入

。

我使用vue-meta为该视图设置了元标记，如下所示：

<script>
import axios from 'axios';

export default {
  props: ['id'],
  data() {
    return {
      article: '',
  },
  created() {
    this.loadComponentData();
  },
  computed: {
    title() {
      if (this.article) {
        return this.article.title.rendered;
      } return 'loading...';
    },
    description() {
      if (this.article) {
        let des = this.article.acf.short_description.replace(/<\/p>/g, '');
        des = des.replace(/<p>/g, '');
        return des;
      } return 'loading...';
    },
    image() {
      if (this.article) {
        return this.article.acf.cover_image;
      } return '';
    },
  },
  methods: {

    async loadComponentData() {
      try {
        const article = await axios.get(`http://requestURLHere/wp-json/wp/v2/article/${this.id}`);
        this.article = article.data;
      } catch (e) {
        throw new Error(e);
      }
    }
  },
  metaInfo() {
    return {
      title: this.title,
      meta: [
        {
          property: 'og:title',
          content: this.title,
        },
        {
          property: 'og:type',
          content: 'website',
        },
        {
          property: 'og:description',
          content: this.description,
        },
        {
          property: 'og:image',
          content: this.image,
        },
        {
          property: 'og:url',
          content: `http://realServerURL/article/${this.id}`,
        },
      ],
    };
  },
};
</script>

问题

当我复制任何文章的网址并将其粘贴到Facebook时，它不会显示文档的标题，描述或图像，仅显示我在索引html文档上设置的标题以及网站上的收藏夹图标，即使实际呈现了开放图元标记。发生的另一件奇怪的事情是，facebook仅在非子路线的文章中显示了我刚才所说的内容，在子路线中它根本没有显示任何内容

如果您需要更多信息，请告诉我

opengraph标签不适用于组件[Vuejs，vue-meta]

0 个答案: