теги opengraph не работают с компонентами [Vuejs, vue-meta] - PullRequest
Новая
       82

теги opengraph не работают с компонентами [Vuejs, vue-meta]

0 голосов
/ 25 октября 2018

Случай:

Я работаю над приложением vuejs со структурой маршрутов средней сложности, есть представление об этой системе (я собираюсь объяснить это позжевопрос), который отображает новостные статьи с данными, полученными из бэкэнда WordPress.Проблема в том, что когда я вставляю URL этой статьи на Facebook, он не показывает изображение этой статьи, или заголовок, или описание, ничего.

Структура проекта и чтоя пробовал это далеко

структура маршрутов проекта выглядит следующим образом:

Главная страница статьи 

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

У меня также есть представление статьи, которая является вложенным маршрутомкомпонента с именем League 

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

компонент, отображаемый в обоих представлениях статьи, является одинаковым, он выполняет запрос get http с axios, который выводит информацию, которую я отображаю в компоненте, такую ​​как заголовок, описание, телостатья и изображение.

Я установил метатеги для этого представления, используя 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>

Проблема

Когда я копирую любой из URL-адресов статей и вставляю их в Facebook, он не показывает название документа, или описание, или изображение, а только заголовок, который я установил в индексном HTML-документе, и значок сайта на веб-сайте, даже когдаTмета-теги открытого графика фактически отображаются.Другая странная вещь, которая случается, состоит в том, что facebook показывает то, что я только что сказал, со статьями, которые не являются дочерними маршрутами, с дочерними маршрутами, он вообще ничего не показывает

Если вам нужна дополнительная информация, просто дайте мнезнаю

...